Attributtet loading="lazy" forteller nettleseren å utsette lasting av et bilde eller iframe til det er i ferd med å komme inn i visningsområdet — sparer båndbredde og øker initiell lasthastighet, uten JavaScript.
html
Attributtet loading="lazy" forteller nettleseren å utsette lasting av et bilde eller iframe til det er i ferd med å komme inn i visningsområdet — sparer båndbredde og øker initiell lasthastighet, uten JavaScript.
lazy — last bare når scrolling bringer det nær visningsområdet.eager (standard) — last umiddelbart, uavhengig av posisjon.Nettleseren bruker en margin (laster litt før elementet scrolles inn i bildet) slik at bildet vanligvis er klart når brukeren ser det.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Uten dimensjoner (eller en aspect-ratio), har det lat lastede bildet ingen reservert plass, så når det laster hopper siden — noe som skader Cumulative Layout Shift (CLS). Reserver alltid plass.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Lat lasting av Largest Contentful Paint bildet skader faktisk ytelsen — det forsinker de viktigste pikslene. Lat-last bare medier utenfor skjermen.
// 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; });
});
Nativ loading="lazy" fjernet behovet for dette i de fleste tilfeller (selv om IntersectionObserver fortsatt er nyttig for egendefinert logikk).
Nativ lazy loading reduserer initiale bytes og forespørsler for lange sider med mange bilder — en stor mobilseier — gratis.
Nyanser er viktige: reserver dimensjoner for å beskytte CLS, og hold innhold over folden/LCP bilder eager (selv fetchpriority="high") slik at viktig innhold fortsatt laster raskt.