LCP Nasıl İyileştirilir? En Büyük İçerik Öğesini Hızlandırma

LCP kötü olduğunda önce en büyük görünen öğenin hangisi olduğunu bulun. Her sitede bu öğe hero görseli değildir; metin bloğu veya ürün görseli de olabilir.

1. LCP öğesini tespit edin

PageSpeed/DevTools raporunda LCP element ve zaman kırılımını açın. Sunucu yanıtı mı, kaynağın keşfi mi, indirme mi, render gecikmesi mi yüksek? Ekran görüntüsüne bakarak tahmin etmeyin.

2. Kritik görseli doğru yükleyin

İlk ekrandaki LCP görseli için örnek:

<img src="/images/hero-1280.webp"
     srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w"
     sizes="100vw" width="1280" height="720"
     fetchpriority="high" alt="Atölyedeki çalışma alanı">

Bu görsele loading="lazy" eklemeyin. Dosyaların gerçek boyutlarını ve srcset seçeneklerini doğrulayın. Her görsele high vermek öncelik kavramını bozar; yalnız gerçekten kritik öğe için kullanın.

3. TTFB yüksekse backend'e bakın

curl -sS -o /dev/null -w 'TTFB: %{time_starttransfer}\nToplam: %{time_total}\n' https://example.com/

Bu tek istemci ölçümüdür; alan verisinin yerine geçmez. Yavaş sorgu, dış API beklemesi ve cache miss durumlarını loglarla eşleştirin. HTML hızlı gelip görsel geç başlıyorsa CSS background veya JavaScript sonrasında keşif sorununu inceleyin.

4. Render engelini azaltın

Kritik CSS'i küçük tutun; kullanılmayan büyük CSS ve senkron scriptleri tespit edin. Font beklemesi ana metni geciktiriyorsa uygun font-display ve fallback tasarımını kullanın. Slider'ın ilk görseli JS beklediği için geç görünüyorsa ilk içeriği HTML'de sunun.

Son kontrol

Aynı test koşulunda birkaç ölçüm yapın; yalnız en iyi sonucu seçmeyin. Mobilde görüntü kalitesi, taşma ve etkileşimleri kontrol edin. Alan verisindeki iyileşme daha sonra görünür.