LCP Sorunu: Görseller Geç Yükleniyor — WebP ve Lazy Load Çözümü

Google PageSpeed Insights raporunuzu açtınız ve karşınıza kırmızı bir uyarı çıktı: Largest Contentful Paint (LCP) 4 saniye. Hemen altında da "en büyük içerik öğesi" olarak hero bölümündeki kocaman bir görsel işaretlenmiş. Tanıdık geldi mi? Türkiye'deki web sitelerinin performans sorunlarının büyük çoğunluğu tam olarak buradan, yani geç yüklenen görsellerden kaynaklanır. Bu yazıda LCP'nin görselle olan ilişkisini, sorunun teknik kökenini ve WebP ile lazy load başta olmak üzere uygulanabilir çözümleri tek tek ele alıyoruz.

LCP Nedir ve Neden Genellikle Bir Görseldir?

LCP, bir sayfanın görünür alanında (viewport) yüklenen en büyük içerik öğesinin ekrana çizilme süresini ölçer. Google'ın Core Web Vitals metrikleri arasında en çok başvurulan değerdir çünkü kullanıcının "sayfa açıldı" hissini en iyi temsil eden andır.

LCP öğesi metin bloğu, video poster'ı veya arka plan görseli olabilir; ancak pratikte vakaların ezici çoğunluğunda bu öğe hero alanındaki büyük bir görsel ya da slider'ın ilk karesidir. Çünkü:

• Hero görseli genellikle ekranın en geniş alanını kaplar (büyük öğe = LCP adayı).
• Tasarımcılar bu görseli yüksek çözünürlükte, optimize etmeden yükler.
• Görsel, sayfanın diğer kaynakları (CSS, font, JavaScript) tarafından bloke edilerek sıraya girer.

Google'ın hedef eşiği nettir: iyi bir LCP 2,5 saniyenin altındadır. 2,5–4 saniye arası "iyileştirilmeli", 4 saniyenin üzeri "zayıf" kabul edilir. Görsel kaynaklı bir LCP sorununda hedefiniz, en büyük görseli bu eşiğin altında ekrana getirmektir.

Görsel Neden Geç Yükleniyor? Dört Temel Sebep

LCP iyileştirme çalışmasına başlamadan önce sorunun gerçek kaynağını anlamak gerekir. Geç yüklenen görsel genellikle şu dört nedenden birinden kaynaklanır:

Bu tablodaki son satır en sık yapılan hatadır ve aşağıda ayrı bir başlıkta ele alacağız. Şimdi her bir çözüme sırayla geçelim.

Çözüm 1: Görselleri WebP Formatına Çevirin

Web için tasarlanmış modern bir görsel formatı olan WebP, aynı görsel kalitesinde JPG'ye göre yaklaşık %25-35, PNG'ye göre çok daha fazla küçük dosya üretir. Bu, doğrudan indirme süresini ve dolayısıyla LCP'yi düşürür.

Pratikte ne kadar fark eder?

Diyelim ki hero görseliniz 1,8 MB'lık bir JPG. Aynı görseli kalite kaybı fark edilmeden WebP'ye çevirdiğinizde dosya 600-700 KB'a iner. 3G/yavaş mobil bağlantıda bu, saniyelerle ölçülen bir kazançtır.

Dönüşümü nasıl yaparsınız?

