Cos'è il lazy loading delle immagini?

Quando una pagina web contiene molte immagini, caricarle tutte all'apertura della pagina appesantisce inutilmente il tempo di caricamento iniziale. Il lazy loading — o caricamento differito — è una tecnica che permette di caricare ogni immagine solo quando l'utente sta per vederla. Semplice da implementare, migliora significativamente le prestazioni del sito e l'esperienza utente.

Definizione di lazy loading

Il lazy loading (letteralmente «caricamento pigro») consiste nel ritardare il caricamento delle risorse non immediatamente visibili sullo schermo. Applicato alle immagini, significa che solo le immagini situate nell'area visibile al momento del caricamento della pagina (il viewport) vengono scaricate immediatamente. Le altre immagini si caricano progressivamente man mano che l'utente scorre la pagina.

Senza lazy loading, il browser scarica tutte le immagini della pagina non appena viene aperta — anche quelle in fondo che l'utente potrebbe non vedere mai.

Come funziona il lazy loading?

Esistono due approcci principali per implementare il lazy loading delle immagini:

1. L'attributo HTML nativo loading="lazy"

Dal 2019, i browser moderni supportano nativamente il lazy loading tramite un semplice attributo HTML:

<img src="photo.jpg" alt="Descrizione" loading="lazy">

Il browser decide automaticamente quando caricare l'immagine in base alla posizione di scroll dell'utente. È il metodo consigliato oggi: non è necessaria alcuna libreria JavaScript.

2. L'Intersection Observer API (JavaScript)

Prima della standardizzazione dell'attributo nativo, gli sviluppatori usavano l'Intersection Observer API per rilevare quando un'immagine entra nel viewport e attivarne il caricamento in quel momento. Questo approccio rimane utile per comportamenti più avanzati o animazioni all'ingresso delle immagini.

Quali sono i vantaggi del lazy loading?

Prestazioni e tempo di caricamento

Riducendo il numero di immagini caricate all'avvio, il lazy loading diminuisce il peso iniziale della pagina e ne accelera il rendering. Le metriche di prestazione come il Largest Contentful Paint (LCP) e il Time to Interactive (TTI) ne risultano migliorate.

Risparmio di banda

Le immagini in fondo alla pagina vengono scaricate solo se l'utente le raggiunge effettivamente. Su una pagina lunga con molti elementi visivi, questo può rappresentare un risparmio significativo — soprattutto per i visitatori su mobile o con connessione lenta.

SEO e Core Web Vitals

Google tiene conto dei Core Web Vitals nel suo ranking. Un LCP migliore, direttamente influenzato dal caricamento delle immagini, può avere un impatto positivo sul posizionamento nei risultati di ricerca.

Lazy loading: cosa non fare

Il lazy loading non è adatto a tutte le immagini. Due errori frequenti sono da evitare:

• Non applicare mai loading="lazy" alle immagini hero o above the fold — queste immagini sono visibili al caricamento, ritardarne la visualizzazione degraderebbe l'LCP e l'esperienza utente.
• Non omettere gli attributi width e height — senza dimensioni definite, il browser non può riservare lo spazio per l'immagine prima del suo caricamento, causando spostamenti del layout (layout shifts) dannosi per il Cumulative Layout Shift (CLS).

Lo sapevi? Per le immagini immediatamente visibili al caricamento (banner, hero image, logo), usa invece l'attributo loading="eager" o ometti semplicemente l'attributo — è il comportamento predefinito del browser.

Compatibilità browser

Lazy loading e hosting immagini

Quando utilizzi un servizio di hosting immagini per archiviare e distribuire i tuoi contenuti visivi, ricorda sempre di includere l'attributo loading="lazy" sulle immagini non immediatamente visibili. Combinare un hosting performante (CDN, compressione automatica) con il lazy loading massimizza la velocità di visualizzazione delle tue pagine.

Lo sapevi? Un servizio di hosting immagini di qualità fornisce URL diretti stabili per ogni immagine, il che facilita l'integrazione del lazy loading: è sufficiente aggiungere loading="lazy" al tag <img> senza modificare l'URL sorgente.