Kısa cevap: LCP (Largest Contentful Paint), kullanıcı sayfayı açtığında görünür alandaki en büyük içerik öğesinin ne zaman görüntülendiğini ölçen Core Web Vitals metriğidir. İyi bir LCP için gerçek kullanıcı verilerinin 75. yüzdelik diliminde 2,5 saniye veya daha düşük değer hedeflenir. LCP iyileştirmeye başlamadan önce sayfanızda en büyük öğenin ne olduğunu ve beklemenin hangi aşamada oluştuğunu bulmalısınız.
Bu rehber WordPress, özel yazılım ve e-ticaret sitelerinde hız iyileştirmesi yapanlar için hazırlanmıştır. Örnekler gerçek bir sitenin ölçüm sonucu değil, kavramları açıklayan senaryolardır. Sadece tek bir PageSpeed puanına bakarak karar vermeyin.
1. LCP nedir, tam olarak neyi ölçer?
LCP, ilk görünür ekran alanındaki en büyük uygun görsel, video öğesi veya metin bloğunun görüntülenme zamanıyla ilgilidir. Kullanıcı sayfayı yüklemeye başladıktan sonra ana içeriği ne kadar çabuk gördüğünü değerlendirmeye yardımcı olur. Ölçüme önceki sayfadan ayrılma, bağlantı, yönlendirme ve ilk sunucu yanıtı gibi gecikmeler de yansıyabilir.
LCP, sitenin bütün içeriğinin yüklendiği an veya kullanıcının bir butona bastığında ne kadar hızlı tepki aldığı anlamına gelmez. INP etkileşim tepkisini, CLS ise görsel düzen kaymalarını ayrı değerlendirir. Üç metriğin iyi sonuç vermesi daha dengeli bir kullanıcı deneyimi sunar.
2. İyi LCP değeri kaç saniyedir?
| LCP | Değerlendirme | Ne yapmalı? |
|---|---|---|
| 2,5 saniye veya altı | İyi | Mevcut deneyimi koruyun ve izleyin |
| 2,5–4 saniye arası | İyileştirme gerekiyor | Gecikmenin kaynağını ölçün ve azaltın |
| 4 saniyeden fazla | Zayıf | Öncelikli performans çalışması planlayın |
Bu eşikler, gerçek kullanıcı yüklemelerinin 75. yüzdelik dilimi üzerinden değerlendirilir. Mobil ve masaüstü ayrı incelenmelidir. Örneğin bir sitenin masaüstünde 2 saniye, mobilde 4,5 saniye LCP göstermesi mümkündür; tek bir ortalama bu farkı gizler.
3. LCP nasıl ölçülür? PageSpeed Insights ve CrUX
- PageSpeed Insights aracında test edeceğiniz tam sayfa URL’sini girin.
- Mobil ve masaüstü sekmelerini ayrı değerlendirin.
- Varsa gerçek kullanıcı verisi (CrUX) bölümündeki LCP değerini inceleyin.
- Ardından Lighthouse laboratuvar tanılarını ve LCP öğesini kontrol edin.
- Öncelikli düzeltmeyi belirleyip aynı koşullarda tekrar ölçüm yapın.
PageSpeed Insights’taki CrUX gerçek kullanıcı verileri önceki 28 günlük dönemden gelir; laboratuvar testi ise belirli bir cihaz ve ağ koşulunu taklit eder. Gerçek kullanıcı verisi olmayan yeni veya düşük trafikli bir sayfada “veri yok” yazması, LCP’nin sıfır olduğu anlamına gelmez. İyileştirmeyi laboratuvar ve tarayıcı araçlarıyla yine değerlendirebilirsiniz.
4. Sayfanın LCP öğesi nasıl bulunur?
Bir haber sayfasında büyük haber görseli, kurumsal ana sayfada üstteki hero görseli, başka bir sayfada büyük başlık metni LCP öğesi olabilir. “En büyük dosya kesin LCP’dir” varsayımı doğru değildir: ölçüm görünür alandaki uygun öğeler üzerinden yapılır.
Chrome DevTools performans izleme paneli ve Lighthouse tanıları, LCP olayını ve ilişkili öğeyi incelemeye yardımcı olur. Sayfanın mobilde farklı yerleşimi varsa mobil LCP öğesi masaüstündekinden farklı olabilir. Önce hangi öğeyi optimize edeceğinizi doğrulayın.
5. LCP’nin dört gecikme bileşeni
| Aşama | Ne anlama gelir? | Tipik darboğaz |
|---|---|---|
| TTFB | İsteğin başlamasından ilk HTML yanıt baytına kadar süre | Yavaş sunucu, yönlendirme, ağ gecikmesi |
| Kaynak yükleme gecikmesi | İlk yanıttan LCP kaynağı indirilene kadar başlayan bekleme | Görselin geç keşfedilmesi |
| Kaynak yükleme süresi | LCP görseli veya ilgili kaynağın aktarım süresi | Büyük dosya, düşük bant genişliği |
| Öğe görüntüleme gecikmesi | Kaynak hazır olduktan sonra öğenin görünmesine kadar süre | Engelleyici CSS/JS veya geç DOM oluşturma |
Bu ayrım gereklidir çünkü 1 MB görseli 200 KB’ye indirmek her zaman ana sorunu çözmez. Eğer görsel JavaScript çalışana kadar istenmiyorsa önce kaynağın geç keşfedilmesi ele alınmalıdır.
6. LCP hero görseli nasıl optimize edilir?
- Görselin hangi çözünürlükte gösterildiğini ölçün; gereksiz büyük boyut yerine uygun ölçü ve
srcset/sizeskullanın. - Uygun olduğunda modern, desteklenen sıkıştırılmış görsel formatlarını değerlendirin.
- LCP öğesi olduğu belirlenen ana görselde
loading="lazy"kullanmayın. - Önemli görselin ilk HTML’den keşfedilmesini sağlayın. CSS arka planına veya JavaScript’e bağımlıysa ön yükleme gerekebilir.
- Gerekiyorsa ana görsel için
fetchpriority="high"kullanın; her görsele yüksek öncelik vermeyin.
Örneğin <img src="/kapak.webp" width="1200" height="630" fetchpriority="high" alt="Örnek kapak"> işaretlemesi olası bir hero görseli için kullanılabilir. Bu yalnızca bir HTML örneğidir; gerçek tasarım, duyarlı boyutlar ve öğenin gerçekten LCP olup olmadığı ayrıca kontrol edilmelidir.
7. Sunucu ve TTFB gecikmesi nasıl azaltılır?
Sunucu HTML yanıtını geç veriyorsa görsel ve diğer kaynakların yüklenmesi de geç başlayabilir. Veritabanı sorguları, dinamik sayfa üretimi, coğrafi uzaklık, gereksiz yönlendirmeler ve yetersiz barındırma kaynakları TTFB’yi etkileyebilir.
- Önbellekleme uygulanabiliyorsa dinamik ve statik içerik için doğru önbellek stratejisini test edin.
- Gereksiz 301/302 zincirlerini kontrol edin.
- Sunucu günlükleri ve uygulama profilinde yavaş istekleri bulun.
- CDN’nin gerçekten HTML ve görsel dağıtımına katkı sağlayıp sağlamadığını ölçün.
- Önce ölçüm yapmadan yalnız daha pahalı hosting paketine geçmeyin.
Hosting ve alan adı ayrımını domain, hosting ve DNS rehberimizde açıklıyoruz. DNS sağlayıcısını değiştirmek tek başına LCP sorununu gidermeyebilir.
8. CSS, JavaScript ve yazı tipleri LCP’yi nasıl etkiler?
Kritik CSS’nin geç gelmesi, eşzamanlı ve ağır JavaScript, ana öğenin ancak bir istemci betiğinden sonra eklenmesi veya gerekli web fontunun çok geç yüklenmesi LCP öğesini görünür hâle getirmeyi geciktirebilir.
Kullanılmayan kaynakları azaltın, kritik yükleme zincirini basitleştirin ve yalnız gerekli betikleri önceliklendirin. defer, async veya kritik CSS çözümleri her projede aynı sonucu vermez. Form, menü ve etkileşim işlevlerinin optimizasyondan sonra bozulmadığını test edin.
9. WordPress’te LCP iyileştirmek için kontrol listesi
- Sayfanın gerçek LCP öğesini tespit edin.
- Tema ve sayfa oluşturucu tarafından eklenen gereksiz CSS/JS’yi ölçün.
- Hero görselini uygun boyutta ve erken keşfedilebilir biçimde sunun.
- Önbellek eklentisi kullanıyorsanız giriş yapmış kullanıcı, form ve dinamik sayfalardaki davranışı ayrıca test edin.
- Görsel optimizasyonu ve lazy-load eklentilerinin LCP görselini yanlışlıkla geciktirmediğini doğrulayın.
- Uygun sunucu ve CDN önbelleğini test edin; aynı işi yapan birden fazla eklenti yüklemekten kaçının.
- Her değişiklikte aynı URL’nin mobil ve masaüstü ölçümlerini kaydedin.
WordPress’in temel kurulum ve bakım aşamalarını WordPress kurulum rehberimizde bulabilirsiniz.
10. Örnek LCP sorununu nasıl önceliklendirirsiniz?
Varsayımsal bir ana sayfada laboratuvar LCP 4,8 saniye olsun. Analizde büyük hero görselinin HTML’de bulunmadığı, JavaScript’ten sonra yüklendiği ve aynı anda çok sayıda betiğin çalıştığı görülsün. Bu durumda yalnız görsel dosyasını sıkıştırmak yerine önce kaynağı ilk HTML’de keşfedilebilir hâle getirmek ve gerekli yükleme önceliğini ayarlamak daha anlamlı olabilir.
Başka bir sayfada aynı LCP değeri yavaş TTFB nedeniyle oluşabilir. İki sayfanın aynı sayıyı göstermesi aynı çözümü gerektirmez. Başarılı çalışma, hangi gecikme parçasının azaltıldığını ölçümle kanıtlayabilen çalışmadır.
11. LCP, SEO ve kullanıcı deneyimi ilişkisi
LCP, Google’ın Core Web Vitals göstergelerinden biridir; ancak iyi bir LCP skoru tek başına üst sıralarda çıkma garantisi değildir. İçeriğin kullanıcı sorusunu cevaplaması, taranabilirlik, erişilebilirlik ve genel site kalitesi de önemlidir.
Hız optimizasyonunu yalnız puan yükseltme yarışına çevirmeyin. Ziyaretçinin ilk ekranda esas içeriği görebilmesi ve sayfanın düzgün çalışması hedeflenmelidir. Bunun için teknik SEO kontrol listemiz ile performans ölçümlerini birlikte değerlendirin.
Sık sorulan sorular
İyi LCP kaç saniye olmalı?
Gerçek kullanıcıların 75. yüzdelik diliminde 2,5 saniye veya daha düşük LCP iyi kabul edilir.
PageSpeed Insights puanı 100 olursa LCP kesin iyi midir?
Hayır. Laboratuvar puanı ile 28 günlük gerçek kullanıcı verisi aynı şey değildir; mobil ve masaüstü sonuçları da farklı olabilir.
LCP görseline lazy loading uygulanmalı mı?
Hayır. LCP olduğu belirlenen ana görseli tembel yüklemek gereksiz kaynak keşfi gecikmesi oluşturabilir.
LCP ile FCP aynı mı?
Hayır. FCP ilk içerik görüntülenmesini, LCP ise görünür alandaki en büyük uygun içerik öğesinin görüntülenmesini ölçer.
Yeni sitemde neden CrUX verisi yok?
Gerçek kullanıcı veri kümesi için yeterli örnek bulunmuyor olabilir. Laboratuvar testleri ve tarayıcı performans araçları yine kullanılabilir.