Pramuat font web untuk meningkatkan kecepatan pemuatan

Garima Mimani
Garima Mimani
GitHub

Codelab ini menunjukkan cara melakukan pramuat font web menggunakan rel="preload" untuk menghapus flash teks tanpa gaya (FOUT).

Ukur

Pertama, ukur performa situs sebelum menambahkan pengoptimalan apa pun.

  1. Untuk melihat pratinjau situs, tekan View App. Lalu tekan Fullscreen layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Lighthouse.
  4. Pastikan kotak centang Performance dipilih dalam daftar Categories.
  5. Klik tombol Generate report.

Laporan Lighthouse yang dihasilkan akan menampilkan urutan pengambilan resource di bagian Latensi jalur penting maksimum.

Font web ada dalam rantai permintaan penting.

Dalam audit di atas, font web adalah bagian dari rantai permintaan penting dan diambil terakhir. Rantai permintaan penting mewakili urutan resource yang diprioritaskan dan diambil oleh browser. Dalam aplikasi ini, font web (Pacfico dan Pacifico-Bold) ditentukan menggunakan aturan @font-face dan merupakan resource terakhir yang diambil oleh browser dalam rantai permintaan penting. Biasanya, font web dimuat lambat, yang berarti font tersebut tidak dimuat hingga resource penting didownload (CSS, JS).

Berikut adalah urutan resource yang diambil dalam aplikasi:

Font web dimuat dengan lambat.

Melakukan pramuat font web

Untuk menghindari FOUT, Anda dapat melakukan pramuat font web yang diperlukan segera. Tambahkan elemen Link untuk aplikasi ini di bagian head dokumen:

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

Atribut as="font" type="font/woff2" memberi tahu browser untuk mendownload resource ini sebagai font dan membantu memprioritaskan antrean resource.

Atribut crossorigin menunjukkan apakah resource harus diambil dengan permintaan CORS karena font mungkin berasal dari domain yang berbeda. Tanpa atribut ini, font yang dipramuat akan diabaikan oleh browser.

Karena Pacifico-Bold digunakan di header halaman, kami menambahkan tag pramuat untuk mengambilnya lebih cepat. Font Pacifico.woff2 tidak perlu dipramuat karena font ini menata gaya teks yang berada di paruh bawah.

Muat ulang aplikasi dan jalankan Lighthouse lagi. Periksa bagian Maximum critical path latency.

Font web Pacifico-Bold dipramuat dan dihapus dari rantai permintaan penting

Perhatikan bagaimana Pacifico-Bold.woff2 dihapus dari rantai permintaan penting. Konfigurasi ini diambil lebih awal dalam aplikasi.

Font web Pacifico-Bold dipramuat

Dengan pramuat, browser tahu bahwa browser perlu mendownload file ini lebih awal. Perlu diperhatikan bahwa jika tidak digunakan dengan benar, pramuat dapat membahayakan performa dengan membuat permintaan yang tidak perlu untuk resource yang tidak digunakan.