İ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üzen sarsıntısını tamamen ortadan kaldırmak 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 parlamasını (FOIT) tamamen ortadan kaldırmak için yeni yazı tipi yükleme iyileştirmeleri yapılmıştır.

Chrome 83, oluşturma döngülerini optimize ederek isteğe bağlı yazı tiplerini önceden yüklerken düzen kaymasını ortadan kaldırır. Özel yazı tiplerini oluştururken düzen sarsıntısı olmamasını garanti etmenin en etkili yolu, <link rel="preload"> ile font-display: optional öğelerini 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 bir kaynağın dinamik olarak değişmesi ve bunun sonucunda içeriğin "kayması" durumunda gerçekleşir. Web yazı tiplerini getirme ve oluşturma, doğrudan iki şekilde düzen kaymalarına neden olabilir:

• Yedek yazı tipi yeni bir yazı tipiyle değiştirildiğinde ("stilsiz metnin yanıp sönmesi")
• Sayfada yeni bir yazı tipi oluşturulana kadar "görünmez" metin gösterilir ("görünmez metin parlaması")

CSS font-display özelliği, desteklenen farklı değerler (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ğı, eşzamansız olarak yüklenen yazı tipleri için tercih edilen davranışa bağlıdır. Ancak şimdiye kadar, desteklenen bu değerlerin her biri, yukarıda listelenen iki yöntemden biriyle yeniden düzenlemeyi tetikleyebiliyordu.

Not: Cumulative Layout Shift metriği, bir web sayfasındaki düzen kararsızlığını ö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:

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

Daha önce, font-display: optional ile belirtilen yazı tiplerinin 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 bir süre gösterildiğ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: optionalsonra indirildiğinde Chrome'un önceki davranışı

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

Chrome'da yazı tipi 100 ms'lik engelleme süresinden font-display: optionalönce indirildiğinde önceki davranış

Yedek yazı tipinin kullanılıp kullanılmadığına veya özel yazı tipinin zamanında yüklenip yüklenmediğine bakılmaksızın Chrome, her iki durumda da sayfayı iki kez yeniden oluşturur. Bu durum, görünmez metnin hafifçe titremesine ve yeni bir yazı tipi oluşturulduğunda sayfa içeriğinin bir kısmını taşıyan düzen sarsıntısına neden olur. Bu durum, yazı tipi tarayıcının disk önbelleğinde depolanmış olsa ve engelleme süresi tamamlanmadan önce yüklenebilse bile geçerlidir.

<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'te optimizasyonlar yapıldı. Bunun yerine, özel yazı tipinin yüklenmesi tamamlanana veya belirli bir süre geçene kadar oluşturma 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 sonra indirildiğinde Chrome'daki yeni font-display: optional davranışı (görünmez metin yanıp sönmez)

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

Chrome'da isteğe bağlı yazı tiplerini önceden yüklemek, düzen bozulması ve stil uygulanmamış metinlerin yanıp sönmesi olasılığını ortadan kaldırır. Bu, isteğe bağlı yazı tiplerinin hiçbir zaman yeniden düzenlemeye neden olmaması ve kullanıcı aracılarının bunun yerine oluşturmayı uygun bir süre boyunca geciktirebilmesi gereken CSS Yazı Tipleri Modülü Seviye 4'te belirtilen gerekli davranışla eşleşir.

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

Sonuç

Chrome ekibi, bu yeni optimizasyonlar sayesinde isteğe bağlı yazı tiplerini önceden yükleme deneyimleriniz hakkında bilgi edinmek istiyor. Herhangi bir sorun yaşarsanız veya özellik önerisinde bulunmak isterseniz sorun bildirin.