İçindekiler
- LCP (Largest Contentful Paint) Nedir?
- LCP Öğesi Nasıl Belirlenir?
- LCP'yi Yavaşlatan 4 Ana Neden
- 1. Yavaş Sunucu Yanıt Süresi (TTFB)
- 2. Render Engelleyen CSS/JS Kaynakları
- 3. Optimize Edilmemiş, Büyük Görseller
- 4. LCP Öğesinin Geç Keşfedilmesi
- LCP Nasıl Ölçülür?
- Adım Adım LCP İyileştirme Rehberi
- Platform ve CMS'e Göre Pratik İpuçları
- WordPress ve Benzeri CMS'ler
- Shopify, Wix, Webflow Gibi Hazır E-ticaret Altyapıları
- Özel Geliştirilmiş (React/Next.js Gibi) Siteler
- Örnek Senaryo: Bir Ürün Sayfasında LCP İyileştirme
- Sık Yapılan LCP Hataları
- Sıkça Sorulan Sorular
- LCP kaç saniyenin altında olmalı?
- LCP'yi tek bir değişiklikle hızlıca iyileştirebilir miyim?
- Lazy loading tamamen kötü bir teknik mi?
- LCP mobilde neden masaüstünden daha kötü çıkıyor?
- CDN kullanmak LCP'yi ne kadar iyileştirir?
- Sonuç
Bursa'da mobilya satan bir e-ticaret sitesinin ana sayfasını PageSpeed Insights'ta test ettiğinizi düşünün: rapor kırmızı bir uyarıyla karşınıza çıkıyor — "Largest Contentful Paint: 5,8 saniye." Sayfa görsel olarak güzel, ürün fotoğrafları yüksek çözünürlüklü; ama tam da bu yüzden yavaş açılıyor ve ziyaretçilerin önemli bir kısmı içerik tam yüklenmeden sayfayı terk ediyor. Bu senaryo, LCP iyileştirme ihtiyacının en klasik örneklerinden biridir.
Bu yazıda LCP'nin (Largest Contentful Paint) tam olarak ne olduğunu, hangi öğenin genellikle LCP'yi belirlediğini, LCP'yi yavaşlatan dört ana nedeni ve adım adım uygulayabileceğiniz somut iyileştirme yöntemlerini anlatıyoruz.
Kısa tanım: LCP (Largest Contentful Paint), sayfadaki en büyük görünür içerik bloğunun (genellikle bir görsel, video kapak karesi ya da büyük bir başlık metni) tarayıcıda tamamen görünür hâle gelmesi için geçen süredir. Kullanıcının "içerik burada, sayfa yüklendi" hissettiği an olarak düşünülebilir.
LCP (Largest Contentful Paint) Nedir?
LCP, üç temel Core Web Vitals metriğinden biridir ve yükleme performansını ölçer. Google'ın tanımına göre "iyi" bir LCP süresi 2,5 saniye ve altıdır; 4 saniyeyi aşan sayfalar "kötü" kategorisine girer. Diğer iki metrik olan INP ve CLS'in de dahil olduğu genel tabloyu ve eşik değerlerini Core Web Vitals nedir yazımızda ayrıntılı ele aldık; bu yazıda yalnızca LCP'ye odaklanıyoruz.
LCP Öğesi Nasıl Belirlenir?
Tarayıcı, sayfadaki görünür alanda (viewport) yer alan en büyük içerik bloğunu otomatik olarak LCP öğesi olarak işaretler. Pratikte bu genellikle şunlardan biridir:
- Bir ürün ya da hero görseli,
- Bir video kapak karesi (poster),
- Arka plan olarak CSS ile yüklenen büyük bir görsel,
- Ya da büyük punto ile yazılmış bir başlık metni (görsel yoksa).
Sayfanızda hangi öğenin LCP olarak işaretlendiğini Chrome DevTools'un Performance panelinden ya da PageSpeed Insights raporunun "Diagnostics" bölümünden görebilirsiniz. İyileştirmeye başlamadan önce bu öğeyi kesin biçimde tespit etmeniz, eforunuzu doğru yere yönlendirmenizi sağlar.
Tek sayfa uygulamalarda (SPA) bu tespit biraz daha karmaşıklaşabilir: kullanıcı sayfalar arası geçiş yaptıkça LCP öğesi de değişebilir, çünkü her "sanal" sayfa geçişi teknik olarak yeni bir içerik bloğu getirir. Bu tür sitelerde LCP'yi yalnızca ilk yüklemede değil, sık ziyaret edilen iç geçişlerde de ayrı ayrı izlemek daha sağlıklı bir tablo verir.
LCP'yi Yavaşlatan 4 Ana Neden
1. Yavaş Sunucu Yanıt Süresi (TTFB)
Tarayıcı, ilk baytı almadan hiçbir şeyi render edemez. Sunucunuz yanıt vermekte ne kadar geç kalırsa LCP de o kadar gecikir — çünkü render süreci daha başlamadan zaman kaybedilmiş olur. Yavaş hosting, önbellek eksikliği ve verimsiz veritabanı sorguları bu gecikmenin en sık nedenleridir; çözüm adımlarını birazdan ele alacağız.
2. Render Engelleyen CSS/JS Kaynakları
Tarayıcı, sayfayı çizmeden önce genellikle <head> içindeki CSS ve senkron (render-blocking) JavaScript dosyalarını indirip işlemek zorundadır. Bu dosyalar büyük ya da gereksiz sayıda ise tarayıcı, LCP öğesini göstermeden önce hepsinin tamamlanmasını bekler.
3. Optimize Edilmemiş, Büyük Görseller
LCP öğesi genellikle bir görsel olduğu için görsel dosya boyutu doğrudan LCP süresini belirler. Sıkıştırılmamış, gereğinden yüksek çözünürlüklü ya da modern formatta (WebP/AVIF) olmayan görseller, LCP'yi yavaşlatan en yaygın tek nedendir.
4. LCP Öğesinin Geç Keşfedilmesi
Tarayıcının LCP öğesini ne kadar geç fark ettiği de süreyi doğrudan etkiler. Bu genellikle şu durumlarda yaşanır: hero görseline yanlışlıkla lazy loading uygulanmışsa (tarayıcı, görseli görünür alana girene kadar zaten "önemsiz" sanır), görsel adresi HTML'de değil JavaScript içinde tanımlıysa, ya da görsel CSS arka planı olarak, CSS dosyası tamamen indirilene kadar keşfedilemeyecek biçimde tanımlanmışsa.
LCP Nasıl Ölçülür?
- 1PageSpeed Insights ile hem lab hem saha (gerçek kullanıcı/CrUX) verisini tek raporda görün.
- 2Search Console'daki Önemli Web Verileri raporunu kullanarak site genelinde hangi sayfa gruplarının LCP sorunu yaşadığını tespit edin.
- 3Chrome DevTools → Performance panelinde sayfa yüklenme sürecini kare kare izleyerek LCP anını ve o ana kadar geçen adımları görün.
Adım Adım LCP İyileştirme Rehberi
- 1Sunucu yanıt süresini kısaltın. Kaliteli bir hosting/CDN seçimi, sunucu tarafı önbellekleme ve veritabanı sorgu optimizasyonu, LCP'nin başlangıç noktasını öne çeker. Ayrıntılar için TTFB düşürme rehberimize bakabilirsiniz.
- 2Görselleri sıkıştırın ve modern formatlar kullanın. WebP veya AVIF formatına geçmek, çoğu durumda görsel kalitesinden belirgin bir kayıp yaşamadan dosya boyutunu ciddi ölçüde küçültür. Doğru boyutlandırma ve sıkıştırma tekniklerini görsel optimizasyonu yazımızda anlattık.
- 3LCP görseline `lazy loading` uygulamayın. Görünür alanda (viewport'un üstünde, "above the fold") yer alan hero görseli hiçbir zaman gecikmeli yüklenmemeli; aksine önceliklendirilmelidir.
- 4Kritik görsele preload ipucu verin. Tarayıcıya, bu görseli en erken fırsatta indirmesi gerektiğini açıkça söyleyebilirsiniz.
- 5Render engelleyen kaynakları erteleyin. Sayfanın ilk görünümü için gerekli olmayan CSS ve JavaScript dosyalarını erteleyin ya da asenkron yükleyin.
- 6Yazı tiplerini (web font) optimize edin. Başlık metni LCP öğesiyse, özel bir yazı tipinin geç yüklenmesi metnin görünmesini de geciktirebilir.
- 7Üçüncü parti scriptleri (chat widget, reklam, analiz araçları) geciktirin. Bu scriptler ana içerikle aynı anda yüklenmeye çalıştığında sunucu ve tarayıcı kaynaklarını LCP öğesinden çalar.
LCP görseline öncelik vermek için kullanılan tipik bir preload ipucu şöyle görünür:
<link rel="preload" as="image" href="/gorseller/hero-urun.webp" fetchpriority="high">Bu satır tarayıcıya "bu görseli sayfadaki diğer her şeyden önce indirmeye başla" der ve LCP öğesinin geç keşfedilme riskini büyük ölçüde azaltır.
Nedenleri ve çözümleri toplu olarak görmek isterseniz:
| Neden | Belirti | Çözüm |
|---|---|---|
| Yavaş sunucu yanıtı (TTFB) | LCP zamanlamasının çoğu "ilk bayt" öncesinde geçiyor | Hosting/CDN iyileştirme, önbellekleme |
| Render engelleyen kaynaklar | CSS/JS tamamlanmadan içerik çizilmiyor | Kritik olmayan kaynakları erteleme |
| Büyük/optimize edilmemiş görsel | Görsel indirme süresi uzun | Sıkıştırma, WebP/AVIF, doğru boyutlandırma |
| Geç keşfedilen LCP öğesi | Görsel HTML'de geç görünüyor ya da lazy-load'lu | Preload ipucu, lazy loading kaldırma |
Platform ve CMS'e Göre Pratik İpuçları
LCP iyileştirmesinin somut adımları, sitenizin altyapısına göre biraz değişir.
WordPress ve Benzeri CMS'ler
Ağır, çok sayıda widget içeren temalar ve sayfa oluşturucu (page builder) eklentileri genellikle gereğinden fazla CSS/JS yükler ve render'ı geciktirir. Bir görsel optimizasyon eklentisi ve iyi yapılandırılmış bir önbellekleme eklentisi kurmak, çoğu WordPress sitesinde LCP üzerinde hızlı ve gözle görülür bir iyileşme sağlar.
Shopify, Wix, Webflow Gibi Hazır E-ticaret Altyapıları
Bu platformlarda sunucu tarafı genellikle sağlam durumdadır; asıl risk, tema içine eklenen çok sayıda üçüncü parti uygulama (canlı sohbet, değerlendirme widget'ı, öneri motoru) ve yüksek çözünürlüklü, sıkıştırılmamış ürün görselleridir. Kullanmadığınız uygulamaları kaldırmak ve platformun yerleşik görsel optimizasyon ayarlarını etkinleştirmek genellikle en hızlı kazanımı sağlar.
Özel Geliştirilmiş (React/Next.js Gibi) Siteler
Bu tür sitelerde LCP sorunu çoğunlukla render mimarisiyle ilgilidir. İçerik istemci tarafında (client-side) geç oluşturuluyorsa hem LCP hem de arama motoru görünürlüğü aynı anda zarar görür; bu konuyu JavaScript SEO yazımızda ayrıntılı ele aldık. Sunucu tarafı render (SSR) veya statik oluşturma (SSG) kullanmak, bu tür sitelerde LCP'yi iyileştirmenin en etkili tek adımı olabilir.
Örnek Senaryo: Bir Ürün Sayfasında LCP İyileştirme
Yazının başında bahsettiğimiz Bursa'daki mobilya sitesine dönelim. LCP öğesi, kategori sayfasındaki sıkıştırılmamış, birkaç megabaytlık bir hero görseliydi. Uygulanan adımlar sırasıyla şöyleydi:
- 1Görsel WebP formatına çevrilip görüntülendiği gerçek boyuta küçültüldü; dosya boyutu megabaytlardan yüz kilobaytın altına indi.
- 2Görsele
fetchpriority="high"ile bir preload ipucu eklendi; tarayıcı bu görseli sayfadaki diğer kaynaklardan önce indirmeye başladı. - 3Sayfanın alt kısmında kullanılan ama ilk yüklemede gereksiz olan bir slider kütüphanesinin dosyası ertelendi.
- 4Sunucu tarafında sayfa önbellekleme etkinleştirildi, böylece TTFB de kısaldı.
Bu dört adımın hiçbiri tek başına devrim niteliğinde değildi; ama birlikte uygulandıklarında etkileri birikti ve sayfa "kötü" kategorisinden çıkıp "iyi" aralığına yaklaştı. LCP iyileştirmesinde genellikle durum böyledir: tek bir sihirli değişiklik yerine, birkaç orta ölçekli iyileştirmenin toplamı sonucu belirler.
Sık Yapılan LCP Hataları
- Hero görseline yanlışlıkla `lazy loading` uygulamak. Bu, aslında hızlandırmak için tasarlanmış bir tekniğin tam tersi etki yaratmasının en klasik örneğidir.
- Ana sayfaya otomatik geçişli, birden fazla büyük görsel içeren slider/carousel koymak. Her slayt görseli indirilmeye çalışıldığında LCP öğesinin tespiti ve yüklenmesi karmaşıklaşır.
- Görselleri hiç sıkıştırmadan, kameradan çıktığı boyutta yüklemek.
- Tüm CSS'i tek, devasa bir dosyada birleştirip her sayfada tamamını yüklemek.
- Özel bir başlık fontunu render engelleyecek biçimde yüklemek. LCP öğesi bir metin bloğuysa, fontun tamamen inmesini beklemek süreyi doğrudan uzatır.
- LCP'yi yalnızca masaüstünde test edip mobilde hiç kontrol etmemek. Mobil ağ ve işlemci koşulları çoğu zaman masaüstünden belirgin ölçüde farklıdır ve LCP mobilde daha kolay bozulur.
Sıkça Sorulan Sorular
LCP kaç saniyenin altında olmalı?
Google'ın "iyi" kabul ettiği eşik 2,5 saniye ve altıdır. 2,5-4 saniye arası "geliştirilmeli", 4 saniyenin üzeri ise "kötü" olarak sınıflandırılır.
LCP'yi tek bir değişiklikle hızlıca iyileştirebilir miyim?
Çoğu durumda hayır; LCP genellikle birden fazla faktörün toplamıdır. Ancak sunucu yanıt süresini kısaltmak ve hero görselini optimize etmek, tipik olarak en büyük tekil etkiyi yaratan iki adımdır.
Lazy loading tamamen kötü bir teknik mi?
Hayır, tam tersine görünür alanın altındaki (below the fold) görseller için lazy loading genellikle faydalıdır ve sayfanın ilk yükünü hafifletir. Sorun yalnızca bu tekniğin, sayfanın en üstünde ve LCP öğesi olan görsele de yanlışlıkla uygulanmasıdır.
LCP mobilde neden masaüstünden daha kötü çıkıyor?
Mobil cihazlar genellikle daha sınırlı işlemci gücüne ve daha değişken ağ bağlantısına sahiptir; aynı sayfa ve aynı görseller mobilde daha yavaş indirilip render edilir. Bu yüzden LCP iyileştirmesini her zaman mobil veriyle önceliklendirmelisiniz.
CDN kullanmak LCP'yi ne kadar iyileştirir?
Kesin bir oran vermek sitenizin mevcut altyapısına bağlıdır, ama özellikle ziyaretçileriniz sunucunuzdan coğrafi olarak uzaksa (ör. sunucu yurt dışında, kullanıcılar Türkiye'de) bir CDN, statik dosyaların ziyaretçiye çok daha yakın bir noktadan sunulmasını sağlayarak genellikle belirgin bir iyileşme sunar.
Sonuç
LCP, ziyaretçinin sitenizle ilgili ilk izlenimini şekillendiren en kritik Core Web Vitals metriğidir. Sunucu yanıt süresini kısaltmak, görselleri optimize etmek, render engelleyen kaynakları ertelemek ve LCP öğesini doğru önceliklendirmek — bu dört adım çoğu sitede LCP sorununun büyük kısmını çözer. Sayfa hızıyla ilgili diğer teknik kaynakları sayfa hızı ve kaynak rehberimizde bulabilirsiniz.
Sitenizin güncel LCP skorunu ve hangi öğenin sizi yavaşlattığını görmek için SeoPulse'un ücretsiz analizini çalıştırabilirsiniz; raporumuz LCP dahil tüm Core Web Vitals metriklerini otomatik olarak analiz eder.
Sitenizde bu konular nasıl duruyor?
Ücretsiz SeoPulse analizi, sitenizin bu ve 30+ konudaki durumunu tek raporda gösterir.
Yazar
Ercan Büyükcafer
SEO & Dijital Pazarlama Uzmanı · SeoPulse
SeoPulse'un arkasındaki isim. Teknik SEO, içerik stratejisi ve organik büyüme üzerine çalışıyor; işletmelerin hem arama motorlarında hem de yapay zekâ araçlarında (GEO) görünürlüğünü artırmaya odaklanıyor.
- SEO & organik büyüme
- Teknik SEO & içerik stratejisi
- GEO / AI görünürlük