Bagaimana native lazy loading gambar/iframe bekerja?

Question

Accepted Answer

Atribut `loading="lazy"` memberitahu browser untuk **menunda loading** gambar atau iframe sampai akan memasuki viewport — menghemat bandwidth dan mempercepat loading awal, tanpa JavaScript. ```html

``` ## Cara kerjanya - **`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. ## Pasangan penting: atur width/height untuk menghindari layout shift ```html

``` 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. ## Jangan lazy-load konten di atas lipatan ```html

``` Lazy-loading gambar **Largest Contentful Paint** sebenarnya *merusak* performa — menunda piksel paling penting. Lazy-load hanya untuk media off-screen. ## Sebelum native: IntersectionObserver ```js // 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). ## Mengapa ini penting 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.