Font biasanya berupa file besar dengan waktu pemuatan yang lambat. Beberapa browser menyembunyikan teks hingga font dimuat, sehingga menyebabkan kilasan teks yang tidak terlihat (FOIT).
Cara audit tampilan font Lighthouse gagal
Lighthouse menandai URL font apa pun yang mungkin memberikan teks yang tidak terlihat:
![Screenshot Lighthouse: Pastikan teks tetap terlihat selama audit pemuatan font web](https://developer.chrome.com/static/docs/lighthouse/performance/font-display/image/a-screenshot-the-lightho-15d52429afc09.png?authuser=19&hl=id)
Cara agar teks yang tidak terlihat tidak ditampilkan
font-display
API menunjukkan
cara font ditampilkan saat digunakan dalam gaya font-face
. Nilai
font-display
berikut akan memberi tahu browser untuk menggunakan font sistem jika font kustom belum siap:
swap
optional
fallback
Contoh CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Contoh Google Fonts
Tambahkan parameter &display=swap
/&display=optional
/&display=fallback
di akhir URL Google Fonts Anda:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Cara menghindari pergeseran tata letak yang disebabkan oleh font yang ditangguhkan
Menampilkan font sistem untuk sementara akan menggantikan FOIT dengan kilatan teks tanpa gaya (FOUT). Tindakan ini akan meningkatkan FCP&LCP dengan merender konten lebih cepat, tetapi FOIT dan FOUT akan memiliki dampak yang sama pada CLS saat font kustom menggantikan font sistem sementara.
Dampak CLS pemuatan font dapat dimitigasi menggunakan pramuat bersama dengan font-display: optional
.
Namun, penggunaan pramuat yang berlebihan dapat berdampak negatif pada metrik beban. Sebaiknya lakukan pengujian A/B untuk memastikan bahwa pramuat font tidak menyebabkan
regresi performa apa pun.
Panduan khusus stack
Drupal
Tentukan @font-display
saat menentukan font kustom di tema Anda.
Magento
Tetapkan @font-display
saat menentukan font kustom.
Referensi
- Kode sumber untuk Memastikan teks tetap terlihat selama audit pemuatan font web
- Menghindari teks yang tidak terlihat selama pemuatan
- Mengontrol performa font dengan tampilan font
- Pramuat font web untuk meningkatkan kecepatan pemuatan (codelab)
- Cegah pergeseran tata letak dan flash teks yang tidak terlihat (FOIT) dengan melakukan pramuat font opsional