Neden font performansı bu kadar önemli?
Web fontları sitenizin görsel kimliğinin temel taşı. Ancak yanlış yönetildiğinde LCP değerini ikiye katlayabilen, CLS sorunlarına yol açan ve kullanıcıların saniyeler boyunca görünmez veya stilsiz metin görmesine neden olan gizli bir performans tuzağıdır.
Bir font dosyasının yüklenmesi tipik olarak 2-5 adımlı bir zincir gerektirir: HTML ayrıştırma → CSS indirme → CSS ayrıştırma → font URL'si keşfedilir → font indirmesi başlar. Bu zincirin her halkası LCP'ye ekleniyor.
Font'un LCP'ye etkisi
LCP öğeniz büyük bir metin bloğuysa — ki çoğu landing page'de bu böyledir — fontun gecikmeli yüklenmesi doğrudan LCP gecikmesine dönüşür. Tarayıcı fontu yükleyene kadar ya boş alan gösterir (FOIT: Flash of Invisible Text) ya da sistem fontunu gösterir (FOUT: Flash of Unstyled Text). Her iki senaryo da kullanıcı deneyimini olumsuz etkiler.
WOFF2 ve self-hosting: Google Fonts'tan ayrılma zamanı
Google Fonts ücretsiz ve kullanımı kolay, ancak her sayfa yüklemesinde harici bir DNS sorgusu ve bağlantı maliyeti getiriyor. Fontları kendi sunucunuzda barındırmak bu gecikmeyi ortadan kaldırır ve kullanıcı gizliliğini artırır.
Google Fonts vs. self-hosted karşılaştırması
Google Fonts
- Harici DNS sorgusu gerekli
- Harici bağlantı gecikmesi
- Cache politikası kontrol dışı
- GDPR veri akışı riski
- Kolay entegrasyon
Self-hosted WOFF2
- Aynı origin'den sunulur
- Harici bağlantı yok
- Tam cache kontrolü
- GDPR uyumlu
- Preload ile tam entegrasyon
WOFF2 dönüştürme adımları
google-webfonts-helper.herokuapp.com adresinden kullandığınız fontun WOFF2 dosyalarını indirin.
Font dosyalarını /fonts/ dizinine yükleyin ve uzun süreli Cache-Control header'ı ekleyin.
CSS'inizde WOFF2 formatını öncelikli olacak şekilde tanımlayın.
@font-face {
font-family: 'BrandFont';
src: url('/fonts/brand-regular.woff2') format('woff2'),
url('/fonts/brand-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}font-display stratejisi: swap mı, optional mı?
font-display CSS özelliği tarayıcıya font yüklenene kadar ne yapacağını söyler. Yanlış seçim hem görsel bozulmaya hem CLS artışına yol açar.
font-display değerleri ve farkları
- auto: Tarayıcının varsayılan davranışı — tahmin edilemez, kullanmayın
- block: Fontu bekler, bu sürede metin görünmez (FOIT) — kötü deneyim
- swap: Sistem fontunu gösterir, özel font yüklenince değiştirir — CLS riski var
- fallback: Kısa bekleme, sonra swap — iyi denge noktası
- optional: Bağlantı hızına göre karar verir, yavaşsa sistem fontunu kullanır — en iyi LCP
LCP odaklı performans için font-display: optional ideal tercihtir. Kullanıcı fontun indirilmesini beklemek zorunda kalmaz ve layout shift oluşmaz.
Preload ile kritik fontu öne çekin
Preload etiketi ile font dosyasını keşif zincirinin başına koyabilirsiniz. Bu, fontun CSS ayrıştırılmadan önce indirilmeye başlamasını sağlar:
<!-- HTML head'inde, CSS'den önce -->
<link rel="preload"
href="/fonts/brand-regular.woff2"
as="font"
type="font/woff2"
crossorigin>Dikkat: Preload yalnızca gerçekten kritik (LCP'yi etkileyen) fontlar için kullanılmalıdır. Her fontu preload etmek etkiyi tersine çevirir.
Uygulama checklist
Aşağıdaki adımları sırayla uygulayarak font kaynaklı performans sorunlarını tamamen ortadan kaldırabilirsiniz.
Teknik adımlar
- Google Fonts'u self-hosted WOFF2 ile değiştirin
- Kritik font için
<link rel="preload">ekleyin font-display: optionalveyaswapkullanın- Kullanılmayan karakter setlerini font-subset ile kaldırın
- Sadece kullandığınız font ağırlıklarını (weights) yükleyin
Ölçüm ve doğrulama
- Chrome DevTools Network sekmesinde font waterfall'ı inceleyin
- WebPageTest'te "Font Loading" şelalesini görüntüleyin
- Lighthouse'da "Ensure text remains visible during webfont load" uyarısını kontrol edin
- Real User Monitoring (RUM) ile gerçek cihaz LCP değerlerini izleyin