Yavaş bir LCP'yi nasıl teşhis eder ve iyileştirirsiniz?

Question

IT Interview Practice · Accepted Answer

**LCP öğesinin ne olduğunu** ve **neden geç kaldığını** bularak başlayın. LCP dört alt parçaya bölünür — en büyüğünü düzeltin. ## Teşhis: dört LCP alt parçası ```text [ TTFB ] ─▶ [ Kaynak yükleme gecikmesi ] ─▶ [ Kaynak yükleme süresi ] ─▶ [ Render gecikmesi ] sunucu fetch NE ZAMAN başlar görseli indir onu boya ``` Chrome DevTools ve PageSpeed Insights hangi dilimin baskın olduğunu gösterir. Yaygın suçlular: yavaş sunucu (TTFB), geç keşfedilen LCP görseli veya boyamayı geciktiren render'ı bloklayan bir script/CSS. ## Alt parçaya göre düzeltmeler - **Yavaş TTFB** → HTML'yi bir CDN'de önbelleğe alın, SSG/ISR kullanın, origin/veritabanını hızlandırın. - **Yükleme gecikmesi (görsel geç bulundu)** → onu preload edin ve önceliğini yükseltin, böylece tarayıcı onu CSS/JS'den sonra değil hemen getirir: ```html

``` - **Yükleme süresi (görsel çok büyük)** → AVIF/WebP sunun, `srcset` ile doğru boyutlandırın, sıkıştırın. - **Render gecikmesi** → render'ı bloklayan CSS/JS'yi kesin; kritik CSS'yi satır içine alın; script'leri `defer` edin. ## Tuzaklar - LCP görselini lazy-load etmek (veya onu JS hydration'ın arkasına saklamak) — 1 numaralı kendi kendine açtığınız LCP yarası. - Web font'ları LCP metnini bloklar; `font-display: swap` kullanın ve font'u `preload` edin. - Lab LCP'yi optimize ederken 4G'deki gerçek kullanıcılar yavaş kalır — her zaman alan verisiyle (field data) doğrulayın. ## Neden önemli LCP, manşet yükleme metriğidir ve bir arama sıralama faktörüdür. Dört alt parçayı adlandırabilmek ve her birini somut bir düzeltmeye eşleyebilmek, tam olarak görüşmecilerin aradığı yapılandırılmış, kanıta dayalı yaklaşımdır.

Teşhis: dört LCP alt parçası

Alt parçaya göre düzeltmeler

Tuzaklar

Neden önemli

İlgili sorular