Dalam modul sebelumnya, Anda telah mempelajari cara mengoptimalkan HTML, CSS, JavaScript, dan sumber daya media. Dalam modul ini, pelajari beberapa metode untuk mengoptimalkan font web.
Font web dapat memengaruhi performa halaman pada waktu pemuatan dan waktu rendering.
File font besar dapat memerlukan waktu lama untuk didownload dan berdampak negatif pada First Contentful Paint (FCP), sementara nilai font-display yang salah dapat menyebabkan pergeseran rendering visual yang tidak diinginkan.
Sebelum mengoptimalkan font web dapat dibahas, mengetahui cara font web ditemukan oleh browser dapat membantu, sehingga Anda dapat memahami cara CSS mencegah pengambilan font web yang tidak diperlukan dalam situasi tertentu.
Discovery
Font web halaman ditentukan dalam lembar gaya menggunakan @font-face
deklarasi:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Cuplikan kode sebelumnya menentukan font-family bernama "Open Sans", dan
memberi tahu browser tempat untuk menemukan resource font web yang sesuai. Untuk menghemat bandwidth, browser tidak mendownload font web hingga ditentukan bahwa tata letak halaman saat ini memerlukannya.
h1 {
font-family: "Open Sans";
}
Dalam cuplikan CSS sebelumnya, browser mendownload file font "Open Sans"
saat mem-parsing elemen <h1> di HTML halaman.
preload
Jika deklarasi @font-face Anda ditentukan dalam stylesheet eksternal, browser hanya dapat mulai mendownloadnya setelah mendownload stylesheet. Hal ini membuat font web menjadi resource yang ditemukan terlambat, tetapi ada cara untuk membantu browser menemukan font web lebih cepat.
Anda dapat memulai permintaan awal untuk resource font web menggunakan direktif preload. Direktif preload membuat font web dapat ditemukan lebih awal selama pemuatan halaman, dan browser akan segera mulai mendownloadnya tanpa menunggu stylesheet selesai didownload dan diuraikan. Direktif preload
tidak menunggu hingga 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>
Pernyataan @font-face inline
Anda dapat membuat font dapat ditemukan lebih awal selama pemuatan halaman dengan menyisipkan
CSS yang memblokir rendering—termasuk deklarasi @font-face—di <head>
HTML Anda menggunakan elemen <style>. Dalam hal ini, browser menemukan font web lebih awal saat pemuatan halaman, karena tidak perlu menunggu download file lembar gaya eksternal.
Menyisipkan deklarasi @font-face memiliki keunggulan dibandingkan menggunakan petunjuk preload, karena browser hanya mendownload font yang diperlukan untuk merender halaman saat ini. Hal ini menghilangkan risiko mendownload font yang tidak digunakan.
Download
Setelah menemukan font web dan memastikan bahwa font tersebut diperlukan oleh tata letak halaman saat ini, browser dapat mendownloadnya. Jumlah font web, encoding-nya, dan ukuran filenya dapat memengaruhi kecepatan font web didownload dan dirender oleh browser secara signifikan.
Menghosting sendiri font web Anda
Font web dapat ditayangkan melalui layanan pihak ketiga, seperti Google Fonts, atau dapat dihosting sendiri di origin Anda. Saat menggunakan layanan pihak ketiga, halaman web Anda perlu membuka koneksi ke domain penyedia sebelum 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 origin
lebih awal daripada yang biasanya dilakukan browser:
<link rel="preconnect" href="/https://fonts.googleapis.com">
<link rel="preconnect" href="/https://fonts.gstatic.com" crossorigin>
Cuplikan HTML sebelumnya memberi petunjuk kepada browser untuk membuat koneksi ke
fonts.googleapis.com dan koneksi CORS ke fonts.gstatic.com. Beberapa penyedia font, seperti Google Fonts, menayangkan CSS dan resource font dari origin yang berbeda.
Anda dapat menghilangkan kebutuhan akan koneksi pihak ketiga dengan menghosting sendiri font web. Dalam kebanyakan kasus, menghosting sendiri font web lebih cepat daripada mendownloadnya dari origin lintas situs. Jika Anda berencana menghosting sendiri font web, periksa apakah situs Anda menggunakan Content Delivery Network (CDN), HTTP/2 atau HTTP/3, dan menetapkan header caching yang benar untuk font web yang Anda butuhkan untuk situs Anda.
Gunakan WOFF2—dan hanya WOFF2
WOFF2 menikmati dukungan browser yang luas dan kompresi terbaik—hingga 30% lebih baik daripada WOFF. Ukuran file yang lebih kecil akan menghasilkan waktu download yang lebih cepat. Format WOFF2 sering kali merupakan satu-satunya format yang diperlukan untuk kompatibilitas penuh di seluruh browser modern.
Membuat subset font web
Font web biasanya mencakup berbagai glif yang berbeda, yang diperlukan untuk merepresentasikan berbagai karakter yang digunakan dalam berbagai bahasa. Jika halaman Anda menyajikan konten dalam satu bahasa saja—atau menggunakan satu alfabet—Anda dapat mengurangi ukuran font web melalui subsetting. Hal ini sering dilakukan dengan menentukan angka—atau rentang—titik kode unicode.
Subset adalah sekumpulan glyph yang dikurangi yang disertakan dalam file font web asli. Misalnya, alih-alih menayangkan semua glyph, halaman Anda dapat menayangkan subset tertentu untuk karakter Latin. Bergantung pada subset yang diperlukan, menghapus glyph dapat secara signifikan mengurangi ukuran file font.
Beberapa penyedia font web—seperti Google Fonts—menawarkan subset secara otomatis melalui penggunaan parameter string kueri. Misalnya, URL
https://fonts.googleapis.com/css?family=Roboto&subset=latin menyajikan
lembar gaya dengan font web Roboto yang hanya menggunakan alfabet Latin.
Jika Anda telah memutuskan untuk menghosting sendiri font web, langkah selanjutnya adalah membuat dan menghosting sendiri subset tersebut menggunakan alat seperti glyphanger atau subfont.
Namun, jika Anda tidak memiliki kapasitas untuk menghosting sendiri font web, Anda dapat membuat subset font web yang disediakan oleh Google Fonts dengan menentukan parameter string kueri text tambahan yang hanya berisi titik kode Unicode yang diperlukan untuk situs Anda. Misalnya, jika Anda memiliki font web tampilan di situs yang hanya memerlukan sejumlah kecil 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 typeface di situs Anda, jika subset ekstrem tersebut dapat berguna di situs Anda.
Rendering font
Setelah menemukan dan mendownload font web, browser dapat merendernya. Secara default, browser memblokir rendering teks apa pun yang menggunakan font web hingga font tersebut didownload. Anda dapat menyesuaikan perilaku rendering teks browser, dan mengonfigurasi teks yang harus ditampilkan—atau tidak ditampilkan—hingga 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. Browser yang berbeda berperilaku 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 segera dalam penggantian sebelum menukar font web yang
ditentukan. Dengan begitu, Anda dapat menampilkan konten Anda secara langsung tanpa menunggu
font web didownload.
Namun, kelemahan swap adalah menyebabkan pergeseran konten yang terlihat jika
font web pengganti dan font web yang ditentukan dalam CSS Anda sangat bervariasi dalam
hal tinggi baris, kerning, dan metrik font lainnya.
Hal ini biasanya tidak menyebabkan Cumulative Layout Shift (CLS) yang lebih buruk selama
block (karena block memerlukan penataan halaman dengan asumsi font pengganti,
meskipun teks itu sendiri tidak ditampilkan, sehingga keduanya tunduk pada pergeseran
konten), hal ini dapat lebih mengganggu secara visual.
fallback
Nilai fallback untuk font-display merupakan kompromi antara
block dan swap. Berbeda dengan swap, browser memblokir rendering font, tetapi
menukar teks pengganti hanya dalam 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 typeface yang langsung digunakan pada rendering awal halaman. Namun, jika jaringan lambat, teks pengganti akan terlihat terlebih dahulu setelah periode pemblokiran berakhir, lalu diganti 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 membutuhkan waktu lebih lama untuk dimuat, font tersebut tidak digunakan di halaman, dan browser menggunakan font pengganti 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 visual yang terlihat
dengan swap, tetapi beberapa pengguna tidak melihat font web jika font tersebut terlambat dimuat di
navigasi halaman awal.
Demo font
Menguji pengetahuan Anda
Kapan browser mendownload resource font web (dengan asumsi resource tersebut tidak diambil dengan direktif preload)?
Apa satu-satunya (dan format paling efisien) yang diperlukan untuk menayangkan font web ke semua browser modern?
Berikutnya: Memisahkan kode JavaScript
Dengan pemahaman tentang pengoptimalan font, Anda kini dapat melanjutkan ke modul berikutnya, yang membahas topik yang berpotensi besar untuk meningkatkan kecepatan pemuatan halaman awal bagi pengguna Anda, yaitu menunda pemuatan JavaScript melalui pemisahan kode. Dengan begitu, Anda dapat menjaga persaingan bandwidth dan CPU serendah mungkin selama fase startup halaman, yaitu periode waktu saat pengguna cenderung berinteraksi dengan halaman tersebut.