Mengoptimalkan font web

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

Font web dapat memengaruhi performa halaman pada waktu pemuatan dan waktu rendering. File font besar memerlukan waktu beberapa saat untuk didownload dan berdampak negatif pada Pertama Contentful Paint (FCP), sedangkan nilai font-display yang salah dapat menyebabkan pergeseran tata letak yang tidak diinginkan yang berkontribusi pada Pergeseran Tata Letak Kumulatif halaman (CLS).

Sebelum mengoptimalkan font web dapat dibahas, mengetahui cara font web ditemukan oleh browser dapat membantu, sehingga Anda dapat memahami bagaimana CSS mencegah pengambilan {i>font<i} web yang tidak perlu dalam situasi tertentu.

Discovery

Font web halaman ditentukan dalam style sheet menggunakan @font-face pernyataan:

@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 di mana sumber daya {i>font<i} web masing-masing. Untuk menghemat bandwidth, browser tidak mengunduh font web hingga ditentukan bahwa tata letak halaman saat ini membutuhkannya.

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 ditentukan dalam style sheet eksternal, browser hanya dapat mulai mengunduhnya setelah mengunduh lembar gaya. Hal ini membuat {i>font<i} web menjadi sumber daya yang terlambat ditemukan—tetapi ada cara untuk membantu {i>browser<i} Anda menemukan {i>font web <i}lebih cepat.

Anda dapat memulai permintaan awal untuk resource font web menggunakan preload direktif. Perintah preload membuat font web dapat ditemukan lebih awal selama pemuatan halaman, dan browser akan segera mulai mendownloadnya tanpa menunggu untuk menyelesaikan download dan penguraian. Perintah preload tidak menunggu hingga {i>font<i} dibutuhkan pada laman.

<!-- 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 menyisipkan CSS yang memblokir render—termasuk deklarasi @font-face—di <head> HTML Anda menggunakan elemen <style>. Dalam hal ini, {i>browser<i} menemukan font web lebih awal di halaman dimuat, karena tidak perlu menunggu {i>style sheet<i} untuk diunduh.

Menyisipkan deklarasi @font-face memiliki keunggulan dibandingkan menggunakan preload petunjuk, karena browser hanya mengunduh font yang diperlukan untuk kami. Tindakan ini akan menghilangkan risiko mendownload font yang tidak digunakan.

Download

Setelah menemukan font web dan memastikan font tersebut dibutuhkan oleh halaman web, browser dapat mengunduhnya. Jumlah {i>font<i} web, pengkodeannya, dan ukuran filenya dapat secara signifikan mempengaruhi seberapa cepat {i>font<i} web yang diunduh dan dirender oleh browser.

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, web Anda halaman harus membuka koneksi ke domain penyedia sebelum dapat dimulai mengunduh {i>font<i} web yang dibutuhkan. Hal ini dapat menunda penemuan dan mengunduh {i>font<i} web.

Overhead ini dapat dikurangi menggunakan petunjuk resource preconnect. Dengan menggunakan preconnect, Anda dapat memberi tahu browser untuk membuka koneksi ke lintas origin lebih cepat dari yang biasanya dilakukan browser:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Cuplikan HTML sebelumnya mengisyaratkan browser untuk membuat koneksi ke fonts.googleapis.com dan koneksi CORS ke fonts.gstatic.com. Agak besar penyedia font—seperti Google Fonts—menyajikan CSS dan resource font dari origin.

Anda dapat menghilangkan kebutuhan akan koneksi pihak ketiga dengan menghosting sendiri font web. Dalam kebanyakan kasus, hosting font web yang Anda hosting lebih cepat daripada mendownloadnya dari lintas origin. Jika Anda berencana untuk menghosting font web secara mandiri, pastikan situs Anda menggunakan Jaringan Penayangan Konten (CDN), HTTP/2, atau HTTP/3, dan menetapkan header {i>caching<i} yang benar untuk {i>font<i} web yang Anda butuhkan untuk situs web Anda.

Gunakan WOFF2—dan WOFF2 saja

WOFF2 menikmati dukungan browser yang luas dan kompresi terbaik—hingga 30% lebih baik daripada WOFF. Ukuran file yang lebih kecil mempercepat waktu download. WOFF2 format ini sering kali satu-satunya yang diperlukan untuk kompatibilitas penuh di seluruh modern browser.

Subset font web Anda

Font web biasanya menyertakan berbagai glyph yang berbeda, yang diperlukan untuk merepresentasikan berbagai macam karakter yang digunakan dalam berbagai bahasa. Jika menyajikan konten hanya dalam satu bahasa—atau menggunakan satu alfabet—maka Anda dapat kurangi ukuran font web Anda melalui subsetelan. Hal ini sering dilakukan oleh yang menentukan angka—atau rentang—titik kode unicode.

Subset adalah penurunan set glyph yang disertakan dalam web asli file font. Misalnya, alih-alih menampilkan semua glyph, laman Anda mungkin menyajikan {i>subset<i} tertentu untuk karakter Latin. Bergantung pada {i>subset<i} yang diperlukan, menghapus glyph dapat memperkecil ukuran file {i>font<i} secara signifikan.

