Riduci LCP e larghezza di banda fino al 40%, preserva il crawl budget e supera i competitor implementando il lazy loading nei template ricchi di media.
Il lazy loading rimanda il caricamento di immagini, iframe e script posizionati below the fold finché non si avvicinano al viewport, riducendo il payload iniziale per migliorare i Core Web Vitals, diminuire i costi del server e preservare il crawl budget. Implementalo sui template ricchi di media (griglie e-commerce, blog long-form) utilizzando l’attributo nativo loading="lazy" o fallback <noscript> in modo che Googlebot possa comunque renderizzare le risorse posticipate.
Lazy loading è una tecnica di performance che posticipa il download delle risorse non critiche (immagini, iframe, widget di terze parti) finché non sono prossime al viewport dell’utente. Per i responsabili SEO non è un semplice «nice-to-have», ma una leva per:
I segnali di Page Experience di Google influenzano ancora il ranking nei casi di parità. Un incremento di 0,2 punti nei Core Web Vitals sposta spesso i siti dalla fascia 3–5 alla top 3, dove i CTR crescono di oltre il 30 %. Nei canali paid, ogni 100 KB risparmiati abbassa il CPC delle landing pubblicitarie grazie a un Quality Score più alto. Chi ignora il lazy loading paga doppio: costi di acquisizione maggiori e crescita organica più lenta.
<img loading="lazy"> è supportato in Chromium, WebKit, Firefox. Usalo di default; consenti loading="eager" per gli asset hero above-the-fold.<noscript>: Avvolgi ogni immagine differita in un tag <noscript> con lo stesso markup. Googlebot renderizza comunque i contenuti lazy, ma il fallback copre casi limite (JS disabilitato, UA datate).aspect-ratio o tecnica del padding per evitare spostamenti e peggiorare il CLS.I motori generativi (ChatGPT, Perplexity, Google AI Overviews) estraggono il contenuto renderizzato per creare riepiloghi. Se immagini, schema di prodotto o infografiche non si caricano, il brand perde opportunità di citazione. Garantendo che le risorse deferite si rendano rapidamente lato server e client, assicuri visibilità sia nelle SERP classiche sia negli snippet guidati dall’AI. Abbina il lazy loading ai dati strutturati (product, how-to, imageObject) affinché i modelli generativi citino i tuoi visual quando compongono le risposte.
In sintesi, il lazy loading è un’ottimizzazione ad alto rendimento: poco codice, impatto misurabile e benefici cross-channel in linea con gli obiettivi SEO tradizionali e con la nuova realtà GEO.
Il lazy loading nativo espone l’intero elemento <img> (incluso l’attributo src) nell’HTML che Googlebot scarica, permettendo a Google di mettere subito in coda l’URL dell’immagine anche se il browser ne ritarda il download finché non si avvicina al viewport. Una soluzione in JavaScript sostituisce spesso il valore di src tramite JS dopo l’attivazione di Intersection Observer; se Googlebot renderizza la pagina ma lo script va in errore o subisce ritardi, il crawler potrebbe non vedere mai l’URL reale dell’immagine. Per garantire la crawlability con un approccio JS, inserisci un fallback <noscript> contenente un tag <img src="…"> standard, oppure assicurati che l’URL effettivo dell’immagine sia presente in un data-attribute che il tuo servizio di pre-rendering renda visibile ai bot.
1) Pagina i contenuti lato server (es.: ?page=2) ed esponi i link di paginazione con rel="next"/"prev" oppure un pulsante <a> "Visualizza di più", così ogni blocco dispone di un URL esplorabile. 2) Nella prima pagina carica normalmente solo le immagini above the fold; aggiungi loading="lazy" alle immagini che partono sotto la fold. 3) Utilizza Intersection Observer per recuperare le pagine aggiuntive quando l’utente si avvicina al fondo, ma applica pushstate al cambio di URL (es.: /category?page=3) in modo che la sessione sia condivisibile. 4) Per ogni lotto caricato in lazy load, inietta veri elementi <img> con attributo src — non immagini di background — così il DOM renderizzato da Google contiene gli URL. 5) Inserisci l’intero elenco prodotti in una sitemap XML per garantirne la scoperta anche se il JS dovesse fallire. Questa configurazione riduce il payload iniziale per l’LCP, preserva i percorsi di crawl e consente a Google di indicizzare ogni prodotto.
Lighthouse ha segnalato immagini fuori dallo schermo, ma l’hero banner è **nel** viewport su molti dispositivi. Caricandolo in lazy load, hai ritardato il recupero della risorsa che contribuisce al LCP, peggiorando la metrica. Soluzione: carica normalmente le immagini del critical path (quelle verosimilmente presenti nel viewport iniziale ai breakpoint più comuni), omettendo loading="lazy", e riserva il lazy loading ai contenuti che iniziano sensibilmente sotto la piega. Verifica con la modalità responsive di Chrome DevTools quali immagini risultano above the fold tra 320 e 1920 px di larghezza.
Errore 1: lo script assegna gli URL delle immagini solo dopo lo scroll dell’utente, quindi l’HTML inizialmente renderizzato è privo di <img src="…">. Googlebot va in timeout prima che il JS venga eseguito, pertanto le immagini non vengono mai indicizzate. Verifica: usa la scheda “HTML renderizzato” dello Strumento di ispezione URL; se gli attributi src sono ancora segnaposto, questo è il problema. Soluzione: esegui un prerendering o aggiungi versioni di backup in <noscript>. Errore 2: lo script sostituisce l’attributo src con data-src e si affida a JS inline che è bloccato dalla Content Security Policy (CSP). Googlebot visualizza immagini non funzionanti. Verifica: controlla la console di DevTools per errori CSP e rivedi l’header CSP del sito. Soluzione: aggiorna la CSP per consentire lo script oppure utilizza il lazy loading nativo (loading="lazy"), che mantiene attributi src validi nell’HTML.
✅ Better approach: Escludi esplicitamente l’immagine hero e le immagini di background CSS critiche dal tuo script di lazy-load. Servile con <link rel="preload"> o fetchpriority="high" e lascia loading="eager" (o ometti l’attributo) affinché il browser le carichi con priorità.
✅ Better approach: Aggiungi un elemento <img> identico racchiuso in <noscript> per ogni immagine caricata in modo differito oppure, dove possibile, utilizza l’attributo nativo loading="lazy" invece di JavaScript personalizzato. Verifica con lo strumento Controllo URL di Google che l’HTML renderizzato contenga l’immagine.
✅ Better approach: Imposta una soglia di pixel o il rootMargin di IntersectionObserver affinché vengano posticipate solo le immagini fuori dal primo viewport. Inserisci inline gli sprite SVG/Icon critici o i fogli di sprite e applica il lazy-loading solo ai media più pesanti di una soglia in byte definita (es. >4 KB).
✅ Better approach: Tratta le immagini come asset indicizzabili a sé stanti: inserisci i loro URL diretti nelle sitemap XML con i tag <image:image>, utilizza attributi alt e nomi file descrittivi, e testale in Google Immagini. Il lazy loading non sostituisce le best practice SEO standard per le immagini.
Ottimizza il tasso di acquisizione delle snapshot per prevenire errori …
Massimizza l’idoneità ai rich result e la visibilità nei risultati …
Padroneggia gli standard YMYL per tutelare gli utenti, superare i …
L’iniezione hreflang all’edge corregge istantaneamente la cannibalizzazione internazionale all’edge della …
L’edge meta injection permette di applicare modifiche istantanee a livello …
Affina la precisione del markup Schema per ottenere gli ambiti …
Get expert SEO insights and automated optimizations with our platform.
Start Free Trial