Lazy Loading

Lazy Loading adalah teknik menunda pembebanan resource sampai resource tersebut benar-benar dibutuhkan — biasanya saat masuk viewport atau saat user melakukan action tertentu. Tanpa lazy loading, semua gambar di halaman di-download sekalipun user tidak scroll ke bawah. Dengan lazy loading: gambar di-download saat hampir masuk viewport. Implementasi: Images (loading=“lazy” attribute native di browser, atau Intersection Observer API untuk kontrol lebih), Components (React.lazy() + Suspense, dynamic import()), Routes (split per route), dan Data (infinite scroll, pagination). Lazy loading mengurangi initial page load time, menghemat bandwidth user (terutama mobile), dan mengurangi beban server.

Contoh Kode

// Lazy loading gambar (native)
<img src="image.jpg" loading="lazy" alt="Description" />

// Lazy loading component (React)
const HeavyMap = lazy(() => import('./HeavyMap'));

// Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData();
    }
  });
});
observer.observe(document.querySelector('.load-trigger'));