Beberapa penyedia font web—seperti Google Fonts—menawarkan subset secara otomatis melalui penggunaan parameter {i>string<i} kueri. Misalnya, URL https://fonts.googleapis.com/css?family=Roboto&subset=latin menayangkan {i>style sheet<i} dengan {i>font<i} web Roboto yang hanya menggunakan alfabet Latin.

Jika Anda telah memutuskan untuk menghosting sendiri font web Anda, langkah selanjutnya adalah membuat dan menghosting subset tersebut sendiri menggunakan alat seperti glyphanger atau subfont.

Namun, jika tidak memiliki kapasitas untuk menghosting sendiri font web Anda, Anda dapat subset font web yang disediakan oleh Google Fonts dengan menentukan text tambahan parameter string kueri yang hanya berisi titik kode unicode yang diperlukan untuk {i>website<i} 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 subkumpulan 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 {i>subset <i}ekstrim seperti itu dapat berguna di situs web Anda.

Rendering font

Setelah {i>browser<i} menemukan dan mengunduh {i>font<i} web, {i>font<i} ini dapat dirender. Secara default, browser memblokir rendering teks apa pun yang menggunakan {i>font<i} web hingga selesai diunduh. Anda dapat menyesuaikan rendering teks browser aktif, dan mengonfigurasi teks yang akan ditampilkan—atau tidak ditampilkan—hingga web font telah 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. Berbeda browser berperilaku sedikit berbeda. Pemblokiran Chromium dan Firefox untuk rendering untuk hingga maksimum 3 detik sebelum menggunakan penggantian. Pemblokiran Safari tanpa batas waktu hingga {i>font<i} web dimuat.

swap

swap adalah nilai font-display yang paling banyak digunakan. swap tidak diblokir rendering, dan menampilkan teks langsung di penggantian sebelum menukar font web yang ditentukan. Hal ini memungkinkan Anda langsung menampilkan konten tanpa menunggu untuk {i>font<i} web yang akan diunduh.

Namun, kelemahan dari swap adalah menyebabkan pergeseran tata letak jika penggantiannya {i>font<i} web dan {i>font<i} web yang ditentukan dalam CSS Anda sangat bervariasi dalam hal baris tinggi, kerning, dan metrik {i>font<i} lainnya. Hal ini dapat memengaruhi CLS situs Anda jika Anda tidak berhati-hati saat menggunakan petunjuk preload untuk memuat resource font web segera mungkin, atau jika Anda tidak mempertimbangkan nilai font-display lainnya.

fallback

Nilai fallback untuk font-display merupakan kompromi antara block dan swap. Tidak seperti swap, browser memblokir rendering font, tetapi menukar teks pengganti hanya untuk jangka waktu yang sangat singkat. Tidak seperti block, tetapi, periode pemblokirannya sangat singkat.

Penggunaan nilai fallback dapat berfungsi dengan baik di jaringan yang cepat, di mana font web dengan cepat, {i>font<i} web adalah jenis huruf yang digunakan segera pada dan proses rendering awal. Namun, jika jaringan lambat, teks penggantian akan terlihat pertama setelah periode pemblokiran berlalu, lalu menukarnya saat font web tiba.

optional

optional adalah nilai font-display yang paling ketat, dan hanya menggunakan web sumber daya font jika diunduh dalam waktu 100 milidetik. Jika font web menggunakan lebih lama dari waktu yang dibutuhkan untuk memuat, link tidak digunakan di halaman, dan browser menggunakan jenis huruf pengganti untuk navigasi saat ini ketika {i>font<i} web diunduh di latar belakang dan ditempatkan di {i>cache browser<i}.

Hasilnya, navigasi halaman berikutnya dapat langsung menggunakan {i>font<i} web, karena aplikasi sudah didownload. font-display: optional menghindari pergeseran tata letak yang terlihat dengan swap, namun beberapa pengguna tidak melihat font web jika font tersebut terlambat tiba navigasi halaman awal.

Demo font

Menguji pengetahuan Anda

Kapan browser mengunduh sumber daya font web (dengan asumsi bahwa font tidak diambil dengan perintah preload)?

Ketika GCLID laman telah dibangun dan ditetapkan, {i>font<i} web akan yang diperlukan untuk tata letak saat ini.
Segera setelah referensi ke catatan tersebut ditemukan di lembar gaya.

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

TTF
EOT
WOFF2
WOFF

Berikutnya: JavaScript pemisahan kode

Dengan pemahaman tentang pengoptimalan {i>font<i}, Anda kini dapat memindahkan modul berikutnya, yang mencakup topik yang berpotensi tinggi untuk ditingkatkan kecepatan pemuatan halaman awal bagi pengguna, dan yaitu untuk menunda pemuatan menggunakan JavaScript melalui pemisahan kode. Dengan melakukannya, Anda dapat mempertahankan {i>bandwidth<i} dan CPU pertentangan yang serendah mungkin selama fase startup halaman, yaitu periode waktu di mana pengguna sangat mungkin untuk berinteraksi dengannya.