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-tama, ukur performa situs sebelum menambahkan pengoptimalan apa pun.

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu 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 sudah dicentang dalam daftar Kategori.
  5. Klik tombol Buat laporan.

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

Webfont terdapat dalam rantai permintaan penting.

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:

Webfont dimuat dengan lambat.

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.

Pacifico-Bold webfont dipramuat dan dihapus dari rantai permintaan kritis

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

Webfont Pacifico-Bold telah dipramuat

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.