Mengoptimalkan font web

Dalam modul sebelumnya, Anda telah mempelajari cara mengoptimalkan HTML, CSS, JavaScript, dan sumber daya media. Dalam modul ini, temukan beberapa metode untuk mengoptimalkan font web.

Font web dapat memengaruhi performa halaman pada waktu muat dan waktu rendering. File font besar memerlukan waktu lama untuk didownload dan berdampak negatif pada First Contentful Paint (FCP), sementara 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 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 deklarasi @font-face:

@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 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 lembar gaya eksternal, browser hanya dapat mulai mendownloadnya setelah mendownload lembar gaya. Hal ini membuat font web menjadi resource yang ditemukan terlambat, tetapi ada cara untuk membantu browser menemukan font web lebih awal.

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 halaman dimuat, karena browser tidak perlu menunggu download 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. Tindakan 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 dari biasanya:

<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 lintas origin. 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.

Subkumpulan adalah kumpulan glif yang dikurangi yang disertakan dalam file font web asli. Misalnya, alih-alih menayangkan semua glif, halaman Anda mungkin menayangkan subset tertentu untuk karakter Latin. Bergantung pada subset yang diperlukan, menghapus glif dapat mengurangi ukuran file font secara signifikan.

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 stylesheet 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 display di situs yang hanya memerlukan sejumlah kecil karakter 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 mengurangi jumlah data font web yang diperlukan untuk satu typeface di situs Anda secara signifikan, jika subsetting ekstrem tersebut dapat berguna di situs Anda.

Rendering font

Setelah browser menemukan dan mendownload font web, font tersebut dapat dirender. 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. Perilaku browser yang berbeda 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 dengan segera tanpa menunggu font web didownload.

Namun, kelemahan 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 Anda jika Anda tidak berhati-hati 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 menukar teks pengganti hanya dalam jangka waktu yang sangat singkat. Namun, tidak seperti block, periode pemblokiran sangat singkat.

Menggunakan 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 typeface 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 tata letak yang terlihat dengan swap, tetapi beberapa pengguna tidak melihat font web jika font tersebut terlambat dimuat pada navigasi halaman awal.

Demo font

Menguji pengetahuan Anda

Kapan browser mendownload resource font web (dengan asumsi resource tersebut tidak diambil dengan direktif preload)?

Saat CSSOM halaman dibuat dan ditentukan bahwa font web diperlukan untuk tata letak saat ini.
Segera setelah referensi ke elemen tersebut ditemukan dalam lembar gaya.

Apa satu-satunya (dan format paling efisien) yang diperlukan untuk menayangkan font web ke semua browser modern?

TTF
WOFF2
EOT
WOFF

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.