Performans · · 7 dk okuma

Font Performansı: Preload, Display Swap ve WOFF2 Optimizasyonu

Google Fonts yerine self-hosted WOFF2 kullanarak LCP'yi %40 iyileştirin. font-display swap, preload stratejileri ve performans odaklı tipografi rehberi.

← Tüm Yazılar

Font stratejisi

Az sayıda aile, WOFF2 formatı ve kritik varyant preload kombinasyonu sayfa açılışını belirgin biçimde hızlandırır. Google Fonts yerine self-hosted font kullanımı, ek bir DNS çözümleme roundtrip'ini ortadan kaldırarak LCP'yi ortalama %40 iyileştirir.

Uygulama checklist

  • font-display: swap ile FOIT (Flash of Invisible Text) sorununu çözün
  • Kritik başlık fontunu <link rel="preload" as="font"> ile yükleyin
  • Kullanılmayan varyantları ve ağırlıkları kaldırın — her varyant ~20-50KB ekler
  • Yalnızca WOFF2 formatını kullanın; modern tüm tarayıcılar destekler
  • Alt metin olarak system font stack tanımlayın: -apple-system, BlinkMacSystemFont, sans-serif