Teknik Lazy Loading Gambar: Optimasi Web Performance

Lazy loading adalah teknik menunda loading gambar sampai gambar tersebut benar-benar dibutuhkan.

Apa Itu Lazy Loading?

Lazy loading adalah optimasi yang hanya memuat gambar ketika pengguna scroll ke area tersebut.

Implementasi Lazy Loading

1. Native Lazy Loading

<img src="gambar.jpg" loading="lazy" alt="Deskripsi">

2. JavaScript Intersection Observer

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

3. Plugin Hugo

Gunakan plugin atau partial khusus untuk lazy loading.

Manfaat Lazy Loading

• Page load lebih cepat
• Mengurangi bandwidth
• Core Web Vitals lebih baik
• User experience meningkat

Kesimpulan

Lazy loading adalah teknik wajib untuk website modern.