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

Mulai Chrome 83, link rel="preload" dan font-display: optional dapat digabungkan untuk menghilangkan jank tata letak sepenuhnya

Houssein Djirdeh

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

Kompatibilitas browser

Lihat data MDN untuk mengetahui informasi dukungan lintas browser terbaru:

Rendering font

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

  • Font pengganti ditukar dengan font baru ("flash of unstyled text")
  • Teks "tidak terlihat" ditampilkan hingga font baru dirender ke halaman ("flash teks tidak terlihat")

Properti CSS font-display menyediakan cara untuk mengubah perilaku rendering font kustom melalui berbagai nilai yang didukung (auto, block, swap, fallback, dan optional). Pemilihan nilai yang akan digunakan bergantung pada perilaku yang diinginkan 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, hingga saat ini.

Font opsional

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

  • Blokir: Merender teks "tidak terlihat", tetapi beralih ke font web segera setelah selesai dimuat.
  • Swap: Merender teks menggunakan font sistem pengganti, tetapi beralih ke font web segera setelah selesai dimuat.
  • Gagal: Merender teks menggunakan font sistem pengganti.

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

Diagram yang menggambarkan kegagalan font 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 menggambarkan perilaku font opsional sebelumnya saat font dimuat tepat waktu.
Perilaku font-display: optional sebelumnya di Chrome saat font didownload sebelum periode pemblokiran 100 md

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

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

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

Memuat font opsional terlebih dahulu di Chrome menghilangkan kemungkinan jank tata letak dan flash teks yang tidak memiliki gaya. Hal ini sesuai dengan perilaku yang diperlukan sebagaimana ditentukan dalam CSS Fonts Module Level 4, yang menyatakan bahwa font opsional tidak boleh menyebabkan tata ulang dan agen pengguna dapat menunda rendering selama jangka waktu yang sesuai.

Meskipun tidak perlu memuat font opsional terlebih dahulu, hal ini akan sangat meningkatkan peluang font tersebut dimuat sebelum siklus render pertama, terutama jika font tersebut belum disimpan dalam cache browser.

Kesimpulan

Tim Chrome ingin mengetahui pengalaman Anda memuat font opsional terlebih dahulu dengan pengoptimalan baru ini. Laporkan masalah jika Anda mengalami masalah atau ingin memberikan saran fitur.