• Toplu dönüşüm araçları: Squoosh (Google'ın açık aracı), ImageMagick (convert resim.jpg resim.webp) veya cwebp komut satırı aracı.
• WordPress kullanıyorsanız: ShortPixel, Imagify veya Converter for Media gibi eklentiler yüklediğiniz tüm görselleri otomatik WebP'ye çevirir ve sunar.
• Sunucu tarafında: DirectAdmin veya Plesk üzerinde barındırılan sitelerde, görselleri yükleme aşamasında WebP üreten bir CMS eklentisi en kolay yoldur.

Eski tarayıcı uyumluluğu için <picture> etiketi

Çok eski tarayıcıların WebP'yi desteklememe ihtimaline karşı <picture> etiketiyle güvenli bir geri dönüş (fallback) tanımlayabilirsiniz:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Açıklayıcı metin" width="1200" height="600">
</picture>

Bu yapı, WebP destekleyen tarayıcılara .webp, desteklemeyenlere .jpg sunar. Pratikte 2026 itibarıyla WebP desteği neredeyse evrenseldir; yeni nesil AVIF formatı ise daha da küçük dosyalar üretir ancak destek oranı henüz WebP kadar yüksek değildir.

Çözüm 2: Lazy Load'u Doğru Kullanın (En Kritik Hata Burada)

Lazy loading (tembel yükleme), ekranda görünmeyen görsellerin yüklenmesini, kullanıcı o noktaya kaydırana kadar ertelemektir. Sayfanın altındaki onlarca görseli baştan indirmek yerine ihtiyaç anında indirmek, başlangıç yükünü ciddi şekilde azaltır.

Modern tarayıcılarda bunu yapmak tek bir özellik kadar basittir:

<img src="alt-bolum.webp" loading="lazy" alt="...">

Ama dikkat: Hero görseline ASLA lazy load koymayın

İşte en sık karşılaşılan ve en zarar veren hata: Birçok WordPress eklentisi veya tema, tüm görsellere ayrım yapmadan loading="lazy" ekler. Bu, LCP öğeniz olan hero görselini de etkiler ve onu erteleyerek LCP'yi düşürmek yerine yükseltir.

Kural basittir:

• İlk ekranda (above the fold) görünen görsellere lazy load KOYULMAZ. Bunlar loading="eager" ile veya hiçbir lazy attribute olmadan, mümkün olan en erken yüklenmelidir.
• İlk ekranın altındaki (below the fold) görsellere lazy load KOYULUR.

Birçok lazy load eklentisinde "ilk N görseli atla" veya "LCP görselini hariç tut" seçeneği bulunur. Bu ayarı mutlaka aktif edin. WordPress 5.5 ve sonrası varsayılan olarak yerel lazy load uygular ama ilk büyük görseli akıllıca atlamaya çalışır; yine de bunu PageSpeed raporuyla doğrulamak şarttır.

Çözüm 3: LCP Görselini Preload ile Öne Çekin

Tarayıcı, HTML'i yukarıdan aşağıya işler ve görselleri ancak ilgili <img> etiketine ulaştığında keşfeder. Eğer hero görseliniz CSS arka planı olarak tanımlıysa veya JavaScript ile geç yükleniyorsa, tarayıcı onu çok geç fark eder.

Bu durumda preload ipucu devreye girer. <head> içine eklenen şu satır, tarayıcıya "bu görseli hemen, yüksek öncelikle indir" der:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

fetchpriority="high" özelliği, görseli diğer kaynakların önüne geçirir. Ancak preload'u yalnızca gerçek LCP görseli için kullanın; her şeyi preload etmek ters teper, çünkü öncelik kuyruğunu tıkar.

Çözüm 4: Görselleri Doğru Boyutlandırın ve Sıkıştırın

Çok yapılan bir israf: 3000 piksel genişliğinde bir görseli, ekranda yalnızca 400 piksel gösterilen bir alana koymak. Tarayıcı tüm 3000 pikseli indirir, sonra küçültür. Çözüm:

• Görseli gösterileceği boyuta yakın üretin. Farklı ekran boyutları için srcset kullanarak tarayıcının uygun boyutu seçmesini sağlayın:

<img src="resim-800.webp"
     srcset="resim-400.webp 400w, resim-800.webp 800w, resim-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="...">

• Her görsele width ve height özniteliklerini mutlaka ekleyin. Bu hem CLS (düzen kayması) metriğini iyileştirir hem de tarayıcının yeri önceden ayırmasını sağlar.
• Sıkıştırma kalitesini JPG/WebP için %75-85 aralığında tutun; bu, gözle fark edilmeyen ama dosyayı küçülten tatlı noktadır.

Çözüm 5: Sunucu ve Altyapı Tarafını İhmal Etmeyin

Görseli ne kadar optimize ederseniz edin, onu kullanıcıya teslim eden katman yavaşsa LCP yüksek kalır. Burada şu noktalara dikkat edin:

• TTFB (ilk bayta kadar geçen süre): Sunucunuz ilk yanıtı geç veriyorsa görsel de geç başlar. Yavaş bir paylaşımlı hosting veya overselling yapılmış bir sunucu burada en büyük gizli düşmandır.
• Tarayıcı önbelleği: Görsellere uzun Cache-Control süresi tanımlayarak tekrar ziyaretlerde anında yüklenmelerini sağlayın. DirectAdmin ve Plesk üzerinde bu, .htaccess veya sunucu yapılandırmasıyla ayarlanabilir.
• HTTP/2 veya HTTP/3: Görsellerin paralel indirilmesini hızlandırır; modern hosting paketlerinde varsayılan olarak aktiftir.
• CDN: Görselleri ziyaretçiye coğrafi olarak en yakın sunucudan dağıtarak gecikmeyi azaltır. Türkiye'deki ziyaretçilere yurt içi konumlu sunucudan hizmet vermek de fiziksel mesafeyi kısaltarak benzer bir kazanç sağlar.

Adım Adım Kontrol Listesi

LCP'nizi düşürmek için izleyeceğiniz sıra şöyle olmalı:

1. PageSpeed Insights veya web araçlarıyla hangi öğenin LCP olduğunu tespit edin.
2. O öğe bir görselse, dosya boyutunu kontrol edin (1 MB üzeri ise alarm).
3. Görseli WebP'ye çevirin ve %75-85 kalitede sıkıştırın.
4. Hero görseline lazy load uygulanmadığından emin olun; alt bölümlere uygulayın.
5. LCP görseli için preload + fetchpriority="high" ekleyin.
6. width, height ve srcset ile doğru boyutlandırın.
7. Önbellek ve CDN ayarlarını gözden geçirin.
8. Değişiklikten sonra raporu yeniden çalıştırıp sonucu doğrulayın.

Bu adımları sırayla uyguladığınızda, görsel kaynaklı LCP sorununu çoğu zaman 4 saniyenin üzerinden 2,5 saniyenin altına çekmek mümkündür. Unutmayın: LCP iyileştirme tek seferlik bir işlem değil, içerik ekledikçe tekrar gözden geçirilmesi gereken bir disiplindir.

Hızını Test Etmek ve Doğru Altyapıya Geçmek İçin

Sitenizin LCP, CLS ve genel performans skorunu ölçmek için ücretsiz web araçlarımızı kullanabilir, Site Hız Testi ile somut rakamları görebilirsiniz. Görselleri optimize ettiğiniz halde TTFB'niz hâlâ yüksekse sorun büyük ihtimalle altyapıdadır; bu durumda hızlı disklerle ve modern PHP sürümleriyle gelen hosting paketlerimizi ya da daha fazla kaynak isteyen projeler için yurt dışı sanal sunucularımızı değerlendirebilirsiniz. Optimizasyon adımlarında takıldığınız bir nokta olursa bilgi bankamıza göz atabilir veya uzaktan canlı destek ile ekran paylaşarak ekibimizden yardım alabilirsiniz. Sorularınız için her zaman iletişime geçebilirsiniz.

📚 İlgili Rehberler

Ana rehber: WordPress Sitesi Nasıl Hızlandırılır? Önbellek, CDN ve Görsel Optimizasyonu

İlgili yazılar:

• Site Hız Testi Nasıl Yapılır ve Sonuçları Nasıl Yorumlanır? (PageSpeed, LCP, CLS)
• Hosting Uptime Neden Önemli? %99.9 Garantisi Gerçekte Ne Anlatır?
• CDN nedir, sitenize gerçekten gerekli mi?