Lazy Loading

Lazy loading menunda pemuatan gambar, iframe, atau media sampai elemen mendekati area pandang. Halaman awal jadi lebih ringan dan elemen di bawah fold tidak menghabiskan koneksi pengguna yang mungkin tidak akan menggulir.

Atribut native

<img src="/img/kartu.jpg" alt="Kartu hosting" loading="lazy" decoding="async" width="640" height="360" />
<iframe src="https://www.youtube.com/embed/..." loading="lazy" title="Video tutorial" width="560" height="315"></iframe>

loading="lazy" didukung browser modern dan tidak membutuhkan JavaScript. Tetap sertakan width dan height atau aspect-ratio di CSS untuk mencegah layout shift saat gambar muncul.

Jangan pasang di semua tempat

Gambar LCP, logo utama, atau gambar pertama di atas fold sebaiknya tidak memakai lazy loading. Beri fetchpriority="high" supaya browser memuatnya lebih awal. Kalau elemen penting bergantung pada lazy loading, pengguna dengan koneksi lambat bisa melihat area kosong.

Gambar di carousel yang terlihat juga perlu diuji. Browser kadang menganggapnya di luar viewport sehingga gambar baru dimuat setelah digeser. Untuk pengguna tanpa JavaScript, lazy loading berbasis script tidak berjalan. Gunakan atribut native kalau memungkinkan.

Implementasi JavaScript

Kalau elemen tidak mendukung atribut native, gunakan IntersectionObserver.

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;
    observer.unobserve(img);
  }
}, { rootMargin: "200px" });

document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));

rootMargin membuat gambar mulai dimuat sebelum terlihat. Jangan terlalu besar, karena manfaat penghematan bandwidth jadi hilang.

WordPress dan cache

WordPress 5.5 ke atas menambahkan loading="lazy" otomatis. Anda bisa mengecualikan gambar hero dengan filter wp_lazy_loading_enabled atau menandai gambar tertentu. Plugin optimasi sering punya opsi “skip first image”. Periksa HTML yang dihasilkan, jangan hanya percaya label opsinya.

Lazy loading mengurangi request awal, tapi gambar yang sudah dimuat tetap perlu di-cache. CDN dan browser cache tetap penting.

Yang sering terlewat

Tanpa dimensi, halaman bergeser dan CLS memburuk. Placeholder blur yang berat justru menghapus penghematan. Konten utama yang hanya muncul lewat JavaScript juga berisiko tidak terlihat oleh crawler.

Lazy loading paling efektif jika dikombinasikan dengan optimasi gambar dan CDN. Ukur dampaknya ke Core Web Vitals, bukan hanya jumlah request.

FAQ