Web fontları geç yükleniyor: preload ve font-display ile metin nasıl hızlanır?

Sayfa açılıyor ama başlıklar bir süre görünmüyor ya da önce sistem fontuyla görünüp sonra aniden değişiyor. Tarayıcı, fontun var olduğunu ancak CSS'i indirip okuduktan sonra öğreniyor.

KTYAPTECH SEO Analyzer bu sorunu PERF-FONT-NOT-PRELOADED-001 koduyla, “Web fontları önceden yüklenmiyor” başlığı altında ve düşük önem derecesiyle raporlar (Performans). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Önceden yüklenmeyen web fontları nedir?

Web fontları CSS'teki @font-face kurallarıyla tanımlanır. Tarayıcı fontu indirmeye ancak CSS'i ayrıştırıp fontun kullanıldığını gördüğünde başlar. Harici bir font servisi kullanılıyorsa buna ek bağlantı süreleri eklenir.

SEO Analyzer, kritik fontların önceden yüklenmediğini ve geç keşfedildiğini tespit ettiğinde bu bulguyu verir.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Geç yüklenen fontlar metnin görünmemesine (FOIT) veya font değişince düzen kaymasına (CLS) yol açar. Metin LCP öğesiyse LCP de gecikir.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Web fontları önceden yüklenmiyor” bulgusunu inceleyin.
• Ağ sekmesinde font isteklerinin ne zaman başladığına bakın (CSS'ten sonra mı?).
• Lighthouse'ta font ile ilgili önerileri kontrol edin.

Adım adım çözüm

1. Kritik fontları (başlık ve gövde metni) kendi sunucunuzda barındırın.
2. WOFF2 biçimini kullanın ve yalnızca gereken karakter kümelerini (Latin, Latin Extended) ve ağırlıkları yükleyin.
3. Kritik fontlar için <link rel="preload" as="font" type="font/woff2" crossorigin> ekleyin.
4. @font-face kurallarında font-display: swap (veya optional) kullanın.
5. Yedek fontun ölçülerini size-adjust ile hedef fonta yaklaştırarak kaymayı azaltın.

Kaç font önceden yüklenmeli?

Yalnızca ilk ekranda kullanılan bir veya iki font. Fazla preload, diğer kritik kaynakların önüne geçer.

Framework desteği

Next.js next/font gibi araçlar fontları otomatik olarak kendi sunucunuzda barındırır, preload eder ve yedek font ölçülerini ayarlar.

Sık yapılan hatalar

• preload'da crossorigin niteliğini unutmak (font iki kez indirilir).
• Tüm ağırlık ve stilleri önceden yüklemek.

Düzeltmeyi nasıl doğrularsınız?

• Ağ sekmesinde fontun erken istendiğini görün.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Google Fonts kullanmak yavaş mı?

Harici sunucuya ek bağlantı gerektirir; kendi sunucunuzda barındırmak genellikle daha hızlıdır.

font-display: swap her zaman doğru mu?

Çoğu site için iyi bir varsayılandır; kaymayı en aza indirmek istiyorsanız optional da değerlendirilebilir.

Özet

Kritik fontları kendi sunucunuzda WOFF2 olarak barındırın, önceden yükleyin, font-display: swap kullanın ve yedek font ölçülerini ayarlayın.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.