Halaman ini diterjemahkan oleh Cloud Translation API.

Mengoptimalkan pemuatan dan rendering WebFont

Ilya Grigorik

WebFont "lengkap" yang mencakup semua varian gaya, yang mungkin tidak Anda perlukan, plus semua glyph, yang mungkin tidak akan terpakai, dapat dengan mudah menghasilkan download multi-megabyte. Dalam postingan ini, Anda akan mengetahui cara mengoptimalkan pemuatan WebFonts sehingga pengunjung hanya mendownload yang akan mereka gunakan.

Untuk mengatasi masalah file besar yang berisi semua varian, aturan CSS @font-face dirancang secara khusus agar Anda dapat membagi jenis font menjadi kumpulan resource. Misalnya, subkumpulan unicode, dan varian gaya yang berbeda.

Mengingat deklarasi ini, browser menghitung subset yang diperlukan dan varian serta mendownload set minimum yang diperlukan untuk merender teks, yang sangat nyaman. Namun, jika Anda tidak berhati-hati, hal itu dapat pula menciptakan bottleneck performa dalam jalur rendering penting dan menunda rendering teks.

Perilaku default

Pemuatan font yang lambat membawa implikasi tersembunyi penting yang dapat menunda rendering teks. Browser harus membuat hierarki render, yang bergantung pada hierarki DOM dan CSSOM, sebelum mengetahui resource font yang diperlukan untuk merender teks. Akibatnya, permintaan font tertunda setelah resource penting lain, dan browser dapat diblokir dari merender teks sampai resource diambil.

Browser meminta dokumen HTML.
Browser mulai mengurai respons HTML dan mengonstruksikan DOM.
Browser menemukan CSS, JS, dan resource lainnya serta mengirimkan permintaan.
Browser mengonstruksikan CSSOM setelah semua konten CSS diterima dan menggabungkannya dengan pohon DOM untuk membuat pohon render.
- Permintaan font dikirimkan setelah hierarki render menunjukkan varian font mana yang diperlukan untuk merender teks yang ditentukan pada halaman.
Browser melakukan tata letak dan menggambar konten ke layar.
- Jika font belum tersedia, browser mungkin tidak merender piksel teks apa pun.
- Setelah font tersedia, browser akan menggambar piksel teks.

"Persaingan" antara gambar pertama konten halaman, yang dapat dilakukan segera setelah pohon render dibuat, dan permintaan untuk resource font adalah yang menyebabkan "masalah teks kosong" saat browser mungkin merender tata letak halaman, tetapi menghilangkan teks apa pun.

Dengan memuat WebFonts secara otomatis dan menggunakan font-display untuk mengontrol perilaku browser dengan font yang tidak tersedia, Anda dapat mencegah halaman kosong dan pergeseran tata letak karena pemuatan font.

Pramuat resource WebFont

Jika ada kemungkinan besar bahwa halaman Anda akan memerlukan WebFont tertentu yang dihosting di URL yang Anda ketahui sebelumnya, Anda dapat memanfaatkan prioritasisasi resource. Penggunaan <link rel="preload"> akan memicu permintaan untuk WebFont di awal jalur rendering penting, tanpa harus menunggu CSSOM dibuat.

Menyesuaikan penundaan rendering teks

Meskipun pramuat meningkatkan kemungkinan WebFont tersedia saat konten halaman dirender, pramuat tidak memberikan jaminan. Anda masih perlu mempertimbangkan perilaku browser saat merender teks yang menggunakan font-family yang belum tersedia.

Dalam postingan Menghindari teks yang tidak terlihat selama pemuatan font, Anda dapat melihat bahwa perilaku browser default tidak konsisten. Namun, Anda dapat memberi tahu browser modern bagaimana Anda ingin browser tersebut berperilaku dengan menggunakan font-display.

Dukungan Browser

Sumber

Serupa dengan perilaku waktu tunggu font yang ada yang diterapkan beberapa browser, font-display membagi masa pakai download font menjadi tiga periode utama:

Periode pertama adalah periode pemblokiran font. Selama periode ini, jika bentuk font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan bentuk font pengganti yang tidak terlihat. Jika bentuk font berhasil dimuat selama periode pemblokiran, bentuk font akan digunakan secara normal.
Periode pertukaran font terjadi segera setelah periode pemblokiran font. Selama periode ini, jika bentuk font tidak dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan bentuk font pengganti. Jika bentuk font berhasil dimuat selama periode penukaran, bentuk font akan digunakan secara normal.
Periode kegagalan font terjadi segera setelah periode pertukaran font. Jika bentuk font belum dimuat saat periode ini dimulai, maka ditandai sebagai gagal memuat, menyebabkan penggantian font normal. Jika tidak, bentuk font akan digunakan secara normal.

