Lazy loading nativo (attributo HTML)
html
<img src="image.jpg" alt="description" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>Supporto dei browser: Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+. L'attributo loading="lazy" non richiede JavaScript aggiuntivo ed è supportato da Googlebot.
Soluzioni JavaScript (per i browser più vecchi)
- lazysizes – libreria popolare con supporto delle immagini responsive.
- Intersection Observer API – API nativa per rilevare quando un elemento entra nel viewport.
- lozad.js – libreria leggera (~1,9 KB).
Impatto SEO del lazy loading
Googlebot supporta il lazy loading nativo e vede correttamente queste immagini. Per le implementazioni JavaScript, assicurati che l'HTML iniziale contenga un vero src (o data-src) così che il bot possa scoprirlo. In alternativa, usa un tag <noscript> con un'immagine standard.
Non usare il lazy loading per le immagini above-the-fold. Può ritardare l'immagine principale e danneggiare l'LCP. Specifica sempre anche width e height per evitare il CLS.
FAQ
Posso usare il lazy loading per le immagini di sfondo CSS?
Sì, ma serve JavaScript. Per esempio, aggiungi una classe quando l'elemento entra nel viewport e cambia background-image. Non usarlo per le immagini critiche.
Come posso verificare che il lazy loading funzioni correttamente?
Apri la pagina in Chrome, vai alla scheda Network e scorri. Le immagini devono caricarsi solo quando entrano nella vista. Verifica anche che l'HTML contenga src o data-src con un URL reale.
Il lazy loading incide sull'indicizzazione delle immagini in Google Images?
Google indicizza le immagini se presenti nel DOM. Con il lazy loading nativo (loading=lazy) e una corretta implementazione JS, l'indicizzazione funziona bene.