Metin ağırlıklı bir sayfada LCP elementi genelde bir başlık, ve o başlığı geciktiren şey neredeyse hep font. Görseli optimize edip cache ayarlarken asıl darboğaz @font-face kuralında duruyor.
Zincir nasıl işliyor
HTML gelir, tarayıcı CSS’i parse eder, font dosyası ancak o noktada keşfedilir ve indirilir. Metin, font gelene kadar görünmez kalır; buna “flash of invisible text” deniyor. Üç network isteği art arda çalışıyor: HTML, CSS, font. LCP elementi bir başlıksa bu zincirin sonunu bekliyor demektir.
Bunu DevTools’un Network sekmesinde görürsünüz: font dosyası ilk istekler arasında değil, CSS’ten sonra başlıyor.
font-display: swap ile metni hemen boyayın
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
font-display: swap;
font-weight: 100 900;
}swap tarayıcıya “font gelmeden sistem fontuyla çiz, font gelince değiştir” der. Metin anında görünür olur, LCP zamanı font indirmesini beklemekten kurtulur. Bedeli var: font gelince satır genişlikleri değişebiliyor, buna aşağıda döneceğiz.
Üçüncü taraf font host’unu bırakın, self-host edin
Google Fonts gibi bir CDN kullanmak ekstra bir DNS çözümlemesi, ekstra bir TLS el sıkışması, ekstra bir bağlantı demek. Font dosyasını kendi sunucunuzdan servis ederseniz bu adımların hepsi gidiyor, font zaten açık olan bağlantı üzerinden geliyor.
Astro’da bu, font dosyasını public/fonts/ altına koyup @font-face ile doğrudan referans vermek kadar basit. Ekstra script ya da entegrasyon gerekmiyor.
Üçüncü taraftan vazgeçemiyorsanız en azından erken bir bağlantı açın: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> DNS ve TLS maliyetini font isteğinden önce ödeyip zincirin sonundaki bekleme süresini kısaltıyor. Self-host kadar iyi değil ama hiç yapmamaktan iyi.
Preload sadece kullanılan tek face için
<link
rel="preload"
href="/fonts/inter-var.woff2"
as="font"
type="font/woff2"
crossorigin
/>Preload tarayıcıya “bunu CSS’i beklemeden şimdi indir” der. Ama her face’i preload etmek işe yaramıyor, tam tersi etki yapıyor: tarayıcının bant genişliği asıl kritik kaynaklar yerine dört beş font dosyasına bölünüyor. Preload’u yalnızca above-the-fold’da gerçekten kullanılan tek ağırlık ve tek stil için yazın.
Latin ve Türkçe karakter aralığına subset edin
Bir font dosyası varsayılan olarak Kiril, Yunan, matematik sembolleri gibi kullanmayacağınız yüzlerce glif taşıyor. unicode-range ile Latin ve Türkçe karakterlere (ç ğ ı ö ş ü) indirirseniz dosya boyutu belirgin şekilde küçülüyor.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0130, U+0131, U+015E, U+015F, U+011E, U+011F;
font-display: swap;
}Fallback stack’i metriklerine göre seçin
swap bir yan etki getiriyor: sistem fontu ile asıl font farklı metriklere sahipse, font geldiğinde satırlar kayıyor. Buna layout shift deniyor ve CLS’i bozuyor.
Çözüm rastgele bir fallback değil, asıl fonta metrik olarak yakın bir fallback seçmek. size-adjust, ascent-override ve descent-override ile fallback fontun metriklerini asıl fonta yaklaştırabilirsiniz:
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
}Sonucu ölçün, tahmin etmeyin
Değişikliği yapıp Lighthouse ya da PageSpeed Insights’ta LCP değerine tekrar bakın. Font zincirini kısalttığınızda kazanç genelde yüzlerce milisaniye seviyesinde görünür; sayfanın geri kalanı da yavaşsa font tek başına sizi yeşil eşiğe taşımaz.
Chrome DevTools’un Performance panelinde metnin ne zaman boyandığını gösteren zaman çizelgesine bakın. swap uygulandıktan sonra metnin sistem fontuyla anında çizildiğini, asıl fontun geldiğinde yerini aldığını orada görürsünüz.
Asıl problem genelde font sayısı
Bütün bu tekniklerden önce sorulacak soru: kaç font, kaç ağırlık yükleniyor. İki font ailesinin dört ağırlığını yüklemek sekiz dosya demek: normal, bold, italic, bold italic, her biri iki aile için ayrı ayrı. Bunların hepsi LCP’yi geciktiriyor, hangi tekniği uygularsanız uygulayın.
Bir aileye, iki ağırlığa inmek yukarıdaki her teknikten daha fazla kazandırıyor. Değişken font kullanıyorsanız zaten tek dosyada bütün ağırlıkları taşıyorsunuz, ayrı ayrı indirmeye gerek kalmıyor.
Özet
Önce font sayısını azaltın: bir aile, iki ağırlık. Sonra font-display: swap yazın, fontu self-host edin, tek kritik face’i preload edin, Latin ve Türkçe aralığına subset edin. Fallback’i metriklerine göre seçip layout shift’i önleyin.