Dalam modul sebelumnya, Anda telah mempelajari cara mengoptimalkan HTML, CSS, JavaScript, dan resource media. Dalam modul ini, temukan beberapa metode untuk mengoptimalkan font web.
Font web dapat memengaruhi performa halaman pada waktu pemuatan dan waktu rendering.
File font besar dapat memerlukan waktu beberapa saat untuk didownload dan berdampak negatif pada First
Contentful Paint (FCP), sedangkan nilai font-display yang salah dapat menyebabkan
pergeseran tata letak yang tidak diinginkan yang berkontribusi pada Pergeseran Tata Letak Kumulatif
(CLS) halaman.
Sebelum mengoptimalkan font web dapat dibahas, mengetahui cara font ditemukan oleh browser akan sangat membantu, sehingga Anda dapat memahami cara CSS mencegah pengambilan font web yang tidak diperlukan dalam situasi tertentu.
Discovery
Font web halaman ditentukan dalam style sheet menggunakan deklarasi @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Cuplikan kode sebelumnya menentukan font-family yang bernama "Open Sans", dan
memberi tahu browser tempat menemukan resource font web masing-masing. Untuk menghemat
bandwidth, browser tidak mendownload font web sampai ditetapkan
bahwa tata letak halaman saat ini memerlukannya.
h1 {
font-family: "Open Sans";
}
Dalam cuplikan CSS sebelumnya, browser mendownload file font "Open Sans"
saat mengurai elemen <h1> di HTML halaman.
preload
Jika deklarasi @font-face Anda ditetapkan dalam style sheet eksternal, browser hanya dapat mulai mendownloadnya setelah mendownload style sheet.
Hal ini membuat font web menjadi resource yang jarang ditemukan—tetapi ada cara untuk membantu
browser menemukan font web lebih cepat.
Anda dapat memulai permintaan awal untuk resource font web menggunakan perintah
preload. Perintah preload membuat font web dapat ditemukan lebih awal selama
pemuatan halaman, dan browser akan langsung mulai mendownloadnya tanpa menunggu
style sheet selesai mendownload dan mengurai. Perintah preload
tidak menunggu sampai font diperlukan di halaman.
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Deklarasi @font-face inline
Anda dapat membuat font dapat ditemukan lebih awal selama pemuatan halaman dengan membuat
CSS pemblokir render—termasuk deklarasi @font-face—menjadi inline di <head>
HTML menggunakan elemen <style>. Dalam hal ini, browser akan menemukan
font web lebih awal di pemuatan halaman, karena tidak perlu menunggu style sheet
eksternal untuk didownload.
Penyertaan deklarasi @font-face memiliki keunggulan dibandingkan penggunaan petunjuk
preload, karena browser hanya mendownload font yang diperlukan untuk merender halaman
saat ini. Tindakan ini akan mengurangi risiko mendownload font yang tidak digunakan.
Download
Setelah menemukan font web dan memastikan font tersebut diperlukan oleh tata letak halaman saat ini, browser dapat mendownloadnya. Jumlah font web, encoding-nya, dan ukuran filenya dapat sangat memengaruhi seberapa cepat font web didownload dan dirender oleh browser.
Hosting sendiri font web Anda
Font web dapat ditampilkan melalui layanan pihak ketiga, seperti Google Fonts, atau dapat dihosting sendiri di origin Anda. Saat menggunakan layanan pihak ketiga, halaman web Anda harus membuka koneksi ke domain penyedia agar dapat mulai mendownload font web yang diperlukan. Hal ini dapat menunda penemuan dan download font web berikutnya.
Overhead ini dapat dikurangi menggunakan petunjuk resource preconnect. Dengan menggunakan
preconnect, Anda dapat memberi tahu browser untuk membuka koneksi ke lintas asal
lebih cepat daripada biasanya:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Cuplikan HTML sebelumnya memberi petunjuk browser untuk membuat koneksi ke fonts.googleapis.com dan koneksi CORS ke fonts.gstatic.com. Beberapa
penyedia font—seperti Google Fonts—menyajikan resource CSS dan font dari asal
yang berbeda.
Anda dapat menghilangkan kebutuhan akan koneksi pihak ketiga dengan menghosting sendiri font web Anda. Dalam sebagian besar kasus, font web yang di-hosting sendiri lebih cepat daripada mendownloadnya dari lintas asal. Jika Anda berencana untuk menghosting sendiri font web, pastikan situs Anda menggunakan Jaringan Penayangan Konten (CDN), HTTP/2, atau HTTP/3, dan tetapkan header cache yang benar untuk font web yang Anda perlukan untuk situs.
Gunakan WOFF2—dan WOFF2 saja
WOFF2 menikmati dukungan browser yang luas dan kompresi terbaik—hingga 30% lebih baik daripada WOFF. Berkurangnya ukuran file akan mempercepat waktu download. Format WOFF2 sering kali merupakan satu-satunya yang diperlukan untuk kompatibilitas penuh di seluruh browser modern.
Subset font web Anda
Font web biasanya mencakup berbagai glyph, yang diperlukan untuk mewakili beragam karakter yang digunakan dalam berbagai bahasa. Jika halaman hanya menayangkan konten dalam satu bahasa atau menggunakan satu alfabet, Anda dapat mengurangi ukuran font web melalui subsetelan. Hal ini sering dilakukan dengan menentukan angka—atau rentang—titik kode unicode.
Subset adalah kumpulan glyph yang dikurangi yang disertakan dalam file font web asli. Misalnya, halaman Anda mungkin menayangkan subset tertentu untuk karakter Latin, bukan menampilkan semua glyph. Bergantung pada subset yang diperlukan, menghapus glyph dapat mengurangi ukuran file font secara signifikan.
Beberapa penyedia font web, seperti Google Fonts, menawarkan subkumpulan secara otomatis melalui penggunaan parameter string kueri. Misalnya, URL https://fonts.googleapis.com/css?family=Roboto&subset=latin menayangkan
style sheet dengan font web Roboto yang hanya menggunakan alfabet Latin.
Jika Anda memutuskan untuk menghosting sendiri font web Anda, langkah berikutnya adalah membuat dan menghosting sendiri subset tersebut menggunakan alat seperti glyphanger atau subfont.
Namun, jika tidak dapat menghosting sendiri font web Anda sendiri, Anda dapat
membuat subset font web yang disediakan oleh Google Fonts dengan menentukan parameter string kueri text
tambahan yang hanya berisi poin kode unicode yang diperlukan untuk
situs Anda. Misalnya, jika Anda memiliki font web tampilan di situs yang hanya
memerlukan sedikit karakter yang diperlukan untuk frasa "Selamat Datang", Anda dapat
meminta subset tersebut melalui Google Fonts melalui URL berikut:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Hal ini dapat
secara signifikan mengurangi jumlah data font web yang diperlukan untuk satu jenis huruf
di situs Anda, jika subsetelan ekstrem tersebut dapat berguna untuk situs Anda.
Rendering font
Setelah menemukan dan mendownload font web, browser dapat
dirender. Secara default, browser memblokir rendering teks apa pun yang menggunakan
font web hingga didownload. Anda dapat menyesuaikan perilaku rendering teks browser, dan mengonfigurasi teks apa yang harus ditampilkan—atau tidak ditampilkan—sampai font web dimuat sepenuhnya menggunakan properti CSS font-display.
block
Nilai default untuk font-display adalah block. Dengan block, browser
memblokir rendering teks apa pun yang menggunakan font web yang ditentukan. Setiap browser memiliki perilaku yang sedikit berbeda. Chromium dan Firefox memblokir rendering
hingga maksimum 3 detik sebelum menggunakan penggantian. Safari memblokir tanpa batas waktu
hingga font web dimuat.
swap
swap adalah nilai font-display yang paling banyak digunakan. swap tidak memblokir
rendering, dan menampilkan teks langsung dalam penggantian sebelum menukar
dalam font web yang ditentukan. Dengan begitu, Anda dapat langsung menampilkan konten tanpa menunggu
font web didownload.
Namun, kelemahan dari swap adalah menyebabkan pergeseran tata letak jika font web
penggantian dan font web yang ditentukan dalam CSS Anda sangat bervariasi dalam hal tinggi
baris, kerning, dan metrik font lainnya. Hal ini dapat memengaruhi CLS situs jika
Anda tidak berhati-hati dalam menggunakan petunjuk preload untuk memuat resource font web sesegera
mungkin, atau jika Anda tidak mempertimbangkan nilai font-display lainnya.
fallback
Nilai fallback untuk font-display adalah kompromi antara
block dan swap. Tidak seperti swap, browser memblokir rendering font, tetapi
bertukar dengan teks pengganti hanya untuk jangka waktu yang sangat singkat. Namun, tidak seperti block, periode pemblokiran sangat singkat.
Penggunaan nilai fallback dapat berfungsi dengan baik di jaringan cepat, yang jika font web
didownload dengan cepat, font web adalah jenis huruf yang langsung digunakan pada
rendering awal halaman. Namun, jika jaringan lambat, teks penggantian akan terlihat
terlebih dahulu setelah periode pemblokiran berlalu, lalu ditukar saat font web
tiba.
optional
optional adalah nilai font-display yang paling ketat, dan hanya menggunakan resource font
web jika didownload dalam waktu 100 milidetik. Jika font web
memerlukan waktu lebih lama untuk dimuat, font tersebut tidak akan digunakan di halaman, dan browser menggunakan
jenis huruf fallback untuk navigasi saat ini sementara font web didownload di
latar belakang dan ditempatkan di cache browser.
Akibatnya, navigasi halaman berikutnya dapat langsung menggunakan font web, karena
sudah didownload. font-display: optional menghindari pergeseran tata letak yang terlihat
dengan swap, tetapi beberapa pengguna tidak melihat font web jika terlambat muncul di
navigasi halaman awal.
Demo font
Menguji pengetahuan Anda
Kapan browser mendownload resource font web (dengan asumsi bahwa resource tersebut tidak
diambil dengan perintah preload)?
Apa satu-satunya format (dan paling efisien) yang diperlukan untuk menyediakan font web ke semua browser modern?
Berikutnya: JavaScript pemisahan kode
Setelah memahami pengoptimalan font, Anda kini dapat melanjutkan ke modul berikutnya, yang membahas topik yang memiliki potensi tinggi untuk meningkatkan kecepatan pemuatan halaman awal bagi pengguna Anda, yaitu menunda pemuatan JavaScript melalui pemisahan kode. Dengan demikian, Anda dapat menjaga bandwidth dan pertentangan CPU serendah mungkin selama fase memulai halaman, periode waktu saat pengguna kemungkinan besar berinteraksi dengan halaman.