LCP Nedir, Nasıl Düşürülür? Site Hızı Rehberi

Kısa cevap: LCP (Largest Contentful Paint), bir sayfa açılırken ekranda görünen en büyük görselin ya da metin bloğunun ne kadar sürede çizildiğini ölçen metriktir. Google’a göre iyi bir LCP, ziyaretlerin %75’inde 2,5 saniye veya altıdır. LCP’yi düşürmek için dört şeye bakılır: sunucunun ilk yanıtı, en büyük öğenin ne kadar erken keşfedildiği, dosyasının ne kadar büyük olduğu ve çizilmesini neyin geciktirdiği.

Bu rehberde önce LCP’nin ne olduğunu ve nasıl ölçüldüğünü, ardından bu dört parçayı tek tek nasıl iyileştireceğinizi anlatıyoruz. Sonda WordPress siteler için ayrı bir bölüm ve uygulayabileceğiniz bir kontrol listesi var.

LCP nedir?

LCP, ziyaretçinin “sayfa açıldı” hissine en yakın ölçüdür. Tarayıcı sayfayı yüklerken görünür alandaki öğeleri izler ve en büyüğünü aday olarak seçer. Sayfa yüklendikçe daha büyük bir öğe çizilirse aday değişir. Ziyaretçi sayfayla etkileşime geçtiğinde (tıklama, kaydırma, tuşa basma) ölçüm durur. Son aday hangi zamanda çizildiyse LCP değeri odur.

LCP, Google’ın Core Web Vitals adını verdiği üç temel metrikten biridir. Diğer ikisi etkileşime yanıt süresini ölçen INP (Interaction to Next Paint; 12 Mart 2024’te FID’in yerini aldı) ve sayfa açılırken içeriğin kaymasını ölçen CLS‘dir (Cumulative Layout Shift).

İyi bir LCP değeri nedir?

Google, LCP’yi üç banda ayırır. Değerlendirme tek bir ziyarete göre değil, sayfaya yapılan ziyaretlerin 75. yüzdelik dilimine göre yapılır. Yani ziyaretlerin en az %75’i eşiğin altında kalmalıdır.

LCP değeri	Değerlendirme
2,5 saniye veya altı	İyi
2,5 – 4 saniye arası	İyileştirilmeli
4 saniyenin üstü	Kötü

Mobil ve masaüstü ayrı değerlendirilir. Mobil cihazlar genelde daha yavaş işlemciye ve bağlantıya sahip olduğu için LCP çoğu sitede mobilde daha yüksek çıkar; önceliği mobile vermek doğru olur.

Hangi öğe LCP sayılır?

Tarayıcı LCP adayı olarak şu öğelere bakar:

<img> öğeleri,
SVG içindeki <image> öğeleri,
kapak görseli (poster) olan <video> öğeleri,
CSS ile url() üzerinden arka plan görseli yüklenen öğeler,
metin içeren blok öğeler (başlık, paragraf gibi).

Çoğu sitede LCP öğesi ya hero bölümündeki büyük görsel ya da sayfanın ana başlığıdır. Hangisi olduğunu tahmin etmek yerine ölçmek gerekir: Chrome’da Geliştirici Araçları → Performance panelinde bir kayıt alın; “LCP” işaretine tıkladığınızda hangi öğenin seçildiği gösterilir. PageSpeed Insights raporu da “Largest Contentful Paint element” başlığı altında öğeyi gösterir.

LCP nasıl ölçülür: saha verisi ve laboratuvar verisi

LCP’yi ölçmenin iki yolu vardır ve ikisi farklı sorulara cevap verir.

Saha verisi (field data) gerçek ziyaretçilerden gelir. Google, Chrome kullanıcılarından toplanan bu veriyi Chrome UX Report (CrUX) adıyla yayımlar. Search Console’daki Core Web Vitals raporu ve PageSpeed Insights’ın üst bölümündeki “Gerçek kullanıcı deneyimi” verisi buradan gelir. Google’ın değerlendirmesi saha verisine dayanır.

Laboratuvar verisi (lab data) tek bir test cihazında, sabit koşullarda ölçülür. Lighthouse ve PageSpeed Insights’ın alt bölümü böyle çalışır. Sorunu bulmak ve bir değişikliğin etkisini hemen görmek için idealdir, ama gerçek ziyaretçilerin deneyimini birebir yansıtmaz.

Kendi sitenizde gerçek ziyaretçilerin LCP’sini ölçmek isterseniz Google’ın açık kaynak web-vitals JavaScript kütüphanesini kullanıp değerleri analitik aracınıza gönderebilirsiniz.

Pratik kural: Sorunu laboratuvarda bulun ve düzeltin, sonucu sahada doğrulayın. Saha verisinin 28 günlük bir pencereyle güncellendiğini unutmayın; bir düzeltmenin Search Console’a yansıması haftalar sürebilir.

