Atributul loading="lazy" spune browserului să amâne încărcarea unei imagini sau iframe până când este pe cale să intre în viewport — economisind lățimea de bandă și accelerând încărcarea inițială, fără JavaScript.
html
Atributul loading="lazy" spune browserului să amâne încărcarea unei imagini sau iframe până când este pe cale să intre în viewport — economisind lățimea de bandă și accelerând încărcarea inițială, fără JavaScript.
lazy — încarcă doar când rularea o apropie de viewport.eager (implicit) — încarcă imediat, indiferent de poziție.Browserul folosește o marjă (încarcă puțin înainte ca elementul să se ruleze în vedere) deci imaginea este de obicei gată când utilizatorul o vede.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Fără dimensiuni (sau aspect-ratio), imaginea încărcată leneș nu are spațiu rezervat, deci când se încarcă pagina sare — dăunând Cumulative Layout Shift (CLS). Rezervă întotdeauna spațiu.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Încărcarea leneșă a imaginii Largest Contentful Paint de fapt dăunează performanței — întârzie cel mai important pixel. Încarcă leneș doar media în afara ecranului.
// 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; });
});
Nativul loading="lazy" a eliminat necesitatea acestui lucru în majoritatea cazurilor (deși IntersectionObserver este încă util pentru logica personalizată).
Încărcarea nativă leneșă reduce bytes-uri inițiale și cereri pentru pagini lungi cu multe imagini — o mare victorie pentru mobil — gratuit.
Detaliile conteaza: rezervă dimensiuni pentru a proteja CLS și ține conținutele deasupra pliei/imaginile LCP eager (chiar și fetchpriority="high") deci conținutul important se încarcă în continuare rapid.