Lazy Loading Görseller: SEO ve LCP İçin Doğru Kurulum

Sayfa yükleme süresi hızlı görünse bile Largest Contentful Paint metriklerinde sorun yaşıyorsanız, genellikle web performance çalışmalarında görsel önceliklendirme hataları ile karşılaşıyorsunuz demektir. Birçok sitede lazy loading görseller özelliği tüm site genelinde aktif edilirken, ekranın üst kısmında yer alan hero görseli de yanlışlıkla ertelenmektedir.

Bu hata küçük görünse de kullanıcı deneyimi üzerinde büyük bir etkiye sahiptir. Kullanıcı sayfa başlığını görür ancak ana görselin yüklenmesini beklemek zorunda kalır; tarayıcı ise en önemli kaynağı geç talep eder. 2026 itibarıyla doğru yaklaşım oldukça nettir: ekranın alt kısmında (above the fold alanının dışında) kalan görselleri geciktirin, ancak sayfanın en üstünde görünen LCP görselini önceliklendirin. Teknik kurulum tarafında farkı yaratan ve performans skorlarını iyileştiren temel strateji budur.

Key Takeaways

• Above-the-Fold vs. Below-the-Fold: Reserve lazy loading exclusively for images outside the initial viewport; hero images or primary banner elements should always load immediately to maintain a healthy LCP score.
• Avoid Over-Optimization: Do not apply loading="lazy" to LCP elements, as it forces the browser to delay essential content, negatively impacting perceived load time.
• Modern Performance Tools: Utilize fetchpriority="high" and preload tags for critical hero assets, and always define explicit width and height attributes to prevent layout shifts (CLS).
• Browser-Native Standards: Rely on native HTML attributes (loading="lazy", decoding="async") rather than heavy JavaScript libraries to ensure efficient resource management across modern browsers.

Lazy loading görseller LCP’ye ne zaman yardım eder?

Görseller için lazy loading, sayfa ilk açıldığında hemen görünmeyen offscreen images dosyalarını ertelemek için kullanılan etkili bir yöntemdir. Bu sayede tarayıcı aynı anda daha az kaynak indirir ve ana içeriğin render edilmesi için gerekli bant genişliğini serbest bırakır.

Modern tarayıcılar img ve iframes gibi öğeler için yerleşik destek sunar. Bu durum, çoğu projede hantal bir javascript library kullanımına artık gerek kalmadığını gösterir. Tarayıcı, loading=”lazy” değerini katı bir emir gibi değil, güçlü bir ipucu gibi değerlendirir. Görsel viewport alanına yaklaştığında, native lazy loading mekanizması devreye girerek yükleme işlemini başlatır.

Sorun şu noktada başlar: LCP öğesi çoğu zaman ilk ekrandaki büyük görseldir. Siz bu öğeye lazy loading uygularsanız, tarayıcı görseli ancak sayfa yapısını analiz ettikten sonra keşfeder. Sonuç olarak LCP metriği uzar. web.dev’in LCP optimizasyon rehberi bu konuda açık bir uyarı veriyor:

İlk ekranda görünen hero görseli, ürün kapağı veya ana banner, körü körüne lazy yüklenmemeli.

Lazy loading görseller en çok şu alanlarda işe yarar: içerik içindeki alt görseller, ürün listeleme sayfalarının aşağısında kalan kartlar, galeri görselleri, gömülü videolar ve sayfa altındaki iframe’ler. Buna karşılık hero bölümleri, ilk ürün fotoğrafı, slider’ın ilk karesi ve açılışta görünen logo çevresi genelde lazy yüklenmemelidir.

