Lazy Loading

Lazy loading berarti menunda pemuatan resource sampai resource tersebut benar-benar dibutuhkan. Ini mengurangi initial page load secara signifikan.

Native Lazy Loading

HTML sudah mendukung lazy loading secara native untuk gambar dan iframe:

<!-- Gambar lazy loaded -->
<img src="photo.jpg" loading="lazy" alt="Foto">

<!-- Iframe lazy loaded -->
<iframe src="video.html" loading="lazy"></iframe>

Kapan Menggunakan

• Gunakan loading="lazy" untuk gambar/iframe di bawah fold (tidak terlihat saat pertama kali load)
• Jangan gunakan untuk LCP element (hero image, banner utama) — ini justru memperlambat LCP!
• Jangan gunakan untuk gambar di atas fold yang langsung terlihat

Intersection Observer

Untuk lazy loading yang lebih advanced (komponen, data, dll), gunakan Intersection Observer API:

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

document.querySelectorAll(".lazy").forEach(el => observer.observe(el));