Il lazy loading (caricamento differito) è una tecnica che consiste nel caricare le immagini e le risorse di una pagina web solo quando stanno per essere visualizzate sullo schermo, anziché caricare tutto in una volta al primo rendering. Per gli store e-commerce con decine o centinaia di immagini prodotto, questa ottimizzazione riduce drasticamente il peso iniziale della pagina e migliora le prestazioni percepite dai visitatori.
Come funziona il lazy loading?
Senza lazy loading, il browser scarica tutte le immagini presenti nell'HTML al caricamento iniziale — incluse quelle situate in fondo alla pagina che il visitatore potrebbe non vedere mai. Con il lazy loading, vengono caricate solo le immagini visibili nel viewport o nelle immediate vicinanze. Le altre restano in attesa finché l'utente non scorre fino a quella posizione.
Il risultato è immediato: la pagina si visualizza più velocemente, vengono consumati meno dati e il server riceve meno richieste simultanee. Su una pagina di listing prodotti PrestaShop con 40 articoli, questo può ridurre il numero di immagini caricate all'ingresso da 40 a sole 6-8 — un risparmio di peso considerevole.
Il lazy loading nativo HTML: l'attributo loading="lazy"
Dal 2019–2020, tutti i browser moderni supportano nativamente il lazy loading tramite un semplice attributo HTML sul tag img: `loading="lazy"`. È sufficiente aggiungere questo attributo perché il browser gestisca automaticamente il caricamento differito, senza JavaScript né librerie di terze parti.
Esempio: `
`. Specificare gli attributi width e height è importante: consente al browser di riservare lo spazio nel layout prima che l'immagine venga caricata, evitando così gli spostamenti visivi (CLS — Cumulative Layout Shift).
L'approccio JavaScript: l'API Intersection Observer
Prima del supporto nativo — e ancora oggi per casi d'uso avanzati — il lazy loading veniva implementato tramite l'API JavaScript Intersection Observer. Questa API rileva con precisione quando un elemento del DOM entra nel viewport e attiva in quel momento il caricamento dell'immagine. Offre un maggiore controllo: è possibile definire un margine di attivazione (ad esempio, iniziare a caricare 300px prima che l'immagine entri nello schermo) per eliminare qualsiasi effetto di flash visivo.
Non applicare mai il lazy loading alle immagini above-the-fold!
Impatto sui Core Web Vitals
Il lazy loading applicato correttamente migliora diverse metriche Core Web Vitals. Riduce il peso totale caricato inizialmente, migliorando il LCP (Largest Contentful Paint) per le immagini above-the-fold — il browser dedica la propria larghezza di banda alle risorse prioritarie invece di distribuirla su tutte le immagini della pagina. Riduce anche il TBT (Total Blocking Time) diminuendo l'elaborazione di rete iniziale.
Al contrario, applicato in modo errato — in particolare lazy-loadando l'immagine hero — può far aumentare drasticamente il LCP. È uno degli errori più frequenti rilevati negli store PrestaShop auditati: un tema che applica loading="lazy" a tutte le immagini indiscriminatamente, peggiorando proprio la metrica che si intendeva migliorare.
Google indicizza le immagini in lazy loading?
Sì. Googlebot è in grado di vedere e indicizzare le immagini caricate tramite lazy loading. Google ha confermato che il suo crawler esegue JavaScript e attende l'attivazione dei caricamenti differiti. È tuttavia consigliato utilizzare il lazy loading nativo HTML (attributo loading) piuttosto che un'implementazione JavaScript personalizzata per garantire una indicizzazione ottimale.
Lazy loading e CDN: una combinazione vincente
Lazy loading in PrestaShop
PrestaShop non offre un lazy loading nativo attivabile con un clic nel back office. L'implementazione dipende dal tema utilizzato. I temi recenti (Classic 1.7+, Hummingbird) includono generalmente l'attributo loading="lazy" sulle immagini di listing. Se il vostro tema non lo prevede, è necessario modificare i template Smarty interessati oppure installare un modulo dedicato.
- Immagini di listing (categorie, ricerca, novità): ideali per il lazy loading — si trovano spesso al di fuori del viewport iniziale
- Immagine principale della scheda prodotto: NON applicare il lazy loading — è spesso l'elemento LCP della pagina
- Miniature nel carrello o nei blocchi 'prodotti correlati': lazy loading consigliato
- Banner hero in homepage: NON applicare il lazy loading, usare fetchpriority="high"
- Immagini nelle recensioni clienti o nei contenuti accordion: lazy loading consigliato