Pramuat font web untuk meningkatkan kecepatan pemuatan

Garima Mimani
Garima Mimani

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 Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Lighthouse.
  4. Pastikan kotak centang Performa dicentang dalam daftar Kategori.
  5. Klik tombol Buat laporan.

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

Webfont 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, webfont dimuat secara lambat, yang berarti webfont tidak dimuat hingga resource penting didownload (CSS, JS).

Berikut adalah urutan resource yang diambil dalam aplikasi:

Webfont dimuat secara lambat.

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.

Webfont Pacifico-Bold dimuat sebelumnya dan dihapus dari rantai permintaan penting

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

Webfont Pacifico-Bold dipramuat

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.