LCP (Largest Contentful Paint) Nedir?

Kısa tanım

LCP (Largest Contentful Paint), sayfanın yüklenmeye başlamasından itibaren görüntü alanındaki en büyük görsel ya da metin bloğunun ekrana çizildiği ana kadar geçen süredir. Kullanıcının ana içeriği ne zaman gördüğünü yaklaşık olarak ölçer ve Core Web Vitals metriklerinden biridir. Ziyaretlerin 75. yüzdelik diliminde 2,5 saniye ve altı iyi, 4 saniyenin üzeri zayıf kabul edilir.

Diğer adları: Largest Contentful Paint, En Büyük İçerikli Boyama, En Büyük İçerik Boyaması

Yayınlandı 2 Ekim 2026

Görünür alandaki en büyük öğe olan hero görselinin render süresini ve 2,5 saniyelik iyi eşiğini gösteren LCP şeması

Hangi öğe LCP sayılır?

Tarayıcı, sayfa yüklenirken görüntü alanında (viewport) görünen içerik öğelerinin boyutunu takip eder ve en büyüğünü LCP adayı olarak raporlar. Aday olabilen öğeler sınırlıdır:

<img> öğeleri ve SVG içindeki <image> öğeleri,
<video> öğelerinin poster görseli ya da ilk karesi,
CSS url() ile yüklenen arka plan görseli olan öğeler,
metin içeren blok düzeyindeki öğeler (örneğin büyük bir başlık ya da paragraf).

Yükleme ilerledikçe daha büyük bir öğe çizilirse LCP adayı değişir. Kullanıcı sayfayla etkileşime geçtiği anda (dokunma, kaydırma, tuşa basma) tarayıcı yeni aday raporlamayı bırakır. Pratikte LCP öğesi çoğu sayfada ekranın üst kısmındaki kahraman görseli ya da ana başlıktır.

LCP süresi nereden oluşur?

Bir LCP değerini iyileştirmenin en verimli yolu onu parçalarına ayırmaktır. web.dev bu süreyi dört alt bölüme ayırır:

Alt bölüm	Ne anlama gelir?
TTFB	Sunucunun HTML'in ilk baytını göndermesine kadar geçen süre
Kaynak yükleme gecikmesi	TTFB ile LCP görselinin indirilmeye başlanması arasındaki boşluk
Kaynak yükleme süresi	LCP görselinin kendisinin indirilme süresi
Öğe çizim gecikmesi	Kaynak hazır olduktan sonra öğenin ekrana çizilmesine kadar geçen süre

Görsel geç keşfediliyorsa (örneğin JavaScript ile ekleniyor ya da CSS arka planı olarak tanımlanıyorsa) sorun ikinci satırdadır; dosya çok büyükse üçüncü satırda; render'ı engelleyen CSS ve JavaScript varsa dördüncü satırda.

Pratik iyileştirmeler

LCP görselini HTML'de doğrudan bir <img> olarak verin ve öncelik ipucu ekleyin.
LCP görseline asla lazy loading uygulamayın; ekranın altındaki görseller için kullanın.
Görseli doğru boyutta ve WebP ya da AVIF gibi verimli bir formatta sunun; srcset ile cihaza uygun sürümü seçtirin.
Sunucu yanıt süresini önbellekleme ve CDN ile kısaltın; istemci tarafında render edilen sayfalarda ana içeriğin HTML'de gelmesini sağlayın.
Kritik olmayan CSS ve JavaScript'in ilk çizimi engellemesini önleyin.

<img src="/gorseller/kapak-1200.webp"
     srcset="/gorseller/kapak-800.webp 800w, /gorseller/kapak-1200.webp 1200w"
     sizes="100vw" width="1200" height="630"
     fetchpriority="high" alt="Ürün ekibi toplantıda">

Ölçerken dikkat

LCP resmi olarak gerçek kullanıcı verisiyle değerlendirilir; Lighthouse'taki tek bir ölçüm hızlı bir ağ ve cihazda yapılırsa gerçeği olduğundan iyi gösterebilir. Hangi öğenin LCP olduğunu Chrome DevTools'un Performance panelinden ya da PageSpeed Insights'ın teşhis bölümünden görebilirsiniz. Ayrıntılı tanım ve alt bölümler için web.dev LCP rehberine bakılabilir.

İlgili terimler

← Sözlüğe dön