WordPress ve benzeri sistemlerde otomatik lazy loading sık görülür. Bu kolay bir yöntem olsa da her zaman performans için en güvenli seçenek değildir. Eğer sistem tüm görsellere aynı kuralı uygularsa LCP değerleriniz zarar görebilir. Geniş browser support sayesinde native yöntemler artık standart hale gelmiştir. Daha geniş bir performans planında ise Core Web Vitals odaklı hız optimizasyonu çalışmaları, sadece lazy loading değil, görsel boyutu, önbellekleme ve kaynak önceliği gibi alanları bir bütün olarak ele almalıdır.

Doğru teknik kurulum: HTML, preload ve fetchpriority

Ekran dışında kalan görselleri nasıl işaretlemelisiniz?

En temel ve etkili kurulum, yerleşik tarayıcı desteğinden yararlanmaktır. Görsellerinize mutlaka width ve height değerlerini eklemelisiniz. Bu değerler, tarayıcının görsel yüklenmeden önce sayfa düzeninde gerekli alanı ayırmasını sağlar. Böylece Cumulative Layout Shift (CLS) riskini minimize ederek kullanıcı deneyimini korumuş olursunuz. Görselin boyutları ile viewport içindeki yerleşimi arasındaki uyum, yani doğru aspect ratio kullanımı görsel stabiliteyi destekler.

<img
  src="/images/blog-detay-1200.webp"
  alt="Blog yazısındaki örnek ekran görüntüsü"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async">

Bu yöntem, ekranın alt kısmında kalan standart içerik görselleri için idealdir. decoding=”async” kullanımı, görsel çözümleme işlemlerinin ana iş akışını bloke etmeden gerçekleşmesini sağlayarak sayfa performansını artırır.

Responsive tasarımlarda görselleri yönetmek için srcset ve sizes niteliklerini kullanmak, mobil cihazlara sadece ihtiyaç duydukları boyuttaki dosyaların gönderilmesini sağlar. Daha karmaşık senaryolar için picture element yapısını tercih etmek, farklı cihazlar için daha fazla kontrol imkanı sunar.

<img
  src="/images/urun-1200.webp"
  srcset="/images/urun-640.webp 640w, /images/urun-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Ürün detay görseli"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async">

Tarayıcı davranışını anlamak burada oldukça kritiktir. loading=”lazy” değerini eklediğiniz anda, görsel HTML içerisinde ilk sıralarda yer alsa bile tarayıcı ağ isteğini erteleyebilir. Dolayısıyla bu etiket, dosyanın her zaman hızlı yükleneceği anlamına gelmez.

Hero ve LCP görseli nasıl yüklenmeli?

LCP (Largest Contentful Paint) görseli için stratejiniz tam tersi olmalıdır. Bu görseli kesinlikle lazy loading ile yüklememelisiniz. Bunun yerine tarayıcıya görselin önemini belirtmek için fetchpriority=”high” değerini kullanmalı ve performansı optimize etmek adına preload yönteminden faydalanmalısınız.

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

<img
  src="/images/hero-1600.webp"
  srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w"
  sizes="100vw"
  alt="Ana sayfa hero görseli"
  width="1600"
  height="900"
  fetchpriority="high"
  decoding="async">

Burada iki nokta büyük önem taşır. İlk olarak, aynı görsel etiketi üzerinde loading=”lazy” kullanmıyorsunuz. İkinci olarak, preload ile tarayıcıya bu kaynağın diğer tüm öğelerden önce işlenmesi gerektiğini bildiriyorsunuz.

Hero görseliniz bir CSS arka plan resmi ise loading niteliği işlevsiz kalacaktır. Bu durumda preload çok daha kritik bir hale gelir. Mümkün olan her durumda LCP öğesini CSS arka planı yerine standart bir img etiketiyle sunmak çok daha sağlıklıdır; çünkü tarayıcı görseli çok daha erken keşfeder ve siz de fetchpriority kullanarak yükleme önceliğini tam olarak yönetebilirsiniz.

Doğru kullanım ile yanlış kullanım arasındaki fark

Aşağıdaki tablo, görsellerde lazy loading kararını hızlıca netleştirir.

