IntersectionObserver ile Performanslı Lazy Loading Nasıl Yapılır?

Gözükmeden Yüklen! IntersectionObserver ile Akıllı İçerik Yönetimi

Modern web sitelerinde hız artık bir lüks değil, zorunluluk. Kullanıcılar beklemeyi sevmez, tarayıcıyı yormayı hiç sevmez. İşte tam burada devreye Lazy Loading (tembel yükleme) giriyor: Sayfada sadece görünen içerikler yüklenir, geri kalanlar gerektiğinde çağrılır.
Ama klasik scroll tabanlı çözümler genelde ya karmaşık olur ya da performansı baltalar. Neyse ki 21. yüzyılın süper kahramanı sahnede: IntersectionObserver API!

IntersectionObserver Nedir?

Yani sayfada aşağı kaydıkça bir resim ya da bileşen görünür olduğunda, tarayıcı bize ‘şimdi yükleme zamanı!’ der. Böylece henüz görünmeyen hiçbir içeriği gereksiz yere yüklememiş oluruz.

Avantajı? Daha az veri tüketimi, daha az render yükü, daha mutlu kullanıcılar. 😌

Bu API sadece görseller için değil -- videoları oynatmak, animasyonları tetiklemek, hatta scroll tabanlı analitik event’leri yakalamak için bile kullanılabilir.

Eskiden scroll event’ini sürekli dinleyip “acaba şimdi göründü mü?” diye hesap yapardık. Artık gerek yok. IntersectionObserver bunu bizim yerimize yapıyor.

Basit Bir Lazy Loading Örneği

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      obs.unobserve(img);
    }
  });
}, {
  rootMargin: '100px',
  threshold: 0.1
});

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

Neden IntersectionObserver?

• Performans dostu: scroll event’ine göre çok daha az işlem yapar.
• Temiz kod: Callback tabanlı çalıştığı için karmaşık if/else zincirleri ortadan kalkar.
• SEO + UX dostu: Sayfa yüklenme süresi azalır, Lighthouse skorun artar.
• Gözlem gücü: İstersen her elementin ne zaman yüklendiğini loglayabilir, analitik raporlar oluşturabilirsin.
• Tarayıcı desteği: Chrome, Firefox, Edge, Safari (ve mobil versiyonları) gayet iyi destekliyor. Sadece IE için polyfill gerekir. IE...... 🙃

Lazy Loading’in Ötesinde: Sonsuz Scroll ve Dinamik İçerik

Sonsuz Scroll (Infinite Scrolling)

const sentinel = document.querySelector('#load-more');
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadMoreItems();
});
io.observe(sentinel);

Animasyon Tetikleme

Gelişmiş Ayarlar

• root → Gözlemin yapılacağı kapsayıcı. (Varsayılan: viewport)
• rootMargin → Gözlem alanına + veya - boşluk ekler (örneğin '200px' görseli erken yükletir).
• threshold → Yüzdeye göre tetikleme. 0.5 demek, elementin yarısı görünmeden tetikleme yapma anlamına gelir.

💡 İpucu: LQIP (Low Quality Image Placeholder)
Görseller yüklenmeden önce pikselli veya düşük çözünürlüklü bir önizleme göstermek kullanıcı deneyimini artırır.

<img data-src="highres.jpg" src="lowres.jpg" class="lazy" alt="örnek" />

IntersectionObserver, görsel görünür hale geldiğinde yüksek çözünürlüklü sürümü yükler. Bu sayede kullanıcı bir anda boş kutu görmek yerine yavaşça netleşen bir görselle karşılaşır. Hem estetik hem de psikolojik olarak tatmin edici. 😌

Performans İpuçları

• Aynı Observer nesnesini birden fazla elementte tekrar kullan. Her görsel için ayrı Observer oluşturma.
• Yüklenmiş elementleri unobserve() ile gözlemden çıkar. Belleği boşaltır.
• Lazy loading’i yalnızca ekranda olmayan içerikler için uygula. Ana banner görselini lazy yapmak kullanıcıyı bekletir. Largest Contentful Paint (LCP) skorunu düşürür.
• SSR projelerde (Next.js, Nuxt, vb.) client-side render aşamasında devreye al.

Sık Sorulan: SEO Zarar Görür mü?

<noscript>
  <img src="highres.jpg" alt="örnek" />
</noscript>

Sonuç