LCP’yi oluşturan dört parça

LCP tek bir sayı gibi görünse de aslında art arda gelen dört sürenin toplamıdır. Neyi düzelteceğinizi bilmek için önce hangisinin uzun olduğunu bulmak gerekir.

Parça	Ne ölçer?
1. TTFB (ilk bayt süresi)	Sayfa isteğinden HTML’in ilk baytının gelmesine kadar geçen süre
2. Kaynak yükleme gecikmesi	İlk bayttan, tarayıcının LCP görselini indirmeye başlamasına kadar geçen süre
3. Kaynak yükleme süresi	LCP görselinin indirilmesi
4. Öğenin çizilme gecikmesi	Görsel indikten sonra ekranda gerçekten görünmesine kadar geçen süre

LCP'yi oluşturan dört parça: ilk bayt (TTFB), yükleme gecikmesi, yükleme süresi ve çizilme gecikmesi — LCP’yi oluşturan dört parça: ilk bayt (TTFB), yükleme gecikmesi, yükleme süresi ve çizilme gecikmesi

LCP öğesi bir metinse ve harici bir dosya gerektirmiyorsa 2. ve 3. parça sıfırdır; bu durumda süre TTFB ile çizilme gecikmesine dağılır.

Chrome Geliştirici Araçları’ndaki Performance paneli ve PageSpeed Insights, LCP’yi bu parçalara ayırarak gösterir. Kabaca bir yön göstergesi olarak, sağlıklı bir sayfada sürenin büyük kısmı TTFB ile görselin indirilmesine gider; “bekleme” ve “çizilme gecikmesi” parçaları küçük kalır. web.dev’in yayımladığı bir analize göre, LCP’si kötü olan ortalama site, LCP görselini indirmeye başlamak için onu indirmekten neredeyse dört kat fazla süre bekliyor. Yani çoğu sitede sorun görselin büyüklüğünden çok, geç keşfedilmesinde.

1. Sunucu yanıtını hızlandırın (TTFB)

İlk bayt gelmeden hiçbir şey başlamaz. TTFB’nin uzun olduğu bir sitede diğer optimizasyonların etkisi sınırlı kalır.

Sayfa önbelleği kullanın. Her ziyarette sayfayı veritabanından yeniden üretmek yerine hazır HTML sunmak TTFB’yi en çok düşüren adımdır.
CDN kullanın. İçeriği ziyaretçiye yakın bir sunucudan vermek ağ gecikmesini kısaltır. Statik dosyalarla birlikte HTML’in de önbelleklenebildiği bir yapı en iyi sonucu verir.
Yönlendirmeleri azaltın. http → https → www gibi zincirleme yönlendirmelerin her biri ayrı bir gidiş-dönüş demektir. Bağlantıları doğrudan son adrese verin.
Sunucu tarafını ölçün. Yavaş veritabanı sorguları, ağır eklentiler ve yetersiz barındırma TTFB’yi uzatır. Barındırma paketinizin PHP sürümü ve önbellek desteği de fark yaratır.

2. LCP kaynağını erken keşfettirin (yükleme gecikmesi)

Tarayıcı LCP görselini ancak onu fark ettiğinde indirmeye başlar. Görsel HTML’in içinde açıkça yazılı değilse keşif gecikir.

LCP görselini HTML’de bırakın. CSS arka planı olarak tanımlanan ya da JavaScript ile sonradan eklenen görseller, ilgili CSS veya JavaScript dosyası inip işlenene kadar görünmez. Hero görselini normal bir <img> olarak yazmak keşfi hızlandırır.

LCP görseline tembel yükleme uygulamayın. loading="lazy", ekranın altındaki görseller için doğrudur; ama ilk ekrandaki en büyük görsele uygulanırsa tarayıcı onu bilerek geciktirir.

Önceliği tarayıcıya söyleyin. fetchpriority="high" özniteliği, bu görselin diğer kaynaklardan önce indirilmesi gerektiğini belirtir:

<img src="/img/hero-1200.webp"
     srcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w, /img/hero-1600.webp 1600w"
     sizes="100vw" width="1600" height="900"
     alt="..." fetchpriority="high">

Gerekirse önceden yükleyin. Görsel HTML’de geç bir yerde ya da CSS içinde kalıyorsa <head> içinde önceden yükleme yapabilirsiniz. Duyarlı görsellerde imagesrcset ve imagesizes kullanmayı unutmayın; yoksa tarayıcı yanlış boyutu indirebilir:

<link rel="preload" as="image" href="/img/hero-1200.webp"
      imagesrcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w, /img/hero-1600.webp 1600w"
      imagesizes="100vw" fetchpriority="high">