Durum	Doğru kullanım	Yanlış kullanım	Beklenen etki
İlk ekrandaki hero görseli	Normal yükleme (eager), gerekirse preload ve fetchpriority="high"	loading="lazy" eklemek	LCP iyileşir ya da kötüleşmez
İçerik altındaki blog görselleri	loading="lazy" kullanmak	Hepsini eager yüklemek	İlk açılış hafifler
Ürün kartı görselleri, ilk ekran dışında	Lazy loading + doğru boyut	Boyutsuz ve tam çözünürlüklü yükleme	Daha az ağ yükü, daha az CLS
Görsel boyutları	width ve height tanımlamak	Boyut vermemek	Layout shift azalır
CSS arka plan hero	Preload veya gerçek img kullanmak	Sadece CSS’ye bırakmak	Kaynak daha erken keşfedilir

Tablonun özeti basit: görünmeyeni geciktirin, görünür olanı hızlandırın.

Sahada en sık görülen hata, otomatik optimizasyon eklentisinin viewport içerisinde yer alan ilk görsele de lazy loading eklemesidir. İkinci yaygın hata, aynı görselde hem preload hem lazy kullanmaktır; bu iki komut birbiriyle çelişir. Bir diğer sorun ise boyut tanımlamadan placeholder images kullanmaktır. Görsel sonradan yüklendiğinde, ayrılan kutu aniden büyür ve sayfa içeriği zıplayarak kötü bir kullanıcı deneyimi olan layout shift problemine yol açar.

Slider kullanan sitelerde ilk slayt ayrı düşünülmelidir. İlk slayt çoğu zaman LCP öğesidir, bu yüzden yalnızca sonraki slaytlar lazy olarak işaretlenmelidir. Aynı mantık ürün galerisinde de geçerlidir; açılışta viewport içinde görünen ana fotoğraf eager yüklenmeli, alt kısımdaki küçük görseller ise lazy yükleme stratejisiyle optimize edilmelidir.

Hata senaryoları ve performans testi nasıl yapılmalı?

Kurulum süreci tamamlandığında iş bitmez. Doğru HTML yapısı, yanlış önceliklendirme nedeniyle etkisini kaybedebilir. Bu nedenle değişikliklerden sonra hem laboratuvar verilerini hem de gerçek kullanıcı verilerini (Core Web Vitals) mutlaka analiz etmelisiniz.

Bu kısa kontrol listesi çoğu projede performans takibi için yeterlidir:

1. Lighthouse veya PageSpeed Insights raporunda LCP öğesinin doğru görseli işaret ettiğinden emin olun.
2. Network panelinde, hero görselin isteğinin kritik render yolunu (critical rendering path) tıkamadan, yeterince erken başlayıp başlamadığını kontrol edin.
3. İlk ekranda görünen görselde yanlışlıkla loading=”lazy” etiketinin kalmadığından emin olun.
4. Sayfayı aşağı kaydırarak, ekranın altındaki görsel içeriklerin tetiklenme eşiklerini (thresholds) ve bağlantı hızına bağlı olarak zamanında yüklenip yüklenmediğini test edin.
5. Görsellerin yüklenme sırasında düzeni bozmadığından emin olmak için CLS değerlerini yakından izleyin.

Sık karşılaşılan bir hata, JavaScript tabanlı lazy loading kütüphanesi ile tarayıcının yerleşik lazy loading özelliğinin çakışmasıdır. Bu durumda görsel iki kez yönetilmeye çalışılır ve performans düşer. Günümüzde yerleşik çözümler çoğu ihtiyaç için yeterlidir; kütüphaneler veya Intersection Observer kullanımı sadece karmaşık görünürlük mantığı gereken özel durumlarda tercih edilmelidir. Eski tarayıcıları desteklemek için progressive enhancement (kademeli iyileştirme) yaklaşımı ile data-src kalıplarını kullanabilirsiniz ancak modern projelerde bu yöntem artık hantal kalmaktadır.