Memahami periode ini berarti Anda dapat menggunakan font-display untuk memutuskan cara font Anda dirender, bergantung pada apakah atau kapan font didownload.

Untuk menggunakan properti font-display, tambahkan ke aturan @font-face Anda:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

font-display saat ini mendukung rentang nilai berikut:

auto
block
swap
fallback
optional

Untuk informasi selengkapnya tentang pramuat font, dan properti font-display, lihat postingan berikut:

Font Loading API

Jika digunakan bersama, <link rel="preload"> dan CSS font-display memberi Anda kontrol penuh atas pemuatan dan rendering font, tanpa menambahkan banyak overhead. Namun, jika Anda memerlukan penyesuaian tambahan, dan bersedia mengeluarkan biaya tambahan seperti yang dijelaskan di atas dengan menjalankan JavaScript, ada opsi lain.

Font Loading API menyediakan antarmuka skrip untuk menentukan dan memanipulasi wajah font CSS, melacak progres download, dan mengganti perilaku lazyload default. Misalnya, jika Anda yakin bahwa varian font tertentu diperlukan, Anda dapat mendefinisikannya dan memberi tahu browser untuk memulai pengambilan resource font segera:

Dukungan Browser

Sumber

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

Selanjutnya, karena Anda dapat memeriksa status font (melalui metode check()) dan melacak progres downloadnya, Anda juga dapat menentukan strategi kustom untuk merender teks di halaman:

Anda dapat menahan semua rendering teks hingga font tersedia.
Anda dapat menerapkan waktu tunggu khusus untuk setiap font.
Anda dapat menggunakan font pengganti untuk membuka blokir rendering dan memasukkan gaya baru yang menggunakan font yang diinginkan setelah font tersedia.

Yang terbaik dari semuanya, Anda juga dapat mencampur dan mencocokkan strategi di atas untuk berbagai konten pada halaman. Misalnya, Anda dapat menunda rendering teks pada beberapa bagian hingga font tersedia, menggunakan font pengganti, lalu merender ulang setelah download font selesai.

Caching yang tepat adalah suatu keharusan

Resource font biasanya merupakan resource statis yang tidak sering diupdate. Akibatnya, resource ini biasanya cocok untuk yang masa kedaluwarsa umur yang panjang— pastikan Anda menentukan header ETag bersyarat, dan kebijakan Cache-Control yang optimal untuk semua resource font.

Jika aplikasi web Anda menggunakan pekerja layanan, menayangkan resource font dengan strategi cache-first sesuai untuk sebagian besar kasus penggunaan.

Anda tidak boleh menyimpan font menggunakan localStorage atau IndexedDB; setiap font memiliki masalah performanya sendiri. Cache HTTP browser menyediakan mekanisme terbaik dan paling andal untuk mengirimkan resource font ke browser.

Checklist pemuatan WebFont

Menyesuaikan pemuatan dan rendering font menggunakan <link rel="preload">, font-display, atau Font Loading API: perilaku lazyloading default dapat menyebabkan rendering teks yang tertunda. Fitur platform web ini memungkinkan Anda mengganti perilaku ini untuk font tertentu, dan menentukan strategi rendering kustom dan waktu tunggu untuk konten yang berbeda di halaman.
Tetapkan validasi ulang dan kebijakan caching yang optimal: font adalah resource statis yang jarang diperbarui. Pastikan server Anda menyediakan stempel waktu umur maksimal yang panjang dan token validasi ulang untuk mengizinkan penggunaan kembali font yang efisien di antara berbagai halaman. Jika menggunakan pekerja layanan, strategi cache-first merupakan hal yang tepat.

Pengujian otomatis untuk perilaku pemuatan WebFont dengan Lighthouse

Lighthouse dapat membantu mengotomatiskan proses untuk memastikan Anda mengikuti praktik terbaik pengoptimalan font web.

Audit berikut dapat membantu Anda memastikan bahwa halaman Anda terus mengikuti praktik terbaik pengoptimalan font web dari waktu ke waktu: