WPHizmet

LCP Nedir? WordPress’te Largest Contentful Paint Nasıl Düzeltilir?

Yayınlandı:
Son teknik kontrol:
2.5 dk okuma

Hız ve Performans

Kısa cevap

LCP (Largest Contentful Paint), sayfanın görünen alanındaki en büyük görsel veya metin bloğunun ne kadar sürede çizildiğini ölçer; iyi değer 2,5 saniye veya altıdır. LCP’yi düzeltmenin yolu önce süreyi dört parçaya ayırmaktır: sunucunun ilk yanıtı (TTFB), LCP görselinin indirilmeye başlanana kadar geçen gecikme, indirme süresi ve çizim gecikmesi. WordPress’te en sık iki neden, önbelleksiz yavaş sunucu yanıtı ve LCP görselinin geç keşfedilmesidir (lazy-load veya kaydırıcı içinde kalması).

Önemli noktalar

  • LCP öğesi sayfadan sayfaya değişir: çoğu zaman üst görsel, bazen büyük bir başlık metnidir.
  • Süreyi dört parçaya ayırmadan yapılan optimizasyon, gecikmeyi bir parçadan diğerine kaydırabilir.
  • LCP görseli lazy-load edilmemeli; tarayıcının onu erken keşfetmesi gerekir.
  • WordPress 6.3’ten beri çekirdek, muhtemel LCP görseline otomatik olarak fetchpriority="high" ekler.
  • Yavaş sunucu yanıtı (TTFB) varsa görsel optimizasyonu tek başına LCP’yi kurtarmaz.

LCP öğesini bulmak

  1. PageSpeed Insights’ı çalıştırın

    Sonuçlarda “Largest Contentful Paint öğesi” tanılaması, hangi öğenin LCP sayıldığını ve sürenin alt parçalara dağılımını gösterir.

  2. Mobil ve masaüstünü ayrı okuyun

    Ekran boyutu değişince LCP öğesi de değişebilir: masaüstünde yan görsel, mobilde başlık metni olabilir.

  3. Alan verisine bakın

    Sayfanın üstündeki gerçek kullanıcı verisi (son 28 gün) Google’ın değerlendirdiği değerdir; laboratuvar ölçümü teşhis içindir.

Dört alt parça ve WordPress’teki karşılıkları

Alt parçaNeyi ölçerWordPress’te tipik nedenNe yapılır
TTFB (ilk bayt süresi)HTML’in ilk baytının gelmesiSayfa önbelleği yok, yavaş hosting, ağır eklentilerSayfa önbelleği, güncel PHP, ağır eklentilerin ayıklanması
Kaynak yükleme gecikmesiHTML gelince LCP görselinin indirilmeye başlaması için geçen süreGörsel lazy-load edilmiş, kaydırıcı/JS ile ekleniyor, CSS arka planıGörseli HTML’de <img> olarak verin, lazy-load’dan çıkarın, gerekirse önceden yükleyin
Kaynak yükleme süresiGörselin kendisinin indirilmesiOlması gerekenden büyük, eski biçimde görselDoğru boyut ve WebP/AVIF — resim optimizasyonu
Öğe çizim gecikmesiGörsel indikten sonra ekrana çizilmesine kadar geçen süreOluşturmayı engelleyen CSS/JS, geç yüklenen yazı tipi, JS ile açılan içerikKritik olmayan betikleri erteleyin, gereksiz CSS’i azaltın
Alt parçalar web.dev “Optimize LCP” rehberindeki ayrıma göre

LCP görseli: lazy-load ve fetchpriority

WordPress 5.5’ten beri içerikteki görseller varsayılan olarak lazy-load edilir; 5.9 ile başlayan ve 6.2, 6.3’te süren çalışmalarla çekirdek, ilk ekranda görünen görsellerde lazy-load’u atlamaya ve muhtemel LCP görseline fetchpriority="high" eklemeye başladı. Ancak bu otomatik tespit, görseli temanın veya sayfa oluşturucunun nasıl bastığına bağlıdır. Sık görülen sorunlar:

  • Bir “lazy load” eklentisi veya optimizasyon ayarı, çekirdeğin kararını ezip üstteki görseli de lazy-load ediyor.
  • Üst görsel bir kaydırıcının içinde; kaydırıcının betiği yüklenmeden görsel görünmüyor.
  • Görsel CSS arka planı olarak verilmiş; tarayıcı onu ancak CSS indirilip işlendikten sonra keşfediyor.
  • Sayfa oluşturucu, ilk bölümdeki görseli JavaScript ile yerleştiriyor.
İlk ekrandaki (LCP) görsel için doğru işaretleme
<img src="/wp-content/uploads/kapak-1200x630.webp"
     width="1200" height="630"
     fetchpriority="high"
     alt="…">
<!-- loading="lazy" YOK: ilk ekrandaki görsel hemen yüklenmeli -->

Sunucu yanıtı (TTFB) yüksekse

TTFB, LCP’nin en büyük parçasıysa sorun ön yüzde değil sunucudadır: her ziyaret için PHP ve veritabanı baştan çalışıyordur. Sayfa önbelleği bu parçayı en çok küçülten adımdır. Önbellek kurulu olduğu hâlde TTFB yüksekse önbelleğin gerçekten sayfa sunup sunmadığını (yanıt başlıklarındaki önbellek bilgisini) kontrol edin. Ayrıntılı sıra site hızlandırma rehberinde anlatıldı.

LCP’yi ölçüp birlikte düzeltelim

Hız optimizasyonu hizmetimiz ölçümle başlar; hangi alt parçanın süreyi uzattığını gösterir ve değişiklikleri tek tek doğrular.

WordPress Hız Optimizasyonu

Sık sorulan sorular

LCP öğem bir metin başlığı, görsel optimizasyonu işe yarar mı?
Hayır; metin için indirilecek görsel yoktur. Bu durumda TTFB, oluşturmayı engelleyen CSS/JS ve yazı tipinin geç yüklenmesi belirleyicidir. Yazı tipi yüklenirken metnin sistem yazı tipiyle hemen görünmesi (font-display: swap) çizimi hızlandırır.
Üstteki görseli önceden yüklemek (preload) gerekli mi?
Görsel HTML’de doğrudan <img> olarak yer alıyor ve fetchpriority="high" taşıyorsa genellikle gerekmez. Görsel CSS arka planı veya JavaScript ile ekleniyorsa ve bunu değiştiremiyorsanız preload, tarayıcının onu erken keşfetmesini sağlar.
Kaydırıcıyı kaldırmalı mıyım?
İlk ekrandaki kaydırıcı LCP için en sık sorunlardan biridir; görsel ancak betik yüklenince görünür ve genellikle birden fazla büyük görsel indirilir. Tek, sabit bir üst görsel çoğu sitede hem daha hızlı hem daha anlaşılırdır.

Kaynaklar ve teknik referanslar

Bu içeriği hazırlayan

WPHizmet Ekibi

WordPress teknik ekibi

WPHizmet içeriklerini hazırlayan teknik ekip. Rehberler, WordPress ve WooCommerce sitelerinde günlük olarak karşılaşılan sorunlara dayanır; sürüm, yapılandırma ve gereksinim bilgileri yayın öncesinde resmi dokümantasyondan doğrulanır.

  • WordPress teknik destek
  • Performans ve Core Web Vitals
  • Güvenlik ve zararlı kod temizliği
  • WooCommerce
  • Teknik SEO

İlgili içerikler