LCP Nedir?

Sayılarla ne demek?

LCP, kullanıcının "sayfa yüklendi" hissine en yakın metriktir. Sayfa açılırken ekranın görünen kısmındaki en büyük öğe, çoğunlukla bir ana görsel, ürün fotoğrafı ya da büyük bir başlık bloğu, ekranda göründüğü an ölçülür. Bu süre 2,5 saniye ya da altındaysa iyi, 4 saniyenin üstündeyse kötü sayılır.

LCP'yi iyileştirmenin en etkili yolu onu dört parçaya ayırmaktır. Örneğin 3,6 saniyelik bir LCP; 0,9 saniye sunucu yanıtı (TTFB), 1,4 saniye görselin keşfedilmesini bekleme, 0,8 saniye görselin indirilmesi ve 0,5 saniye oluşturma gecikmesinden oluşabilir. Bu tabloda asıl sorun görselin geç keşfedilmesidir; görseli sıkıştırmak yalnızca 0,8 saniyelik parçayı küçültür.

Geç keşif sorununun yaygın sebepleri bellidir. LCP görseline tembel yükleme uygulanması, görselin JavaScript ya da CSS arka planı olarak eklenmesi ve tarayıcıya görselin öncelikli olduğunun söylenmemesi. fetchpriority="high" özniteliği ve gerektiğinde ön yükleme, görselin çok daha erken indirilmesini sağlar.

LCP'nin dört alt bileşeni

İyi bir LCP'de sürenin büyük kısmı TTFB ve indirmeye gider; gecikme bileşenleri sıfıra yakın olmalıdır.

LCP'yi iyileştirirken

1. LCP öğesini belirle. Şablon bazında hangi öğe?
2. Dört bileşene ayır. Süre nerede harcanıyor?
3. Görseli erken keşfettir. HTML'de <img>, fetchpriority="high".
4. Görseli küçült. Doğru boyut ve modern format.
5. Oluşturmayı engelleyenleri azalt. Kritik CSS, ertelenmiş JS.

Uygulamada ne oluyor?

En sık durum, LCP görseline tembel yükleme uygulanması. Tema bütün görsellere loading="lazy" ekliyor; ana görsel en son indirilen kaynaklardan biri oluyor.

İkinci gözlem, ana görselin slider ile sunulması. İlk slayt JavaScript yüklendikten sonra gösteriliyor; LCP JavaScript'in çalışmasını bekliyor.

Üçüncüsü, görselin CSS arka planı olarak eklenmesi. Tarayıcı görseli ancak CSS dosyasını indirip ayrıştırdıktan sonra keşfediyor; yükleme gecikmesi uzuyor.

Dördüncüsü, masaüstü boyutundaki görselin mobilde de indirilmesi. 2400 piksellik görsel 400 piksellik ekrana gönderiliyor; indirme süresi gereksiz yere artıyor.

Beşincisi, yavaş sunucu yanıtının gözden kaçması. Bütün çalışma görsellere odaklanıyor ama TTFB 1,5 saniye; LCP bu tabanın altına inemiyor.

Altıncısı, web fontlarının metin LCP'sini geciktirmesi. En büyük öğe bir başlık ve font yüklenene kadar görünmüyor; font-display ayarı ile metin hemen gösterilebilir.

Yedincisi, çerez izni penceresinin LCP öğesi olması. Büyük bir izin katmanı en büyük öğe olarak ölçülüyor; onun yükleme biçimi LCP'yi belirliyor.

Sekizincisi, A/B test araçlarının sayfayı gizlemesi. Test aracı, varyant yüklenene kadar sayfayı beyaz ekranda tutuyor; LCP yüzlerce milisaniye uzuyor.

Dokuzuncusu, ön yüklemenin aşırı kullanılması. Onlarca kaynak ön yüklemeye alınıyor; asıl LCP görseli bant genişliği için yarışıyor.

Onuncusu, ürün sayfalarında farklı LCP öğeleri. Bazı ürünlerde görsel, bazılarında video kapak görseli LCP oluyor; şablon tek tip optimize edildiği için bir kısmı kötü kalıyor.

On birincisi, CDN kullanılmaması. Görseller tek bir sunucudan uzak kullanıcılara gönderiliyor; indirme süresi coğrafyaya göre değişiyor.

On ikincisi, iyileştirmenin saha verisiyle doğrulanmaması. Laboratuvar testinde LCP düşüyor ama gerçek kullanıcıların yavaş ağları ve cihazları farklı bir tablo gösteriyor.

Neyi göstermez?

LCP, sayfanın ne zaman kullanılabilir olduğunu göstermez. Ana içerik görünse de sayfa hala etkileşime kapalı olabilir; bunun için INP ayrıca izlenir.

Sıkça sorulan sorular

İyi bir LCP kaç saniye?

Ziyaretlerin yüzde 75'inde 2,5 saniye ya da altı.

LCP öğesi nasıl bulunur?

PageSpeed Insights, Lighthouse ya da tarayıcı geliştirici araçlarının performans panelinde gösterilir.

LCP görseline lazy load uygulanmalı mı?

Hayır; LCP görseli öncelikli yüklenmeli, tembel yükleme yalnızca ekran dışındaki görsellere uygulanmalı.

Bu kavramın bütün resim içindeki yerini SEO Danışmanlığı Rehberi içinde ayrıntılı anlattım.