Atribut loading="lazy" memberitahu browser untuk menunda loading gambar atau iframe sampai akan memasuki viewport — menghemat bandwidth dan mempercepat loading awal, tanpa JavaScript.
Atribut loading="lazy" memberitahu browser untuk menunda loading gambar atau iframe sampai akan memasuki viewport — menghemat bandwidth dan mempercepat loading awal, tanpa JavaScript.
lazy — load hanya ketika scrolling membawanya dekat viewport.eager (default) — load segera, terlepas dari posisi.Browser menggunakan margin (load sedikit sebelum elemen masuk) sehingga gambar biasanya siap ketika pengguna melihatnya.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Tanpa dimensi (atau aspect-ratio), gambar yang dimuat malas tidak memiliki ruang yang dipesan, jadi ketika dimuat halaman melompat — merusak Cumulative Layout Shift (CLS). Selalu pesan ruang.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lazy-loading gambar Largest Contentful Paint sebenarnya merusak performa — menunda piksel paling penting. Lazy-load hanya untuk media off-screen.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Native loading="lazy" menghilangkan kebutuhan akan ini di sebagian besar kasus (meskipun IntersectionObserver masih berguna untuk logika kustom).
Native lazy loading mengurangi byte awal dan request untuk halaman panjang dengan banyak gambar — kemenangan besar mobile — gratis.
Nuansa penting: pesan dimensi untuk melindungi CLS, dan jaga gambar di atas lipatan/LCP tetap eager (bahkan fetchpriority="high") sehingga konten penting masih loading cepat.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi