Codelab ini menunjukkan cara melakukan pramuat font web menggunakan rel="preload" untuk menghapus
flash teks tanpa gaya (FOUT).
Ukur
Pertama-tama, ukur performa situs sebelum menambahkan pengoptimalan apa pun.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
. - Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Laporan Lighthouse yang dibuat akan menampilkan urutan pengambilan resource di bagian Latensi jalur kritis maksimum.
Dalam audit di atas, font web merupakan 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 dengan lambat yang berarti bahwa font tersebut tidak dimuat hingga sumber daya penting didownload (CSS, JS).
Berikut adalah urutan resource yang diambil dalam aplikasi:
Pramuat font Web
Untuk menghindari FOUT, Anda dapat melakukan pramuat font web yang diperlukan dengan segera. Tambahkan elemen Link untuk aplikasi ini di bagian atas 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 dimuat sebelumnya akan diabaikan oleh browser.
Karena Pacifico-Bold digunakan di header halaman, kami menambahkan tag pramuat untuk mengambilnya lebih cepat. Anda tidak perlu melakukan pramuat font Pacifico.woff2 karena akan menata gaya teks yang berada di bawah lipatan.
Muat ulang aplikasi dan jalankan mercusuar lagi. Centang bagian Latensi jalur kritis maksimum.
Perhatikan cara Pacifico-Bold.woff2 dihapus dari rantai permintaan penting. ID ini diambil lebih awal di aplikasi.
Dengan pramuat, browser akan tahu bahwa file ini perlu didownload lebih awal. Penting untuk diperhatikan bahwa jika tidak digunakan dengan benar, pramuat dapat membahayakan performa dengan membuat permintaan yang tidak perlu untuk resource yang tidak digunakan.