Sahada (field) LCP değeriniz kötü çıktı. Nasıl analiz eder ve iyileştirirsiniz?
Cevap
LCP (Largest Contentful Paint), ekrandaki en büyük içerik öğesinin (genelde hero görsel veya başlık) render edildiği andır; iyi değer 2.5 sn veya altı (75. persentil). Analizde LCP'yi dört alt parçaya ayırıp darboğazı bulurum.
| Alt parça | Anlamı | Tipik çözüm |
|---|---|---|
| TTFB | Sunucunun ilk byte'ı göndermesi | CDN, cache, SSR optimizasyonu, redirect'leri kaldırmak |
| Resource load delay | TTFB'den görselin indirilmeye başlamasına kadar | Görselin HTML'de keşfedilebilir olması, preload, fetchpriority |
| Resource load duration | Görselin indirilme süresi | Doğru boyut, AVIF/WebP, sıkıştırma, CDN |
| Element render delay | İndirildikten sonra çizilmesine kadar | Render-blocking CSS/JS'i azaltmak, hydration'ı beklememek |
Adımlar
- Saha verisi: CrUX / Search Console veya RUM (
web-vitalsattribution) ile hangi sayfalar, cihazlar ve LCP elemanı sorunlu? - Lab: DevTools Performance panelinde LCP elemanını ve alt parça sürelerini incele (Lighthouse "LCP breakdown").
- En büyük parçayı düzelt.
Yaygın hatalar ve düzeltmeler
<!-- LCP görselini lazy load etmek: YANLIŞ -->
<img src="hero.jpg" loading="lazy" />
<!-- Doğru: hemen yükle ve önceliklendir -->
<img src="hero.avif" fetchpriority="high" width="1200" height="600" alt="..." />
<!-- CSS background veya JS ile eklenen görseli tarayıcı geç keşfeder: preload -->
<link rel="preload" as="image" href="hero.avif" fetchpriority="high" />- CSR'da LCP elemanı JS çalışmadan oluşmaz: SSR/SSG ile HTML'de gönderin.
- Kritik CSS'i inline edin, gereksiz render-blocking script'leri
deferedin. - Web font kullanan metin LCP ise font'u preload edin.
İlgili Web Performansı soruları
- Bundle boyutunu nasıl analiz eder ve küçültürsünüz?
- Çok uzun bir listeyi (on binlerce satır) performanslı nasıl gösterirsiniz?
- Bir web sayfasının yükleme performansını nasıl iyileştirirsiniz?
- Core Web Vitals nedir? LCP, INP ve CLS neyi ölçer?
- preload, prefetch, preconnect ve dns-prefetch resource hint'leri arasındaki fark nedir?
- Vite ile webpack arasındaki temel fark nedir? Tree shaking nasıl çalışır, neden bazen çalışmaz?
Bu konuda başka bir soru biliyor musun?
Mülakatta karşılaştığın soruları ekle, onaylandıktan sonra yayına alınsın.