İçindekiler
  1. Lazy Loading Nasıl Çalışır?​
  2. Lazy Loading Ne İşe Yarar?​
  3. Lazy Loading Nerelerde Kullanılır?​
  4. Lazy Loading Türleri​
  5. Lazy Loading Nasıl Yapılır?​
  6. 1. HTML ile (En Basit Yöntem)​
  7. 2. JavaScript ile (Daha Gelişmiş)​
  8. Lazy Loading SEO’ya Zararlı mı?​
  9. Lazy Loading Kullanırken Yapılan Hatalar​
  10. Lazy Loading Ne Zaman Kullanılmalı?​
  11. Lazy Loading Kullanmalı mısın?​
Web sitelerinde hız, kullanıcı deneyimini doğrudan etkileyen en kritik unsurlardan biridir. Özellikle görsellerin ve videoların yoğun olduğu sayfalarda, tüm içeriklerin aynı anda yüklenmesi siteyi yavaşlatır. İşte burada lazy loading (tembel yükleme) devreye girer.

Lazy Loading Nasıl Çalışır?​

Lazy loading, sayfadaki içerikleri (özellikle görselleri ve iframe’leri) kullanıcı ekranına gelene kadar yüklemeyen bir tekniktir.
Yani kullanıcı sayfayı aşağı kaydırdıkça içerikler yüklenir. Böylece:
  • İlk açılış süresi ciddi şekilde azalır ⚡
  • Gereksiz veri kullanımı önlenir 📉
  • Kullanıcı deneyimi artar 📈

Lazy Loading Ne İşe Yarar?​

Lazy loading sadece hız değil, birçok avantaj sağlar:
  • Sayfa açılış süresini düşürür
  • Sunucu yükünü azaltır
  • Mobil kullanıcılar için veri tasarrufu sağlar
  • SEO performansını dolaylı olarak iyileştirir
  • Core Web Vitals skorlarını olumlu etkiler

Lazy Loading Nerelerde Kullanılır?​

En yaygın kullanım alanları:
  • Görseller (img)
  • Videolar (iframe / video)
  • Reklam alanları
  • Uzun liste içerikleri (blog, forum, e-ticaret ürünleri)

Lazy Loading Türleri​

TürAçıklamaKullanım Alanı
Native Lazy LoadingTarayıcı destekli, loading="lazy" ile çalışırBasit projeler
JavaScript Lazy LoadingJS kütüphaneleri ile kontrol edilirGelişmiş siteler
Intersection ObserverModern ve performanslı yöntemProfesyonel projeler
Placeholder (Blur)Görsel önce bulanık gelir sonra netleşirUX odaklı tasarımlar

Lazy Loading Nasıl Yapılır?​

1. HTML ile (En Basit Yöntem)​

<img src="resim.jpg" loading="lazy" alt="örnek">
Ekstra kod gerekmez. Modern tarayıcılar destekler.

2. JavaScript ile (Daha Gelişmiş)​

Intersection Observer API kullanılır:
Kod: 
const images = document.querySelectorAll("img");

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.src = entry.target.dataset.src;
    }
  });
});

images.forEach(img => observer.observe(img));

Lazy Loading SEO’ya Zararlı mı?​

Doğru uygulanırsa zararlı değil, aksine faydalıdır 👍
Ama dikkat edilmesi gerekenler:
  • Görsellerin src yerine data-src kullanılması yanlış yapılandırılırsa Google göremeyebilir
  • Önemli içerikler lazy load yapılmamalı (örneğin üst kısımdaki görseller)
  • <noscript> etiketi ile alternatif sunmak iyi bir pratiktir

Lazy Loading Kullanırken Yapılan Hatalar​

  • Tüm sayfayı lazy load yapmak (yanlış ❌)
  • Above-the-fold içerikleri geciktirmek
  • SEO botlarını düşünmeden uygulamak
  • Eski tarayıcı desteğini göz ardı etmek

Lazy Loading Ne Zaman Kullanılmalı?​

Şu durumlarda kesin kullanılmalı:
  • Çok fazla görsel varsa
  • Uzun içerik sayfaları varsa
  • E-ticaret veya forum sitesi yönetiliyorsa
  • Mobil kullanıcı oranı yüksekse

Lazy Loading Kullanmalı mısın?​

Eğer siten:
  • Yavaş açılıyorsa
  • Görseller ağırlıktaysa
  • Mobil performansı düşükse
👉 Lazy loading artık bir seçenek değil, zorunlu optimizasyonlardan biri haline gelmiş durumda.