Caricamento differito delle immagini: loading=lazy

<img loading="lazy" src="..."> indica al browser di rimandare il download dell'immagine finché non sta per entrare nel viewport. Il supporto nativo in tutti i browser moderni ne fa il più semplice intervento per migliorare le prestazioni delle pagine ricche di immagini.

I browser usano un piccolo margine euristico, di solito qualche migliaio di pixel sotto la piega. L'immagine inizia a caricarsi abbastanza presto da essere completamente renderizzata quando l'utente vi arriva scorrendo: il caricamento differito è invisibile a chi scorre con attenzione.

Non imposti mai loading="lazy" sulle immagini visibili inizialmente o sull'immagine candidata per l'LCP (Largest Contentful Paint). Il caricamento differito ritarda l'elemento visivo più importante, peggiorando sia la velocità percepita sia i Core Web Vitals.

Perché il caricamento differito sia efficace, assegni a <img> valori espliciti per width e height oppure utilizzi la proprietà CSS aspect-ratio. Senza dimensioni, il browser non può riservare spazio, lo scorrimento provoca il ricalcolo del layout e l'euristica del caricamento differito non funziona correttamente.

Lo stesso attributo funziona su <iframe>. <iframe loading="lazy"> rimanda il caricamento di mappe, video e incorporamenti social sotto la piega, ognuno dei quali altrimenti caricherebbe megabyte di JavaScript di terze parti a ogni visualizzazione della pagina.

Il valore predefinito è loading="eager" (carica immediatamente) e raramente viene scritto in modo esplicito. Impostare eager sulle immagini visibili inizialmente può essere utile come documentazione, segnalando ai revisori che la scelta di eager è stata deliberata.

Il caricamento differito si integra perfettamente con le immagini responsive. Il browser sceglie comunque il candidato corretto da srcset; ne rimanda soltanto il download. Non è necessaria alcuna sincronizzazione aggiuntiva tra loading="lazy" e srcset.

Abbini il caricamento differito a decoding="async" per consentire al browser di decodificare l'immagine al di fuori del thread principale. In questo modo si evita di bloccare l'input durante lo scorrimento, quando molte immagini arrivano simultaneamente dopo una lunga raffica di scorrimento.

CSS background-image non può essere caricato in modo differito nativamente. Per gli sfondi hero visibili inizialmente non è un problema; per gli sfondi sotto la piega usi IntersectionObserver per inserire l'URL quando l'elemento si avvicina al viewport.

Quando la pagina viene stampata, il browser carica immediatamente ogni immagine, indipendentemente da loading="lazy", così la copia stampata è completa. Non è necessario gestire separatamente le immagini a caricamento differito nei fogli di stile per la stampa.

L'audit "Defer offscreen images" di Lighthouse elenca tutte le immagini che dovrebbero avere loading="lazy". Filtrando il pannello Network per "Img" e usando la vista "Waterfall" si possono osservare i caricamenti scaglionati prodotti dal caricamento differito: nelle gallerie di immagini le richieste iniziali diminuiscono drasticamente.

Perché è dannoso impostare loading="lazy" su un'immagine hero nella parte superiore della pagina?

Impostare loading="lazy" sugli elementi <img> e <iframe> fuori dal viewport è un miglioramento delle prestazioni ottenuto con un solo attributo. Lo abbini a width/height espliciti (per riservare spazio), srcset (per la responsività) e decoding="async" (per mantenere fluido lo scorrimento). Non lo applichi mai all'immagine LCP o a qualsiasi elemento visibile nel viewport iniziale.