İsteğe bağlı yazı tiplerini önceden yükleyerek düzen kaymasını ve görünmez metnin (FOIT) yanıp sönmesini önleyin

Chrome 83'ten itibaren, düzenin tamamen bozulmasını önlemek için link rel="preload" ve font-display: optional birleştirilebilir.

Houssein Djirdeh

Not: Chrome 83'te, isteğe bağlı yazı tipleri önceden yüklendiğinde düzen kaymasını ve görünmez metin flaşını (FOIT) tamamen ortadan kaldırmak için yazı tipi yüklemeyle ilgili yeni iyileştirmeler yapıldı.

Chrome 83, oluşturma döngülerini optimize ederek isteğe bağlı yazı tipleri önceden yüklendiğinde düzen kaymasını ortadan kaldırır. Özel yazı tipleri oluşturulurken düzenin bozulmamasını sağlamanın en etkili yolu <link rel="preload"> ile font-display: optional'yi birleştirmektir.

Tarayıcı uyumluluğu

Tarayıcılar arası destekle ilgili güncel bilgiler için MDN'nin verilerine göz atın:

• <link rel="preload">
• font-display

Yazı tipi oluşturma

Düzen kayması veya yeniden düzenleme, bir web sayfasındaki kaynak dinamik olarak değiştiğinde ve içerikte "kaymaya" neden olduğunda meydana gelir. Web yazı tiplerinin getirilmesi ve oluşturulması, iki şekilde doğrudan düzen kaymalarına neden olabilir:

• Yedek yazı tipi, yeni bir yazı tipiyle değiştirilir ("biçimlendirilmemiş metin flaşı").
• Yeni bir yazı tipi sayfada oluşturulana kadar "görünmez" metin gösterilir ("görünmez metin parlaması").

CSS font-display özelliği, bir dizi farklı desteklenen değer (auto, block, swap, fallback ve optional) aracılığıyla özel yazı tiplerinin oluşturma davranışını değiştirmenin bir yolunu sunar. Hangi değerin kullanılacağını seçmek, eşzamanlı olarak yüklenen yazı tipleri için tercih edilen davranışa bağlıdır. Ancak, desteklenen bu değerlerin her biri, şimdiye kadar yukarıda listelenen iki yöntemden biriyle yeniden düzenlemeyi tetikleyebiliyordu.

Not: Cumulative Layout Shift metriği, bir web sayfasındaki düzen dengesizliğini ölçmeyi mümkün kılar.

İsteğe bağlı yazı tipleri

font-display özelliği, oluşturulmadan önce indirilmesi gereken yazı tiplerini işlemek için üç dönemlik bir zaman çizelgesi kullanır:

• Engelleme: "Görünmez" metni oluşturun ancak yükleme tamamlanır tamamlanmaz web yazı tipine geçin.
• Değiştirme: Metni yedek sistem yazı tipini kullanarak oluşturun ancak yükleme tamamlanır tamamlanmaz web yazı tipine geçin.
• Başarısız: Yedek sistem yazı tipini kullanarak metni oluşturun.

Daha önce font-display: optional ile belirtilen yazı tiplerinde 100 ms'lik bir engelleme süresi vardı ve değiştirme süresi yoktu. Bu, yedek yazı tipine geçmeden önce "görünmez" metnin çok kısa süreyle görüntülendiği anlamına gelir. Yazı tipi 100 ms içinde indirilmezse yedek yazı tipi kullanılır ve değiştirme işlemi gerçekleşmez.

Yazı tipi, 100 ms'lik engelleme süresinden font-display: optional sonra indirildiğinde Chrome'daki

Ancak yazı tipi, 100 ms'lik engelleme süresi tamamlanmadan önce indirilirse özel yazı tipi oluşturulur ve sayfada kullanılır.

Yazı tipi, 100 ms'lik engelleme süresinden font-display: optional önce indirildiğinde Chrome'daki

Chrome, her iki durumda da yedek yazı tipi kullanılıp kullanılmadığına veya özel yazı tipinin zamanında yüklenip yüklenmediğine bakılmaksızın sayfayı iki kez yeniden oluşturur. Bu durum, görünmez metinde hafif bir titremeye ve yeni bir yazı tipi oluşturulduğunda sayfa içeriğinin bir kısmını hareket ettiren düzen duraklamasına neden olur. Bu durum, yazı tipi tarayıcının disk önbelleğinde depolanmış olsa ve engelleme süresi tamamlanmadan önce iyi bir şekilde yüklenebilse bile meydana gelir.

<link rel="preload'> ile önceden yüklenen isteğe bağlı yazı tiplerinin ilk oluşturma döngüsünü tamamen kaldırmak için Chrome 83'e optimizasyonlar eklendi. Bunun yerine, özel yazı tipi yüklenene veya belirli bir süre geçene kadar oluşturma işlemi engellenir. Bu zaman aşımı süresi şu anda 100 ms olarak ayarlanmıştır ancak performansı optimize etmek için yakın gelecekte değişebilir.

Yazı tipleri önceden yüklendiğinde ve yazı tipi 100 ms'lik engelleme süresinden font-display: optional sonra indirildiğinde Chrome'daki yeni davranış (görünmez metin yanıp sönmez)

Yazı tipleri önceden yüklendiğinde ve yazı tipi 100 ms'lik engelleme süresinden font-display: optional önce indirildiğinde Chrome'daki yeni davranış (görünmez metin yanıp sönmez)

Chrome'da isteğe bağlı yazı tiplerinin önceden yüklenmesi, düzenin bozulması ve biçimlendirilmemiş metinlerin yanıp sönmesi olasılığını ortadan kaldırır. Bu, CSS Fonts Module Level 4'te belirtilen gerekli davranışla eşleşir. Burada, isteğe bağlı yazı tipleri hiçbir zaman yeniden düzene neden olmamalıdır ve kullanıcı aracıları bunun yerine uygun bir süre boyunca oluşturmayı geciktirebilir.

İsteğe bağlı bir yazı tipinin önceden yüklenmesi zorunlu olmasa da özellikle tarayıcının önbelleğinde henüz depolanmamışsa ilk oluşturma döngüsünden önce yüklenme olasılığını büyük ölçüde artırır.

Sonuç

Chrome ekibi, bu yeni optimizasyonlar uygulandıktan sonra isteğe bağlı yazı tiplerini önceden yükleme deneyimlerinizi öğrenmek istiyor. Herhangi bir sorunla karşılaşırsanız veya özellik önerisinde bulunmak isterseniz sorun bildirin.