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.
- 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 Performa dicentang pada daftar Kategori.
- Klik tombol Buat laporan.
Laporan Lighthouse yang dihasilkan akan menunjukkan kepada Anda urutan pengambilan resource pada bagian Latensi jalur penting 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 lambat, yang berarti font tersebut tidak dimuat hingga resource penting didownload (CSS, JS).
Berikut adalah urutan resource yang diambil dalam aplikasi:
Melakukan pramuat font Web
Untuk menghindari FOUT, Anda dapat melakukan pramuat font web yang diperlukan dengan 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 menentukan prioritas 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 font tersebut akan menata gaya teks yang berada di paruh bawah.
Muat ulang aplikasi dan jalankan kembali mercusuar. Periksa bagian Latensi jalur penting maksimum.
Perhatikan cara Pacifico-Bold.woff2 dihapus dari rantai permintaan penting. Data ini diambil lebih awal dalam aplikasi.
Dengan pramuat, browser tahu bahwa file ini perlu didownload lebih awal. Penting untuk diperhatikan bahwa jika tidak digunakan dengan benar, pramuat dapat mengganggu performa dengan membuat permintaan yang tidak perlu untuk resource yang tidak digunakan.