Cegah pergeseran tata letak dan kedipan teks tak terlihat (FOIT) dengan melakukan pramuat font opsional

Mulai Chrome 83, link rel="preorder" dan font-display: opsional dapat digabungkan untuk menghapus jank tata letak sepenuhnya

Houssein Djirdeh

Dengan mengoptimalkan siklus rendering, Chrome 83 menghilangkan pergeseran tata letak saat melakukan pramuat font opsional. Menggabungkan <link rel="preload"> dengan font-display: optional adalah cara yang paling efektif untuk menjamin tidak ada jank tata letak saat merender font kustom.

Kompatibilitas browser

Periksa data MDN untuk mendapatkan informasi dukungan lintas browser yang terbaru:

Rendering font

Pergeseran tata letak, atau tata letak ulang, terjadi saat resource di halaman web berubah secara dinamis, sehingga menyebabkan "pergeseran" konten. Mengambil dan merender font web dapat langsung menyebabkan pergeseran tata letak dengan salah satu dari dua cara berikut:

  • Font pengganti ditukar dengan font baru ("flash teks tanpa gaya")
  • Teks "tak terlihat" ditampilkan hingga font baru dirender ke halaman ("flash teks yang tidak terlihat")

Properti font-display CSS menyediakan cara untuk mengubah perilaku rendering font kustom melalui berbagai nilai yang didukung (auto, block, swap, fallback, dan optional). Memilih nilai yang akan digunakan bergantung pada perilaku pilihan untuk font yang dimuat secara asinkron. Namun, setiap nilai yang didukung ini dapat memicu tata letak ulang dengan salah satu dari dua cara yang tercantum di atas, sampai sekarang.

Font opsional

Properti font-display menggunakan linimasa yang terdiri dari tiga periode untuk menangani font yang perlu didownload sebelum dapat dirender:

  • Block: Merender teks yang "tidak terlihat", tetapi beralih ke font web segera setelah selesai dimuat.
  • Tukar: Merender teks menggunakan font sistem penggantian, tetapi beralih ke font web segera setelah selesai dimuat.
  • Gagal: Merender teks menggunakan font sistem penggantian.

Sebelumnya, font yang ditetapkan dengan font-display: optional memiliki periode pemblokiran 100 md dan tidak ada periode pertukaran. Artinya, teks "tidak terlihat" ditampilkan secara singkat sebelum beralih ke font pengganti. Jika font tidak didownload dalam waktu 100 md, font penggantian akan digunakan dan tidak ada pertukaran yang terjadi.

Diagram yang menunjukkan perilaku font opsional sebelumnya saat font gagal dimuat
Perilaku font-display: optional sebelumnya di Chrome saat font didownload setelah periode pemblokiran 100 md

Namun, jika font didownload sebelum periode pemblokiran 100 md selesai, font kustom akan dirender dan digunakan di halaman.

Diagram yang menunjukkan perilaku font opsional sebelumnya saat font dimuat pada waktunya
Perilaku font-display: optional sebelumnya di Chrome saat font didownload sebelum periode pemblokiran 100 md

Chrome akan merender ulang halaman dua kali dalam kedua kasus, terlepas dari apakah font penggantian digunakan atau apakah font kustom selesai dimuat tepat waktu. Hal ini menyebabkan sedikit kedipan teks yang tidak terlihat dan, jika font baru dirender, jank tata letak yang memindahkan sebagian konten halaman. Hal ini terjadi meskipun font disimpan di cache disk browser dan dapat dimuat dengan baik sebelum periode pemblokiran selesai.

Pengoptimalan telah ditempatkan di Chrome 83 untuk sepenuhnya menghapus siklus render pertama untuk font opsional yang dimuat sebelumnya dengan <link rel="preload'>. Sebagai gantinya, rendering akan diblokir hingga font kustom selesai dimuat atau jangka waktu tertentu telah berlalu. Periode waktu tunggu ini saat ini ditetapkan ke 100 md, tetapi mungkin akan berubah dalam waktu dekat untuk mengoptimalkan performa.

Diagram yang menunjukkan perilaku font opsional baru yang dimuat sebelumnya saat font gagal dimuat
Perilaku font-display: optional baru di Chrome saat font dipramuat dan font didownload setelah periode pemblokiran 100 md (tanpa flash teks yang tidak terlihat)
Diagram yang menunjukkan perilaku font opsional baru yang dimuat sebelumnya saat font dimuat tepat waktu
Perilaku font-display: optional baru di Chrome saat font dipramuat dan font didownload sebelum periode pemblokiran 100 md (tanpa flash teks yang tidak terlihat)

Melakukan pramuat font opsional di Chrome akan menghilangkan kemungkinan terjadinya jank pada tata letak dan flash teks tanpa gaya. Hal ini cocok dengan perilaku yang diperlukan seperti yang ditentukan dalam CSS Fonts Module Level 4, yang mana font opsional tidak boleh menyebabkan tata letak ulang dan agen pengguna dapat menunda rendering selama periode waktu yang sesuai.

Meskipun tidak perlu melakukan pramuat font opsional, hal ini sangat meningkatkan peluang untuk dimuat sebelum siklus render pertama, terutama jika belum disimpan dalam cache browser.

Kesimpulan

Tim Chrome ingin mengetahui pengalaman Anda melakukan pramuat font opsional dengan pengoptimalan baru ini. Ajukan masalah jika Anda mengalami masalah atau ingin mengajukan saran fitur apa pun.