Performans sorunlarının kökenine inmek için DevTools üzerindeki şelale (waterfall) görünümünü inceleyin. Eğer hero görselin isteği, kritik olmayan öğeler (non-critical assets) veya ağır JavaScript dosyalarından sonra başlıyorsa, sorun lazy loading kurulumunda değil, kaynağın geç keşfedilmesinde olabilir. Böyle durumlarda preload komutu, HTML içinde doğrudan img kullanımı ve kritik CSS optimizasyonu çok daha fazla fark yaratır.

Ayrıca CDN üzerinden sunulan WebP veya AVIF gibi modern formatların teslimat süreci de test edilmelidir. Görsel formatı optimize edilmiş olsa bile, sunucu yanıt süresi yüksekse LCP yine gecikecektir. Lazy loading özelliğini tek başına bir çözüm olarak görmek yanıltıcıdır. Düzenli kontrol için Core Web Vitals odaklı SEO denetimi veya daha kapsamlı profesyonel teknik SEO uygulamaları yaklaşımı, sorunun görsel önceliğinde mi yoksa genel sayfa mimarisinde mi olduğunu daha net ortaya çıkarır.

Frequently Asked Questions

Neden hero görsellerime lazy loading eklememeliyim?

Hero görselleri genellikle sayfanın Largest Contentful Paint (LCP) öğesidir. Bu görsellere lazy loading eklemek, tarayıcının görseli keşfetmesini ve yüklemesini gereksiz yere geciktirerek sayfanın daha yavaş açılmasına ve kötü bir kullanıcı deneyimine neden olur.

Görsellerde width ve height değerlerini belirtmek neden önemlidir?

Bu değerleri belirtmek, tarayıcının görsel henüz yüklenmeden önce sayfa düzeninde gerekli alanı ayırmasını sağlar. Bu durum, görsel yüklendiğinde içeriğin kaymasını engeller ve Cumulative Layout Shift (CLS) skorunuzu iyileştirir.

Hangi durumlarda fetchpriority=”high” kullanmalıyım?

Tarayıcının önceliklendirmesini istediğiniz kritik öğeler, özellikle de LCP görseliniz için fetchpriority="high" kullanmalısınız. Bu, tarayıcıya söz konusu görselin sayfa yüklenirken diğer öğelerden önce işlenmesi gerektiğini belirten güçlü bir sinyal gönderir.

Native lazy loading ile JS kütüphanelerini birlikte kullanabilir miyim?

Her ikisini de aynı anda kullanmak önerilmez çünkü görsel iki kez yönetilmeye çalışılır ve performans kaybına yol açar. Günümüzde modern tarayıcıların sunduğu yerleşik loading="lazy" özelliği çoğu proje için yeterli ve daha performanslıdır.

Sonuç

Lazy loading görseller, doğru strateji ile uygulandığında web performansı üzerinde doğrudan olumlu bir etki yaratarak kullanıcı deneyimini önemli ölçüde iyileştirir. Ancak bu teknik, yanlış bir şekilde kullanıldığında sayfanın en kritik öğelerini geciktirerek Largest Contentful Paint skorunun düşmesine neden olabilir.

Temel kural oldukça basittir: Ekranın ilk görüntülenen kısmındaki görseller için loading=”lazy” niteliğini kullanmaktan kaçınmalı, yalnızca ekran dışında kalan öğeler için bu yöntemi tercih etmelisiniz. Görsellerinize genişlik ve yükseklik değerlerini tanımlamanın yanı sıra, ihtiyaç duyduğunuz noktalarda preload ve fetchpriority gibi modern araçları entegre etmek, hem SEO performansınızı güçlendirir hem de ilk yükleme metriklerini optimize ederek daha hızlı bir kullanıcı deneyimi sunmanızı sağlar.

This post may contain affiliate links. If you make a purchase through these links, I may earn a small commission at no extra cost to you.