Cara Memperbaiki Layout Shift Akibat Font

Apa yang sebenarnya terjadi?

Ada dua efek yang umum terjadi. Dengan flash of invisible text (FOIT), teks tetap kosong sampai font-nya tiba. Dengan flash of unstyled text (FOUT), fallback muncul lebih dulu lalu diganti. Jika kedua font punya ukuran yang berbeda, baris teks akan terbungkus ulang dan konten ikut bergeser. Pergeseran ini dihitung dalam Cumulative Layout Shift (CLS), salah satu Core Web Vitals dari Google.

Pilih nilai font-display

• swap langsung menampilkan teks dan menggantinya saat font sudah siap. Ini pilihan yang paling umum, tetapi bisa menimbulkan pergeseran.
• optional hanya memakai font kamu jika font itu tiba dengan sangat cepat. Cara ini menghindari pergantian yang terlambat, dan cocok untuk teks isi di situs yang mengutamakan kecepatan.
• fallback berada di antara keduanya, dengan jeda singkat dan batas waktu terbatas untuk melakukan pergantian.

Samakan fallback font kamu

Ini adalah perbaikan yang paling efektif. Kamu membuat fallback yang memakai system font, lalu mengatur ukurannya agar memakan ruang kurang lebih sama dengan webfont kamu. Saat pergantian terjadi, hampir tidak ada yang bergeser:

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

Kamu tidak perlu menghitung angka-angka ini sendiri. Di Webfont Generator, buka CSS, pilih Matched fallback font, lalu tool akan mengukur font kamu dan menulis aturannya.

Hal lain yang membantu

• Preload font utama kamu, agar font tiba sebelum tampilan pertama bila memungkinkan.
• Jaga ukuran file font tetap kecil, seperti yang dibahas dalam panduan kami tentang webfont yang lebih cepat.
• Hindari sumber yang bercampur. Menyajikan font dari domain kamu sendiri menghilangkan satu koneksi tambahan.

Periksa skor kamu

Jalankan Page Speed Test dan lihat nilai CLS. Skor yang baik adalah 0,1 atau lebih rendah. Untuk melihat pergantian font dengan mata kamu sendiri, batasi kecepatan koneksi di developer tools browser lalu muat ulang halaman.