İ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üzendeki olumsuzlukları tamamen kaldırmak için link rel="preload" ve font-display: optional birleştirilebilir

Houssein Djirdeh

Not: Chrome 83'te, düzen kaymasını ve isteğe bağlı yazı tipleri önceden yüklendiğinde görünmez metnin (FOIT) yanıp sönmesini tamamen ortadan kaldırmak için yeni yazı tipi yükleme iyileştirmeleri yapıldı.

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. <link rel="preload"> ile font-display: optional birleştirildiğinde, özel yazı tipleri oluşturulurken düzende olumsuzluk yaşanmayacağını garanti eden en etkili yol mevcuttur.

Tarayıcı uyumluluğu

Tarayıcılar arası güncel destek bilgileri için MDN verilerine bakın:

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

Yazı tipi oluşturma

Düzen kayması veya yeniden düzen, bir web sayfasındaki kaynak dinamik bir şekilde değişerek içerikte "kaydırma"ya neden olduğunda gerçekleşir. Web yazı tiplerinin getirilmesi ve oluşturulması, iki yoldan biriyle doğrudan düzen kaymasına neden olabilir:

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

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

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:

• Engelle: "Görünmez" metin oluşturur ancak yüklemesi biter bitmez web yazı tipine geçersiniz.
• Değiştir: Metni yedek bir sistem yazı tipi kullanarak oluşturun, ancak yüklenmesi biter bitmez web yazı tipine geçin.
• Başarısız: Metin, yedek sistem yazı tipiyle oluşturulur.

Önceden, font-display: optional ile belirtilen yazı tipleri 100 ms'lik bir engelleme süresine sahipti ve değiştirme süresi yoktu. Bu da "görünmez" metnin, yedek yazı tipine geçmeden önce çok kısa bir süre gösterileceği anlamına gelir. Yazı tipi 100 ms içinde indirilmezse yedek yazı tipi kullanılır ve değişiklik yapılmaz.

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

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

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

Chrome, yedek yazı tipinin kullanılıp kullanılmamasından veya özel yazı tipinin yüklenmesinin zamanında bitmesinden bağımsız olarak sayfayı her iki durumda da iki kez yeniden oluşturur. Bu, görünmez metnin biraz titremesine ve yeni bir yazı tipinin oluşturulduğu durumlarda sayfa içeriğinin bir kısmını hareket ettiren düzen olumsuzluğuna neden olur. Bu durum, yazı tipi tarayıcının disk önbelleğinde saklansa bile meydana gelir ve engelleme süresi tamamlanmadan önce yüklenebilir.

Optimizasyonlar, <link rel="preload'> ile önceden yüklenen isteğe bağlı yazı tipleri için ilk oluşturma döngüsünü tamamen kaldırmak için Chrome 83'te kullanıma sunulmuştur. Bunun yerine, özel yazı tipinin yüklenmesi bitene veya belirli bir süre geçene kadar oluşturma işlemi engellenir. Bu zaman aşımı süresi şu anda 100 ms'ye ayarlı ancak performansın optimize edilmesi için yakın gelecekte değiştirilebilir.

Yazı tipleri önceden yüklendiğinde ve yazı tipi, 100 ms'lik blok süresinden sonra indirildiğinde (görünmez metin flash olmadan)

Yazı tipleri önceden yüklendiğinde ve yazı tipi 100 ms'den önce indirildiğinde (görünmez metin flash'ı olmadan) Chrome'da yeni font-display: optional davranışı

font-display: optional

Chrome'da isteğe bağlı yazı tiplerinin önceden yüklenmesi, düzende olumsuzluklar olması ve biçimlendirilmemiş metnin yanıp sönmesi olasılığını ortadan kaldırır. Bu, CSS Yazı Tipleri Modülü Düzeyi 4'te belirtilen gerekli davranışla eşleşir. Burada, isteğe bağlı yazı tipleri hiçbir zaman yeniden düzene neden olmaz ve kullanıcı aracıları bunun yerine oluşturmayı uygun bir süre boyunca geciktirebilir.

İsteğe bağlı bir yazı tipinin önceden yüklenmesi gerekli olmasa da, özellikle henüz tarayıcının önbelleğinde kayıtlı değilse, ilk oluşturma döngüsünden önce yüklenme şansını önemli ölçüde artırır.

Sonuç

Chrome ekibi, bu yeni optimizasyonlar sayesinde isteğe bağlı yazı tiplerini önceden yükleme deneyimlerinizi öğrenmek için sabırsızlanıyor. Sorun yaşarsanız veya özellik önerilerini paylaşmak isterseniz bir sorun kaydı oluşturun.