Yazı tipi takası ve düzen kayması.
Yazı tipi takası, tarayıcının önce yedek bir aileyle metni boyayıp gerçek yazı tipi geldiğinde değiştirmesidir ve iki aile farklı yer kaplıyorsa düzen kayması üretir.
Web yazı tipleri indirilene kadar metin ya görünmez kalır ya da bir yedek aileyle boyanır. İkincisi neredeyse her zaman doğru tercihtir — görünmeyen metin, en kötü kullanıcı deneyimidir ve LCP'yi de doğrudan geciktirir. Ama takas anında bir bedel var: iki ailenin harf genişlikleri farklıysa metin yeniden akar ve altındaki her şey kayar.
Bu, düzen kaymasının en sinsi kaynağıdır çünkü hızlı bağlantıda neredeyse hiç görünmez. Geliştirici kendi makinesinde test eder, yazı tipi anında gelir, kayma oluşmaz. Yavaş bir bağlantıda ise takas görünür hâle gelir ve saha verisinde ortaya çıkar.
Metrik eşleşmesi
Çözüm, yedek aileyi gerçek ailenin metriklerine yaklaştırmaktır. Modern tarayıcılar bunun için ayarlanabilir özellikler sunuyor: yedek yazı tipinin boyut oranı, üst boşluğu ve alt boşluğu ayrı ayrı ayarlanabiliyor. Doğru ayarlandığında iki aile aynı yüksekliği kaplar ve takas anında hiçbir şey kaymaz.
Değerler tahminle bulunmaz, ölçülür: gerçek yazı tipi ve yedek aile aynı metinle yan yana render edilip yükseklikleri karşılaştırılır. Fark, ayar değerine çevrilir. Bu ölçüm bir kez yapılır ve yazı tipi değişmedikçe geçerli kalır.
Bir alternatif de yazı tipini kritik kaynak olarak önceden yüklemektir — takas hiç olmazsa kayma da olmaz. Ama bu, yazı tipini render zincirinin başına koyar ve LCP'yi geciktirebilir. İki yaklaşım arasında seçim, o sayfada metnin LCP öğesi olup olmadığına bağlıdır.
Bu sitede yaşanan vaka
Bu konu buraya bir teori olarak değil, ölçülmüş bir vaka olarak girdi — ve vakanın öğrettiği şey beklenenin tersiydi.
Yazı tipi yükleme davranışı bir düzen kayması kaynağı sanıldı ve düzeltilmek istendi. Planlanan değişiklik makul görünüyordu ve bilinen bir iyi uygulamaydı. Uygulanmadan önce ölçüldü.
Ölçüm, kaymanın oradan gelmediğini gösterdi. Yazı tipi takası zaten kayma üretmiyordu çünkü yedek aile metrik olarak eşleşmişti; kayma başka bir yerden — kaydırma sırasında sabitlenen bir bölümden — geliyordu. Planlanan değişiklik uygulansaydı, çalışan bir düzeni bozacak ve gerçek sorunu bulmayı geciktirecekti.
Ölçüm bir hatayı düzeltmedi — yanlış bir düzeltmeyi engelledi.
Vakanın ardından bir nöbetçi eklendi ve mantığı özellikle ters yönlü: yazı tipi BİLEREK geciktiriliyor ve başlık yüksekliğinin dört ayrı rotada SABİT kaldığı ölçülüyor. Yani test, yazı tipinin gelmediği durumu simüle edip düzenin bozulmadığını kanıtlıyor. Metrik eşleşmesi bir kez kurulup unutulan bir ayar değil, her koşumda doğrulanan bir sözleşme hâline geldi.
Kaç aile, kaç ağırlık
Her ek yazı tipi ailesi bir ek istek, bir ek bekleme ve bir ek takas riski demektir. Bu yüzden aile sayısı bir performans bütçesi kalemidir ve tasarım aşamasında kararlaştırılmalıdır.
Bu sitede bütçe iki aileyle sınırlı ve doğrulama süiti bunu ölçüyor. İkisi de değişken yazı tipi — yani tek bir dosya tüm ağırlıkları ve genişlikleri taşıyor. Klasik yaklaşımda her ağırlık ayrı bir dosya olurdu ve altı ağırlık altı istek demek olurdu.
Değişken yazı tipinin ikinci avantajı tasarım tarafında: genişlik ekseni sürekli olduğu için ara değerler kullanılabiliyor. Bu sitenin imza efekti tam olarak o ekseni kullanıyor — ve ek bir dosya maliyeti olmadan.
Son bir alt küme notu: yazı tipi dosyaları yalnız gereken karakter kümesiyle üretilmelidir. Latin ve genişletilmiş latin karakterleriyle sınırlanmış bir dosya, tüm Unicode aralığını taşıyan bir dosyadan kat kat küçüktür — ve Türkçe içerik için gereken tam olarak o iki kümedir.
Takas davranışı seçenekleri
Tarayıcıya yazı tipi beklenirken ne yapacağını söyleyen bir ayar var ve dört değeri farklı ödünleşimler sunuyor. Varsayılan davranış kısa bir süre metni gizler, sonra yedekle boyar ve gerçek yazı tipi geldiğinde değiştirir.
- Takas — metni hemen yedekle boya, gerçek yazı tipi gelince değiştir. LCP için en iyi, CLS riski en yüksek.
- Geri düş — kısa bir bloke penceresi, sonra yedek; gerçek yazı tipi geç gelirse hiç kullanılmaz.
- İsteğe bağlı — kısa bloke penceresi, sonra yedekte KALIR. Kayma riski yok, ama tasarım tutarsız görünebilir.
- Bloke — metni gizle. LCP'yi doğrudan geciktirir; neredeyse hiçbir durumda doğru değil.
Doğru seçim, yedek ailenin metrik olarak eşleşip eşleşmediğine bağlı. Eşleşiyorsa takas güvenlidir ve en iyi sonucu verir; eşleşmiyorsa isteğe bağlı davranış kaymayı tamamen önler ama tasarım bazı kullanıcılarda hiç görünmez. Metrik eşleşmesi kurulduğunda bu ödünleşim ortadan kalkar — ikisi de kazanılır.
Barındırma: kendi sunucunda tut
Yazı tiplerini üçüncü taraf bir sağlayıcıdan çekmek uzun süre standart uygulamaydı ve bugün büyük ölçüde bir hatadır. Sebep hem performans hem gizlilik tarafında: harici bir alan adına yapılan istek, ek bir alan adı çözümlemesi ve ek bir bağlantı kurulumu demektir — ve tarayıcı önbellekleri artık alan adı bazında bölündüğü için «başka sitede zaten indirilmiştir» varsayımı da geçerli değil.
Gizlilik tarafında ise her istek, kullanıcının adresini üçüncü bir tarafa bildirir. Bazı yargı bölgelerinde bu, açık rıza gerektiren bir veri aktarımı sayılıyor.
Kendi sunucunuzda barındırmak her iki sorunu da çözer ve ek bir maliyeti yoktur: dosya zaten indirilecektir, yalnız nereden indirileceği değişir. Bu sitede iki yazı tipi ailesi de kendi alan adından, alt küme olarak ve değişken sürümle sunuluyor — ve içerik güvenlik politikası harici kaynak isteğini zaten engelliyor.
Kapanışta bir bakım kuralı: yazı tipi değiştiğinde metrik eşleşme değerleri yeniden ölçülmelidir. Yedek aile ayarları belirli bir gerçek yazı tipine göre hesaplanmıştır; aile değiştiğinde o hesap geçersiz olur ve kayma sessizce geri gelir. Bu, bir kez kurulup unutulan ayarların neden teste bağlanması gerektiğinin bir örneği daha — nöbetçi, değerin bayatladığını değişiklik anında söyler.