Başka bir alan adından geliyorsa bağlantıyı önceden açın. LCP görseli bir CDN’den ya da farklı bir alan adından geliyorsa <link rel="preconnect" href="https://cdn.ornek.com"> ile bağlantı kurulumunu öne alabilirsiniz.

3. Kaynağın kendisini küçültün (yükleme süresi)

Görsel erken keşfedildikten sonra sıra indirme süresine gelir.

Modern format kullanın. WebP ve AVIF, aynı görsel kalitede JPEG ve PNG’den genellikle belirgin biçimde küçüktür.
Doğru boyutu sunun. 390 piksel genişliğindeki bir telefona 2400 piksellik görsel göndermek gereksizdir. srcset ve sizes ile tarayıcının ekrana uygun dosyayı seçmesini sağlayın.
Sıkıştırma düzeyini ayarlayın. Hero görselleri için çoğu zaman gözle fark edilmeyen bir kalite düşüşü dosyayı ciddi oranda küçültür.
Genişlik ve yüksekliği yazın. width ve height öznitelikleri LCP’yi doğrudan hızlandırmaz ama sayfa açılırken kaymayı (CLS) önler.
Video kapaklarını unutmayın. LCP öğesi bir video ise kapak görseli (poster) aynı kurallara tabidir.

4. Çizilmeyi geciktirenleri kaldırın (çizilme gecikmesi)

Görsel indiği halde ekranda görünmüyorsa tarayıcı başka bir şeyi bekliyordur.

Oluşturmayı engelleyen CSS ve JavaScript’i azaltın. <head> içindeki büyük CSS dosyaları ve defer ya da async olmayan betikler, sayfa çizilmeden önce tamamlanmak zorundadır. İlk ekran için gereken CSS’i küçük tutun, betikleri defer ile yükleyin.
İçeriği JavaScript’e bağlamayın. Ana başlığın ve hero görselinin bir JavaScript çerçevesi çalıştıktan sonra eklendiği sitelerde LCP, betiğin indirilip çalışmasını bekler. İlk ekranın HTML’de hazır gelmesi (sunucu tarafında oluşturma) bu gecikmeyi ortadan kaldırır.
Gizleyen betiklere dikkat edin. A/B test araçları, sayfayı test hazır olana kadar gizleyen kodlar ve ilk ekranı kaplayan açılır pencereler LCP’yi doğrudan uzatabilir.
Animasyonla geç görünen başlıklar. Ana başlık sayfa açılırken saydamlıktan beliren bir animasyonla geliyorsa, tarayıcı onu animasyon bitene kadar tamamen çizilmiş saymayabilir. Hero metnini animasyonsuz ya da çok kısa bir geçişle gösterin.
Fontları düzgün yükleyin. Başlık LCP öğesiyse, başlık fontunun ne zaman geldiği LCP’yi belirler. font-display: swap ile metin önce sistem fontuyla gösterilir; kritik font dosyasını <link rel="preload" as="font" type="font/woff2" crossorigin> ile önceden yüklemek beklemeyi kısaltır.

Türkçe siteler için gözden kaçan ayrıntı: latin-ext font dosyası

Birçok web fontu karakter kümelerine bölünmüş dosyalarla gelir: temel Latin (latin) ve genişletilmiş Latin (latin-ext) gibi. Türkçedeki ş, ğ, ı, İ gibi harfler genişletilmiş dosyadadır. Sitede yalnız temel Latin dosyası önceden yükleniyorsa tarayıcı Türkçe harfleri gördüğü anda ikinci bir dosya istemek zorunda kalır ve başlığın son hali gecikir.

Kendi sitemizde bunu ölçtük. Başlık fontunun latin-ext dosyasını da önceden yükleme listesine ekledik; Lighthouse mobil testinde ana sayfanın LCP değeri 2,6 saniyeden 2,2 saniyeye indi. Bu bir laboratuvar ölçümüdür ve her sitede aynı sonucu vermez; ama başlığı Türkçe karakter içeren her sitede kontrol etmeye değer. Geliştirici Araçları’nın Network sekmesinde “Font” filtresiyle sayfanın hangi font dosyalarını, hangi sırayla indirdiğini görebilirsiniz.

WordPress’te LCP nasıl düşürülür?

WordPress siteler yukarıdaki kuralların hepsine tabidir, ama bazı ayrıntılar platforma özgüdür. WordPress sitelerin hızını ve teknik SEO’sunu WordPress SEO hizmetimiz kapsamında ele alıyoruz; sitenizi baştan kurmanız gerekiyorsa web tasarım sayfamıza bakabilirsiniz.

