L'attributo loading="lazy" dice al browser di rimandare il caricamento di un'immagine o iframe finché non sta per entrare nel viewport — risparmiando larghezza di banda e accelerando il carico iniziale, senza JavaScript.
html
L'attributo loading="lazy" dice al browser di rimandare il caricamento di un'immagine o iframe finché non sta per entrare nel viewport — risparmiando larghezza di banda e accelerando il carico iniziale, senza JavaScript.
lazy — carica solo quando lo scorrimento la porta vicino al viewport.eager (predefinito) — carica immediatamente, indipendentemente dalla posizione.Il browser usa un margine (carica leggermente prima che l'elemento scorra in vista) quindi l'immagine di solito è pronta quando l'utente la vede.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Senza dimensioni (o un aspect-ratio), l'immagine caricata pigrizia non ha spazio riservato, quindi quando si carica la pagina salta — danneggiando il Cumulative Layout Shift (CLS). Riserva sempre spazio.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Il lazy-loading dell'immagine Largest Contentful Paint in realtà danneggia le prestazioni — rimanda il pixel più importante. Carica pigrizia solo i 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; });
});
Il loading="lazy" nativo ha eliminato la necessità di questo nella maggior parte dei casi (anche se IntersectionObserver è ancora utile per la logica personalizzata).
Il lazy loading nativo riduce i byte iniziali e le richieste per pagine lunghe con molte immagini — una grande vittoria mobile — gratuitamente.
Le sfumature importano: riserva dimensioni per proteggere CLS, e mantieni le immagini above-the-fold/LCP eager (anche fetchpriority="high") così il contenuto importante si carica ancora veloce.