Lazy Load Nedir? Nasıl ve Hangi Durumlarda Kullanılır?

Lazy Load Nedir? Nasıl ve Hangi Durumlarda Kullanılır?

Her gün ortalama bir ziyaretçi, mobilde 900 KB’lık görsel dosyasını yalnızca tek bir sayfanın ilk yüklenme anında indiriyor; masaüstünde bu değer 1 MB’ı geçiyor . Görseller; video, JavaScript ve yazı tiplerini geride bırakarak hâlâ çoğu sitenin en ağır kaynağı. HTTP Archive’ın 2024 Sürdürülebilirlik raporuna göre 90. yüzdelik dilimde sayfa ağırlığının yarısından fazlası görsellerden geliyor . Kullanıcılar ise sabırsız: Google araştırmasına göre yüklenme süresi 1 saniyeden 3 saniyeye yükseldiğinde hemen çıkma olasılığı %32 artıyor . İşte “lazy load” tam bu acı noktada devreye girerek sayfa açılış hızlarını optimize ediyor.

Lazy Load Nedir?

Lazy load, kritik (üstte görünen) içerik dışındaki kaynakları ertelemeli olarak indirme tekniğidir. Tarayıcı ilk etapta yalnızca ekranda görünen bölümü getirir, geri kalanı Viewport’a yaklaştığında yükler. 2025 itibarıyla büyük tarayıcıların %93,7’si yerleşik loading="lazy" özniteliğini destekliyor . Böylece çoğu proje ekstra kütüphane eklemeden doğrudan HTML ile tembel yükleme yapabilir.

İstatistiklerle özetlemek gerekirse:

• Ortalama mobil sayfa yüklemesi: 66 HTTP isteği, bunun 16’sı görsel; toplam görüntü verisi 900 KB. Dolayısıyla görselleri ertelemek kritik öneme sahip.
• 1–3 s’lik gecikme kritik: %32 daha yüksek bounce rate’e neden olur. Bu nedenle her saniye önem arz ediyor.
• Tarayıcı desteği: %93,7 global kullanım desteğine sahip. Neredeyse tüm modern tarayıcılar destekliyor.

Lazy Load Nasıl Kullanılır?

Native Img Etiketi ile Lazy Load

Örnek kod yapısı:

<img

  src="urun.webp"

  alt="Ürün resmi"

  width="640" height="480"

  loading="lazy"

  fetchpriority="low" />

• loading="lazy" → Off-screen resimleri otomatik ertele.
• fetchpriority="low" → Ağ önceliğini düşür; ilk açılan ana görsel high kullanın.
• Genişlik / yükseklik tanımlayarak CLS kaymalarını engelleyin.

Background-Image CSS ile Lazy Load

Arka plan resimleri için HTML öznitelikleri yoktur; Intersection Observer API’si en maliyetsiz yoldur:

<div class="lazy-bg" data-src="banner.webp"></div>

const io = new IntersectionObserver((entries) => {

  entries.forEach(({ isIntersecting, target }) => {

    if (isIntersecting) {

      target.style.backgroundImage = `url(${target.dataset.src})`;

      io.unobserve(target);

    }

  });

});

document.querySelectorAll('.lazy-bg').forEach(el => io.observe(el));

Bu yöntem; SVG sprite, video posteri, hatta reklâm iframe’leri gibi “görünmez” ama ağır kaynaklarda da site hızını artırmaya yardımcı olur. Background image’lar doğrudan SEO anlamında katkı sunmadığı için ertelemelerin herhangi bir negatif etkisi de olmaz.

<picture> ile Adaptif Lazy Load

Modern sitelerde <picture> + srcset sayesinde çözünürlük ve format (WebP/AVIF) uyarlaması yapmak mümkündür:

<picture>

  <source srcset="urun.avif" type="image/avif" loading="lazy">

  <source srcset="urun.webp" type="image/webp" loading="lazy">

  <img src="urun.jpg" alt="Ürün" width="640" height="480" loading="lazy">

</picture>

Tarayıcı en iyi formatı seçer, yine Viewport’a kadar bekler.

JavaScript Kütüphaneleri

Popülerliğin sebebi basit: Native çözümden daha esnek konfigürasyon, esnek threshold değerleri ve geri uyumluluk katmanları sunmaları. Lazysizes kütüphanesi şu anda en çok tercih edilen JS kütüphanesi konumunda yer alıyor.

Lazy Load Hangi Görsellerde Kullanılmalıdır?

• Ana görsel / LCP Görseli: Hayır. LCP süresine doğrudan etki eder; yanlış kullanım %15’e varan LCP gerilemesine sebep olabilir.
• Makale içi resimler: Evet. Kullanıcılar kaydırma yapnadan görülmezler.
• Galeri & Grid: Evet. Kullanıcı tüm kareleri açmayabilir.
• Küçük ikon & sprite: Hayır. Boyut küçük, ek gecikme fayda getirmez.
• Reklâm iframe’leri / harita embed’leri: Evet. Reklâm gösteriminde herhangi bir sorun yaşanmaz. Kullanıcı reklamın olduğu kısma geldiğinde reklamı görebilir.

