Codelab ini menunjukkan cara memuat font web secara otomatis 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. Kemudian tekan
Layar Penuh
. - Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Laporan Lighthouse yang dihasilkan akan menampilkan urutan pengambilan resource di bagian Latensi jalur kritis maksimum.
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, webfont dimuat secara lambat, yang berarti webfont 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 memuat font web yang segera diperlukan. Tambahkan elemen Link untuk aplikasi ini di bagian awal 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 dalam memprioritaskan antrean resource.
Atribut crossorigin menunjukkan apakah resource harus diambil dengan permintaan CORS karena font mungkin berasal dari domain lain. 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 ini menata gaya teks yang berada di bawah lipatan.
Muat ulang aplikasi dan jalankan lighthouse lagi. Periksa bagian Latensi jalur kritis maksimum.
Perhatikan cara Pacifico-Bold.woff2 dihapus dari rantai permintaan penting. Data ini diambil sebelumnya di aplikasi.
Dengan pramuat, browser mengetahui bahwa file ini harus 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.