Bir sayfa açılırken metnin önce başka bir yazı tipiyle göründüğünü, sonra aniden değiştiğini fark etmişsinizdir. Bu değişim satır uzunluklarını ve paragraf yüksekliklerini etkilediği için içerik aşağı yukarı kayar. Ziyaretçi okumaya başladığı yeri kaybeder, arama motorları ise bunu düzen kayması olarak ölçer ve sayfa deneyimi puanınıza yansıtır.
Kaymanın nedeni: görünmez ve yedek metin dönemi
Tarayıcı, yazı tipi dosyasını indirene kadar iki şeyden birini yapar. Metni hiç göstermez ya da sistemin yedek fontuyla gösterir. İlk durumda içerik gecikir, ikincisinde font gelince harf genişlikleri değiştiği için düzen oynar. Özellikle geniş harfli bir özel font ile dar bir sistem fontu arasındaki fark büyükse kayma belirginleşir. Sorunu çözmek için hem dosyanın daha erken inmesini hem de iki font arasındaki ölçü farkının azalmasını sağlamak gerekir.
font-display ve ön yükleme ayarları
CSS içinde font-display özelliği tarayıcının bekleme davranışını belirler. Swap değeri metni hemen yedek fontla gösterir, font gelince değiştirir. Okunabilirlik için iyidir ama kayma riski taşır. Optional değeri ise fontu yalnızca çok hızlı inerse kullanır, aksi halde sayfa yedek fontla kalır ve kayma neredeyse hiç olmaz. Başlık gibi kritik alanlarda kullanılan ana fontu link rel=preload ile önceden istemek, indirme süresini kısaltır. Bunu yalnızca gerçekten ilk ekranda görünen bir ya da iki dosya için yapın, aksi halde diğer kaynakları yavaşlatırsınız.
Dosyayı küçültmek ve yedek fontu eşleştirmek
Fontları kendi sunucunuzdan vermek, üçüncü taraf bağlantısı için gereken ek DNS ve bağlantı süresini ortadan kaldırır. Dosya biçimi olarak woff2 tercih edin, çünkü diğer biçimlere göre belirgin şekilde daha küçüktür. Kullanmadığınız ağırlıkları ve italik varyantları projeden çıkarın. Türkçe için gerekli karakterleri içeren alt kümeyi seçmek de boyutu düşürür; ğ, ş, ı, İ gibi harflerin ppakette bulunduğunu mutlaka test edin. Değişken font kullanıyorsanız birden fazla ağırlık tek dosyada toplanır.
Kaymayı asıl azaltan adım, yedek fontu özel fonta yaklaştırmaktır. CSS içindeki size-adjust, ascent-override ve descent-override tanımlarıyla yedek fontun ölçüleri ayarlanır. Böylece font değiştiğinde satır yüksekliği ve genişlik neredeyse aynı kalır.
Ölçme ve doğrulama
Değişiklikleri sezgiyle değil, ölçerek değerlendirin. Tarayıcı geliştirici araçlarındaki performans paneli ve ağ kısıtlama seçeneği, yavaş bağlantıda sayfanın nasıl davrandığını gösterir. Sayfa hızı raporlarındaki kümülatif düzen kayması metriği 0,1 değerinin altında olmalıdır. Gerçek kullanıcı verisi için saha ölçümlerine de bakın, çünkü laboratuvar sonuçları önbellekteki fontları yansıtmayabilir.
Özetle, az sayıda font dosyası kullanın, kritik olanı önceden yükleyin, uygun font-display değerini seçin ve yedek fontu ölçü olarak eşleştirin. Bu dört adım hem hızı hem okuma konforunu gözle görülür biçimde iyileştirir.