Yazı tipi görüntüleme uyarısı nasıl giderilir?
Yazı tipi inene kadar metin görünmüyor. Bekleme davranışının ayarlanması ve yazı tiplerini kendi sunucunuzdan servis etmenin faydası.
Uyarı ne diyor?
Rapordaki başlık: "Yazı tipi görüntüleme".
Anlattığı şey şu: sayfada özel bir yazı tipi kullanılıyor ve tarayıcı o dosyayı indirene kadar metni göstermiyor.
Kullanıcı açısından bu şöyle görünüyor: sayfa açılıyor, görseller ve düzen geliyor, ama metin yok. Bir süre sonra metin aniden beliriyor.
Yavaş bağlantılarda bu bekleme uzun sürüyor ve sayfa boş görünüyor.
Neden böyle bir davranış var?
Mantığı anlaşılır: tarayıcı metni önce yedek bir yazı tipiyle gösterip sonra değiştirirse, metin gözünüzün önünde biçim değiştiriyor. Bu da rahatsız edici.
Bunu önlemek için tarayıcılar varsayılan olarak bekliyor.
Ama bu varsayılan, hızlı bağlantılar düşünülerek kurulmuş. Yavaş bağlantıda bekleme, biçim değişiminden çok daha kötü bir deneyim üretiyor.
İyi haber: bu davranış değiştirilebiliyor ve tek satırlık bir ayar.
font-display ayarı
Yazı tipi tanımına eklenen bu ayar, yükleme sırasında ne olacağını belirliyor.
Uygun değer verildiğinde tarayıcı şunu yapıyor: metni hemen yedek bir yazı tipiyle gösteriyor, asıl yazı tipi gelince değiştiriyor.
Kullanıcı hiç beklemiyor. Metin en baştan okunabilir oluyor.
Ayarın alabileceği değerler ve her birinin davranışı MDN'in belgesinde ayrıntılı anlatılıyor.
İpucu — Bu ayarı yaptıktan sonra sayfayı yavaş bağlantı simülasyonuyla açıp izleyin. Metnin hemen görünüp sonra biçim değiştirdiğini göreceksiniz — istenen davranış bu.
Kendi sunucunuzdan servis etmek
İkinci ve daha büyük kazanç burada.
Yazı tipleri genellikle dış bir servisten çekiliyor. Bunun üç maliyeti var:
Ek ağ turu. Tarayıcı ayrı bir alan adına bağlanmak, güvenli bağlantı kurmak ve sonra dosyayı indirmek zorunda.
Dış bağımlılık. O servis yavaşsa ya da erişilemezse siteniz etkileniyor.
Kişisel veri. Ziyaretçinin IP adresi o servise gidiyor.
Yazı tipini kendi sunucunuzdan servis etmek üçünü birden çözüyor.
Kendi sitemizde bu yolu kullanıyoruz ve beklenmedik bir yan faydası da oldu: derleme artık dış bir servise bağlı değil. Daha önce bir dağıtım, yazı tipi indirilemediği için düşmüştü.
Kaç yazı tipi, kaç ağırlık?
Sık atlanan ama etkisi doğrudan ölçülebilen bir kalem.
Her yazı tipi ailesi ve her ağırlık ayrı bir dosya demek. Üç aile ve her birinin dört ağırlığı kullanılıyorsa on iki dosya indiriliyor.
Yapı | Dosya sayısı |
|---|---|
3 aile × 4 ağırlık | 12 |
2 aile × 3 ağırlık | 6 |
2 değişken yazı tipi | 2 |
Değişken yazı tipleri tek dosyada bütün ağırlıkları taşıyor. Kendi sitemizde iki değişken yazı tipi kullanıyoruz; toplam dört dosya iniyor (Türkçe karakterler için ayrı alt küme dahil).
Türkçe için bir ayrıntı: temel latin karakter setinde ğ, ş ve ı harfleri yok. Genişletilmiş alt küme gerekiyor ve bu ayrı bir dosya demek. Alt küme ayrımı korunduğunda, Türkçe karakter içermeyen sayfalarda o dosya hiç indirilmiyor.
Kayma sorunu
font-display ayarı bir yan etki üretiyor: metin yedek yazı tipinden asıl yazı tipine geçerken satırlar kayabiliyor.
İki yazı tipinin harf genişlikleri farklıysa, aynı cümle farklı yer kaplıyor ve sayfa oynuyor.
Bu, düzen kayması ölçüsünü bozuyor. Konuyu düzen kayması yazısında ayrıca ele aldık.
Çözüm yedek yazı tipini asıl yazı tipine yakın seçmek. Bazı tarayıcılar bu farkı azaltmak için ek ayarlar da sunuyor.
Dikkat — font-display ayarını yapıp yedek yazı tipini hiç düşünmemek, bir uyarıyı kapatıp başka bir uyarı açmak oluyor. İkisi birlikte ele alınmalı.
Öncelikli yükleme
Yazı tipi dosyası, stil dosyası okunduktan sonra keşfediliyor. Yani iki adımlı bir gecikme var.
Tarayıcıya bu dosyanın önemli olduğunu önceden söylemek mümkün. Böylece yazı tipi, stil dosyasıyla paralel iniyor.
Bu, yalnızca ilk ekranda kullanılan yazı tipi için yapılmalı. Bütün yazı tiplerine öncelik vermek, hiçbirine vermemekle aynı sonucu veriyor.
Yazı tipi tarafındaki iyi uygulamalar web.dev'in ilgili belgesinde derli toplu anlatılıyor.
Sistem yazı tipi seçeneği
En hızlı yazı tipi, hiç indirilmeyen yazı tipi.
Sistem yazı tipleri kullanıcının cihazında zaten var. İndirme yok, bekleme yok, kayma yok.
Karşılığında marka kimliğinden vazgeçiyorsunuz — site her cihazda biraz farklı görünüyor.
Bu takas her proje için değerlendirilmeli. Gövde metninde sistem yazı tipi, yalnızca başlıklarda özel yazı tipi kullanmak sık tercih edilen bir orta yol: indirilen dosya sayısı düşüyor, marka görünümü büyük ölçüde korunuyor.
Örnek senaryo — Bir kurumsal sitede üç yazı tipi ailesi ve on bir ağırlık kullanılıyor; toplam on bir dosya iniyor ve metin bir saniyeden uzun süre görünmüyor. İnceleme yapıldığında ağırlıkların altısının sitede hiç kullanılmadığı görülüyor. İki değişken yazı tipine geçiliyor ve font-display ayarı ekleniyor. Dosya sayısı on birden dörde iniyor, metin ilk anda görünmeye başlıyor.
Kontrol listesi
- Yazı tipi tanımlarında font-display ayarı var mı?
- Yazı tipleri kendi sunucunuzdan mı servis ediliyor?
- Kaç aile ve kaç ağırlık kullanılıyor, hepsi gerçekten kullanılıyor mu?
- Değişken yazı tipi seçeneği değerlendirildi mi?
- Türkçe karakterler için genişletilmiş alt küme tanımlı mı?
- Yedek yazı tipi asıl yazı tipine yakın mı?
- İlk ekrandaki yazı tipi öncelikli yükleniyor mu?
Beşinci madde Türkçe siteler için özellikle önemli ve sık atlanıyor; eksik olduğunda Türkçe karakterler farklı bir yazı tipiyle görünüyor.
Alt küme ayrımı
Yazı tipi dosyaları bütün dünya alfabelerini taşıyabiliyor ve bu, dosyayı gereksiz büyütüyor.
Alt küme ayrımı, yalnızca ihtiyaç duyulan karakterlerin ayrı dosyalarda tutulmasını sağlıyor. Tarayıcı sayfada hangi karakterler varsa yalnızca o dosyayı indiriyor.
Türkçe için bu ayrım özellikle önemli: temel latin seti Türkçe karakterleri içermiyor, genişletilmiş set gerekiyor.
Doğru kurulduğunda Türkçe karakter içermeyen bir sayfa büyük dosyayı hiç indirmiyor. Kendi sitemizde bu ayrım korunuyor.
Yazı tipi değiştirmek istiyorsanız
Tasarım gereği yazı tipi değişecekse, bunun bir hız kararı olduğunu da hesaba katmak gerekiyor.
Bakılacaklar:
Kaç ağırlık gerçekten kullanılacak? Tasarımda üç ağırlık varsa dördüncüyü indirmenin anlamı yok.
Değişken sürümü var mı? Varsa tek dosyayla bütün ağırlıklar geliyor.
Türkçe karakterleri tam mı? Bazı yazı tipleri Türkçe karakterleri eksik ya da kötü tasarlanmış taşıyor; metin o harflerde farklı görünüyor.
Üçüncü madde en çok atlanan ve en geç fark edilen. Seçim yapmadan önce Türkçe bir paragrafla test etmek gerekiyor.
Sonuç — Yazı tipi uyarısı küçük bir ayar gibi görünüyor ama ilk anda metnin görünüp görünmemesini belirliyor. Düzeltmesi ucuz; ihmal edildiğinde kullanıcı boş bir sayfaya bakıyor.
Yazı tipi kurulumu ve hız düzeltmelerini teknik SEO kapsamında yapıyoruz; yeni bir sitede bu yapı baştan doğru kuruluyor — web sitesi geliştirme ve kurumsal web tasarım sayfalarında anlattık.
Rapordaki diğer uyarılar için PageSpeed uyarıları yazısına bakabilirsiniz.
Bu konuyla ilgili
- CSS optimizasyonu — Stil tarafındaki yük.
