Atribut loading="lazy" ngandhani browser kanggo nundha loading gambar utawa iframe nganti wis meh mlebu viewport — ngirit bandwidth lan ngepet muatan awal, tanpa JavaScript.
html
Atribut loading="lazy" ngandhani browser kanggo nundha loading gambar utawa iframe nganti wis meh mlebu viewport — ngirit bandwidth lan ngepet muatan awal, tanpa JavaScript.
lazy — muatan mung nalika scrolling ngebawa cedhak viewport.eager (standar) — muatan langsung, apa apa posisine.Browser nganggo margin (muatan rada sadurunge unsur scroll menyang view) mula gambar biasane siap nalika user weruh.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Tanpa dimensi (utawa aspect-ratio), gambar loading malas ora duwe papan cadangan, mula nalika muatan halaman loncat — nyakiti Cumulative Layout Shift (CLS). Tansah cadang papan.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Loading malas gambar Largest Contentful Paint bener-bener lukai performa — nda eling piksel penting. Loading malas mung media ing layar.
// 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; });
});
loading="lazy"` asli ngilang kabutuhan iki ing umume kasus (senadyan IntersectionObserver isih migunani kanggo logika khusus).
Loading malas asli nyegat bita awal lan pariksa kanggo halaman dawa kanthi akeh gambar — menang mobile gedhe — gratis.
Nuansa penting: cadang dimensi kanggo njaga CLS, lan tansah ndhuwur-fold/LCP gambar eager (malah fetchpriority="high") mula konten penting isih muatan cepet.