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 sepenuhnya menghilangkan jank tata letak

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 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 letak 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 berikut:

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

Properti CSS font-display 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 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 sekarang.

Font opsional

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

  • Block: 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 pemuatan font.
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 jika 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 di cache disk browser dan dapat dimuat dengan baik sebelum periode pemblokiran selesai.

Pengoptimalan telah diterapkan di Chrome 83 untuk sepenuhnya menghapus siklus render pertama untuk font opsional yang dipramuat 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 menggambarkan perilaku font opsional yang dipramuat baru saat font gagal dimuat.
Perilaku font-display: optional baru di Chrome saat font dipramuat dan font didownload setelah periode pemblokiran 100 md (tidak ada flash teks yang tidak terlihat)
Diagram yang menggambarkan perilaku font opsional yang dipramuat baru saat font dimuat tepat waktu.
Perilaku font-display: optional baru di Chrome saat font dipramuat dan font didownload sebelum periode pemblokiran 100 md (tidak ada flash teks yang tidak terlihat)

Pramuat font opsional di Chrome menghilangkan kemungkinan jank tata letak dan flash teks tanpa gaya. Hal ini sesuai dengan perilaku yang diperlukan seperti yang ditentukan dalam CSS Fonts Module Level 4, yaitu font opsional tidak boleh menyebabkan tata letak ulang dan agen pengguna dapat menunda rendering untuk jangka waktu yang sesuai.

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

Kesimpulan

Tim Chrome ingin mendengar pengalaman Anda dalam melakukan pramuat font opsional dengan pengoptimalan baru ini. Laporkan masalah jika Anda mengalami masalah atau ingin memberikan saran fitur.