WordPress 6.3 ve sonrası LCP görselini kendisi tahmin eder. Çekirdek, tembel yükleme uygulanmamış, öncelik özniteliği olmayan ve 50.000 pikselkareden büyük ilk görsele otomatik olarak fetchpriority="high" ekler. Bu tahmin basit sayfalarda doğru çalışır; ama başlıktan önce gelen kapak blokları, tema şablonlarındaki görseller ya da sayfa oluşturucuların eklediği görsellerde yanlış öğeyi seçebilir. LCP öğesini Geliştirici Araçları’nda kontrol edip gerekirse özniteliği elle verin.
Slider’lardan kaçının. Hero bölümündeki kaydırmalı galeriler genellikle JavaScript’e bağlıdır ve birden fazla büyük görsel yükler. Tek ve iyi optimize edilmiş bir hero görseli neredeyse her zaman daha hızlıdır.
Sayfa oluşturucuların yükünü ölçün. Bazı sayfa oluşturucular her sayfada büyük CSS ve JavaScript dosyaları yükler. Kullanılmayan modülleri kapatmak ve yalnız gereken dosyaların yüklenmesini sağlamak çizilme gecikmesini azaltır.
Önbellek eklentisi kullanın. Barındırmanıza uygun bir önbellek eklentisi (LiteSpeed sunucularda LiteSpeed Cache gibi) sayfa önbelleği, CSS ve JavaScript birleştirme ve görsel optimizasyonunu tek yerden yönetir. Her ayarı açmak yerine birer birer açıp ölçün; bazı birleştirme ayarları çizilmeyi hızlandırmak yerine yavaşlatabilir.
Görselleri yüklemeden önce boyutlandırın. Medya kütüphanesine 5000 piksellik fotoğraf yüklemek, WordPress’in ara boyutları üretmesine rağmen gereksiz yük oluşturur. Görselleri makul bir genişlikte ve WebP olarak yükleyin.

LCP iyileştirme kontrol listesi

Search Console’daki Core Web Vitals raporunda hangi sayfa gruplarının LCP sorunu yaşadığını bulun.
PageSpeed Insights ve Geliştirici Araçları ile bu sayfalardaki LCP öğesini belirleyin.
LCP’yi dört parçaya ayırın ve en uzun parçadan başlayın.
TTFB uzunsa: sayfa önbelleği, CDN, yönlendirmeler ve sunucu.
Yükleme gecikmesi uzunsa: görsel HTML’de mi, tembel yükleme var mı, fetchpriority="high" verildi mi, önceden yükleme gerekiyor mu?
Yükleme süresi uzunsa: WebP/AVIF, doğru boyut (srcset, sizes), sıkıştırma.
Çizilme gecikmesi uzunsa: engelleyen CSS/JS, JavaScript’e bağlı içerik, gizleyen betikler, animasyon, fontlar (Türkçe için latin-ext).
Her değişiklikten sonra laboratuvarda ölçün; saha verisinin güncellenmesini bekleyip Search Console’da doğrulayın.

Sık sorulan sorular

LCP SEO’yu etkiler mi?

Google, Core Web Vitals’ı sayfa deneyimi sinyallerinin bir parçası olarak sıralama sistemlerinde kullandığını belirtiyor. Ancak içeriğin aramaya ne kadar iyi cevap verdiği hala belirleyicidir; hız, benzer kalitedeki sayfalar arasında fark yaratan bir etkendir. Asıl kazanç ziyaretçi tarafındadır: hızlı açılan sayfada ziyaretçi daha az ayrılır.

Lighthouse’ta LCP iyi ama Search Console’da kötü görünüyor. Neden?

Lighthouse tek bir test cihazında laboratuvar ölçümü yapar; Search Console ise gerçek ziyaretçilerin 75. yüzdelik dilimine bakar. Ziyaretçilerinizin bir kısmı yavaş telefon ya da bağlantı kullanıyorsa saha değeri laboratuvardan yüksek çıkar. Ayrıca saha verisi 28 günlük bir pencereyle güncellendiği için yeni bir düzeltme hemen görünmez.

LCP ile FCP arasındaki fark nedir?

FCP (First Contentful Paint), ekranda herhangi bir içeriğin ilk çizildiği anı ölçer; bu küçük bir logo ya da tek bir satır olabilir. LCP ise en büyük öğenin çizildiği anı ölçer ve ziyaretçinin ana içeriği görmesine daha yakındır. Bu yüzden Core Web Vitals’ta FCP değil LCP yer alır.

LCP mobilde neden daha yüksek?

Mobil cihazların işlemcisi ve bağlantısı genellikle daha yavaştır; ayrıca test araçları mobil ölçümde bağlantıyı ve işlemciyi bilerek yavaşlatır. Mobil sonuç, ziyaretçilerinizin çoğunun deneyimine daha yakındır.

LCP Nedir? Largest Contentful Paint’i Düşürmek İçin Kapsamlı Rehber