Lazy Load Kullanmanın Avantajları Nelerdir?

Sayfa Yüklenme Süresi Kısalır

Renault’un Core Web Vitals özelinde yaptığı çalışma, lazy load kullanımının önemini bir kez daha ortaya koymuş oldu. Yapılan çalışma neticesinde LCP değerleri çok daha iyi bir hale geldi. Sayfa yükleme değerlerini kısaltması, kullanıcı deneyimine de olumlu yansıdı. Dolayısıyla sayfa yükleme sürelerini kısaltmak için lazy load kullanımı son derece verimli.

Tarayıcının Yükü Azalır

Gönderilmeyen byte’lar CPU ve RAM’e de yük bindirmez. Düşük bütçeli Android cihazlarda “donma” hissi azalır. Ne kadar az yük, o kadar iyi kullanıcı deneyimi.

HTTP İstek Sayısı Azalır

Mobil sayfa yüklemesinde ilk boyaya kadar 66 isteğin 16’sı resimlere harcanır . Lazy load ile bu isteklerin büyük kısmı ertelenerek ağ tıkanıklığı önlenir. Önemli isteklerin önceliklendirilmesi ve diğerlerinin ertelenmesi ile akıcı bir açılış deneyimi sunulur.

SEO ve Core Web Vitals Kazancı

Google; LCP, CLS ve Interaction to Next Paint (INP) metriklerini çekirdek sıralama sinyali olarak kullanıyor. Ertelenmiş görseller hem LCP’yi iyileştirir hem de CLS bozulmasını engeller.

Verimlilik ve Maliyet

HTTP Archive’a göre masaüstü sayfa ağırlığı yılda %8,6 artıyor. Mobilde 140 KB ek yük, düşük bant genişliğine sahip bölgelerde gerçek para maliyeti demek. Lazy load; veri transferinin büyük bölümü gereksizse, hem kullanıcı faturası hem karbon ayak izi için doğrudan tasarruf sağlar.

Lazy Load Hangi Sitelerde Kullanılmalıdır?

Temel formül: Ekranda görünmeden “değer” üretmeyen her medya öğesi lazy load’dan yararlanılabilir.

WordPress’te Lazy Load Eklentisi Nasıl Kurulur?

WordPress 5.5+ çekirdeği <img> ve <iframe> etiketlerine otomatik loading="lazy" ekler. Daha fazlasını isteyenler için:

1. Eklentiler → Yeni Ekle menüsüne gidin.
2. Arama kutusuna “a3 Lazy Load” veya “Smush” yazın.
3. Kur → Etkinleştir adımlarını tamamlayın.
4. Eklenti ayarlarında “background-image”, “iframe”, “video” kutucuklarını isteğe göre işaretleyin.
5. WP Rocket, LiteSpeed Cache gibi önbellek eklentilerinde çakışan Lazy Load seçeneklerini kapatın. Birden fazla eklentinin lazy load özelliği eklemeye çalışması çökmeye yol açar.

WordPress, küresel web sitelerinin %43,5’ini barındırıyor; dolayısıyla varsayılan tembel yükleme davranışı milyonlarca siteyi doğrudan etkiliyor.

Lazy Load Hakkında Sık Sorulan Sorular

Lazy load SEO’ya zarar verir mi?
Hayır. Googlebot HTML’deki <img> etiketini görür; dosyayı indirmesi gerekmez. Doğru alt ve src kullanıldığı sürece taranabilir

loading="lazy" tüm cihazlarda çalışıyor mu?
Evet; global destek %93,7. Desteklemeyen eski tarayıcılar, özniteliği yok sayarak normal (eager) yükleme yapar.

Ana görselleri tembel yüklemek neden kötü?
Ana görsel genellikle LCP öğesidir; tembel yüklemek LCP’yi %15’e kadar yavaşlatabilir. Bunun yerine ilk görüntüyü olabildiğince hızlı yüklemek gerekir.

JavaScript kapalıysa ne olur?
Native loading="lazy" JavaScript gerektirmez, çalışmaya devam eder. IO tabanlı özel scriptler ise fallback olarak tüm resimleri hemen indirir.

Lazy load performansı gerçekten artırır mı?
Evet. Sadece kat-fold altı görselleri ertelemek, genellikle LCP’yi ölçülebilir biçimde iyileştirir.

Kaynaklar:

Lazy loading via attribute for images & iframes – Can I Use caniuse.com

Sustainability (2024 Web Almanac) – HTTP Archive almanac.httparchive.org

Page Load Time Statistics – Think with Google Think with Google

lazysizes (NPM package page) npm

Renault Core Web Vitals Case Study – web.dev web.dev

Lazy Loading – MDN Web Docs MDN Web Docs

Media (2024 Web Almanac) – HTTP Archive almanac.httparchive.org

LCP & Lazy Loading Best Practices – web.dev web.dev