Non tutte le immagini di una pagina devono caricarsi nello stesso momento. Il lazy loading delle immagini ritarda il download delle immagini che non sono ancora visibili nell'area di visualizzazione del visitatore, così il browser si concentra sul contenuto che il visitatore può davvero vedere invece di caricare l'intera pagina in una volta. Per le pagine con molte immagini, questa sola modifica può ridurre molto il tempo di caricamento iniziale e migliorare le metriche che contano sia per l'esperienza dei visitatori sia per il posizionamento. Questo articolo spiega cos'è il lazy loading, come funziona a livello tecnico, cosa conviene e cosa non conviene caricare in modo differito e come incide sui punteggi delle Core Web Vitals.
Quando un browser carica una pagina senza lazy loading, scarica ogni immagine della pagina anche se nessuna è ancora visibile. Un visitatore che apre una pagina e se ne va subito fa comunque scaricare tutte le immagini sotto la parte visibile. È banda sprecata, e rallenta il caricamento di tutto ciò che sta nella parte visibile, quella che il visitatore vede davvero. Il lazy loading cambia le cose, in modo che venga scaricato solo il contenuto attualmente in vista. Per capire come si inserisce nel quadro più ampio della velocità di caricamento delle pagine, leggi l'articolo su come ridurre il tempo di caricamento del tuo sito.
Cos'è il lazy loading?
Il lazy loading è una tecnica che rimanda il caricamento delle risorse non critiche fino al momento in cui servono. Per le immagini significa che un'immagine non viene scaricata finché il visitatore non scorre vicino a essa. Invece di richiedere ogni immagine al caricamento della pagina, il browser richiede solo quelle visibili o che stanno per diventarlo mentre il visitatore interagisce con la pagina.
Cosa cambia il lazy loading nella sequenza di caricamento
- Senza lazy loading: il browser richiede tutte le immagini al primo caricamento della pagina, che siano o no nell'area visibile
- Con il lazy loading: il browser richiede solo le immagini che sono nell'area visibile attuale o vicino a essa. Le altre vengono richieste mentre il visitatore scorre verso di loro
- La quantità totale di dati trasferiti nel corso di uno scorrimento completo della pagina è la stessa, ma il caricamento iniziale è molto più leggero
- I visitatori che non scorrono oltre un certo punto della pagina non fanno mai scaricare le immagini che non raggiungono
Come funziona il lazy loading a livello tecnico?
Ci sono due modi per applicare il lazy loading alle immagini: l'attributo nativo del browser e le soluzioni basate su JavaScript.
Lazy loading nativo
- Tutti i principali browser supportano il lazy loading nativo tramite l'attributo
loading="lazy"aggiunto direttamente al tag dell'immagine - Non servono JavaScript né librerie esterne. Il browser gestisce il comportamento di caricamento in modo nativo
- Oggi è l'approccio standard per il lazy loading delle immagini sul web e richiede competenze tecniche minime
- Il browser decide quando iniziare a caricare un'immagine in base alla sua distanza dall'area visibile, una soglia che varia leggermente tra un browser e l'altro
Lazy loading basato su JavaScript
- Prima che il lazy loading nativo fosse ampiamente supportato, gli sviluppatori usavano librerie JavaScript che controllavano la posizione dello scorrimento e avviavano il caricamento delle immagini quando entravano nell'area visibile
- L'Intersection Observer API è l'approccio JavaScript standard: rileva quando un elemento entra o esce dall'area visibile senza dipendere dagli ascoltatori di eventi di scorrimento
- Il lazy loading basato su JavaScript si usa ancora per scenari più complessi, come il lazy loading delle immagini di sfondo impostate in CSS o dei contenuti video
- Per i normali elementi immagine, il lazy loading nativo con
loading="lazy"è più semplice e più affidabile
Cosa si può caricare in modo differito oltre alle immagini?
Iframe
- L'attributo
loading="lazy"funziona anche sugli iframe in tutti i principali browser - Mappe incorporate, moduli e contenuti di terze parti negli iframe possono essere rimandati finché il visitatore non scorre fino a loro
- È particolarmente utile per le pagine con mappe incorporate o widget di terze parti verso il fondo della pagina, perché spesso comportano script esterni pesanti
Video
- I file video sono molto più grandi delle immagini e possono avere un grande impatto sul tempo di caricamento iniziale quando sono posti sotto la parte visibile
- Il lazy loading dei video richiede un approccio JavaScript, perché l'attributo nativo
loadingnon si applica agli elementi video - Un approccio comune è caricare all'inizio solo una miniatura o un'immagine di copertina, e iniziare a caricare il file video solo quando il visitatore interagisce con esso o scorre fino a lui
Componenti e sezioni
- Nelle applicazioni ricche di JavaScript, intere sezioni o componenti della pagina possono essere caricati in modo differito, cioè il loro codice e contenuto non vengono recuperati finché il visitatore non raggiunge quella parte della pagina
- È una tecnica avanzata usata nelle applicazioni web complesse e di solito è gestita dal framework e non applicata a mano
Cosa non va caricato in modo differito?
Il lazy loading migliora le prestazioni quando è applicato bene, ma applicarlo nel posto sbagliato crea problemi invece di risolverli.
Immagini nella parte visibile
- L'immagine principale, il logo o qualsiasi contenuto visivo in evidenza visibile all'apertura della pagina deve caricarsi subito
- Applicare il lazy loading alle immagini nella parte visibile ritarda l'LCP, il che peggiora i punteggi delle Core Web Vitals e l'esperienza dei visitatori
- La regola è semplice: tutto ciò che è visibile senza scorrere deve caricarsi subito. Tutto ciò che sta sotto la parte visibile può essere caricato in modo differito
Immagini vicine al limite della parte visibile
- Le immagini subito sotto l'area visibile possono comparire rapidamente quando il visitatore inizia a scorrere. Se il lazy loading è applicato in modo troppo aggressivo, queste immagini possono essere ancora in caricamento quando il visitatore le raggiunge, e per un attimo si vede un segnaposto vuoto
- Il lazy loading nativo gestisce la cosa con una soglia: inizia a caricare le immagini prima che siano del tutto nell'area visibile, invece di aspettare l'ultimo momento
Contenuto critico nelle pagine che si caricano in fretta
- Nelle pagine con pochissimo contenuto e solo qualche immagine, la sequenza di caricamento è già veloce. In questi casi il lazy loading aggiunge complessità senza un vantaggio significativo
- Il lazy loading è più utile nelle pagine con molte immagini o con contenuti lunghi da scorrere
Come influisce il lazy loading sulle Core Web Vitals?
Il lazy loading ha un effetto diretto su due metriche delle Core Web Vitals e nessun effetto sulla terza, quando è applicato correttamente.
Largest Contentful Paint (LCP)
- Il lazy loading non va mai applicato all'elemento che con più probabilità sarà il candidato LCP, di solito l'immagine principale
- Se applicato correttamente, il lazy loading riduce il numero di risorse che si contendono la banda durante il caricamento iniziale, il che può migliorare l'LCP permettendo al contenuto nella parte visibile di caricarsi più in fretta
- Se applicato per errore alle immagini nella parte visibile, il lazy loading peggiora direttamente l'LCP ritardando l'elemento visibile più grande
Interaction to Next Paint (INP)
- Ridurre il numero di immagini caricate all'inizio significa meno attività di rete in concorrenza con l'esecuzione di JavaScript durante la finestra critica di caricamento
- Questo può ridurre in modo indiretto il blocco del thread principale e migliorare i punteggi INP nelle pagine che prima caricavano molte immagini contemporaneamente
Cumulative Layout Shift (CLS)
- Il lazy loading non influisce direttamente sul CLS, ma le immagini caricate in modo differito senza attributi di larghezza e altezza definiti possono causare spostamenti di layout quando si caricano
- Imposta sempre dimensioni esplicite sulle immagini caricate in modo differito, così il browser riserva lo spazio giusto prima che l'immagine si carichi
Per una spiegazione completa di come vengono valutati LCP, INP e CLS e di quali sono le soglie, leggi l'articolo su cosa sono le Core Web Vitals.
Il lazy loading influisce sulla SEO?
Se applicato correttamente, il lazy loading non danneggia la SEO e può contribuire a migliori prestazioni nella ricerca grazie a punteggi di velocità più alti.
Come i motori di ricerca trattano i contenuti caricati in modo differito
- I crawler dei motori di ricerca mostrano le pagine in modo simile ai browser e possono indicizzare i contenuti caricati in modo differito
- Le immagini caricate in modo differito restano scansionabili e possono comparire nei risultati della ricerca per immagini
- Il vantaggio SEO deriva soprattutto dai miglioramenti di velocità che il lazy loading rende possibili. Le pagine con migliori punteggi nelle Core Web Vitals, che il lazy loading può aiutare a migliorare, hanno un vantaggio di posizionamento
Il testo alternativo vale ancora
- Le immagini caricate in modo differito richiedono lo stesso testo alternativo di qualsiasi altra immagine. L'attributo alt va compilato con una descrizione dell'immagine, sia che venga caricata in modo differito o no
- Per indicazioni su come scrivere un buon testo alternativo, leggi l'articolo su come usare le immagini sul tuo sito
Come si aggiunge il lazy loading al tuo sito?
Per le singole immagini in HTML
- Aggiungi
loading="lazy"a ogni tag immagine che sta sotto la parte visibile - Assicurati che ogni immagine caricata in modo differito abbia attributi
widtheheightespliciti, per evitare spostamenti di layout mentre le immagini si caricano - Non aggiungere
loading="lazy"all'immagine principale né a nessuna immagine visibile senza scorrere
Tramite la piattaforma del tuo sito
- Molti creatori di siti applicano il lazy loading in automatico alle immagini sotto la parte visibile, senza richiedere alcuna operazione manuale
- Controlla la documentazione sulle prestazioni della tua piattaforma per confermare se viene gestito in automatico prima di aggiungerlo a mano
Per una guida completa all'ottimizzazione delle immagini oltre al lazy loading, compresi formati dei file, compressione e dimensioni responsive, leggi l'articolo su come ottimizzare le immagini per caricare più in fretta.
Come WEMASY gestisce il lazy loading
Il creatore di siti WEMASY applica in automatico il lazy loading alle immagini sotto la parte visibile su tutte le pagine. Le immagini nella parte visibile, comprese le immagini principali e qualsiasi contenuto visibile senza scorrere, sono escluse dal lazy loading e vengono mostrate subito. Le immagini sono inoltre servite con dimensioni definite di default, il che evita spostamenti di layout quando le immagini caricate in modo differito vanno al loro posto.
Il lazy loading funziona insieme alla compressione delle immagini e alla consegna tramite CDN su ogni piano WEMASY. Questi tre miglioramenti insieme riducono sia il peso iniziale della pagina sia il tempo di consegna delle immagini, il che contribuisce direttamente a un LCP più rapido e a migliori punteggi delle Core Web Vitals nella dashboard delle statistiche.
Scopri cosa è incluso nel creatore di siti WEMASY, oppure guarda i piani nella pagina dei prezzi.
Domande frequenti
Cos'è il lazy loading?
Il lazy loading è una tecnica che ritarda il download di immagini e altre risorse finché il visitatore non è vicino a vederle. Invece di caricare ogni immagine di una pagina quando si apre per la prima volta, il browser carica solo le immagini visibili o vicine all'area visibile. Le immagini più in basso nella pagina vengono caricate mentre il visitatore scorre verso di loro. Questo riduce la quantità iniziale di dati scaricati e permette al contenuto visibile di caricarsi più in fretta. Con il creatore di siti di WEMASY puoi impostare tutto questo direttamente sul tuo sito.
Il lazy loading danneggia la SEO?
No. Se applicato correttamente, il lazy loading non danneggia la SEO. I crawler dei motori di ricerca possono indicizzare le immagini e i contenuti caricati in modo differito. L'effetto sulla SEO è in genere positivo, perché il lazy loading migliora le metriche di velocità, che i motori di ricerca usano come segnali di posizionamento. Il requisito fondamentale è non applicare il lazy loading ai contenuti nella parte visibile, perché ritarderebbe il Largest Contentful Paint e peggiorerebbe i punteggi delle Core Web Vitals.
Tutte le immagini di una pagina vanno caricate in modo differito?
No. Le immagini visibili quando la pagina si apre per la prima volta, nella parte visibile, devono caricarsi subito. Applicare il lazy loading a queste immagini ritarda il punteggio del Largest Contentful Paint, il che peggiora le Core Web Vitals e l'esperienza dei visitatori. Solo le immagini sotto la parte visibile traggono vantaggio dal lazy loading. In pratica, di solito l'immagine principale e ogni contenuto in evidenza nella parte alta della pagina non dovrebbero mai avere l'attributo di lazy loading.
Come aggiungo il lazy loading alle immagini?
Per i normali elementi immagine, aggiungi l'attributo loading="lazy" direttamente al tag dell'immagine. Tutti i principali browser lo supportano in modo nativo, senza bisogno di librerie JavaScript. Assicurati che ogni immagine caricata in modo differito abbia anche attributi di larghezza e altezza espliciti, così il browser riserva lo spazio giusto prima che l'immagine si carichi ed evita spostamenti di layout. Non aggiungere il lazy loading all'immagine principale né a nessuna immagine visibile senza scorrere.
Il lazy loading funziona su smartphone?
Sì. Il lazy loading nativo con l'attributo loading="lazy" è supportato da tutti i principali browser per smartphone. È particolarmente utile su smartphone perché le connessioni mobili sono più lente e più variabili di quelle da computer, e la riduzione del peso iniziale della pagina ha più impatto. Anche chi usa lo smartphone e non scorre tutta la pagina ne trae vantaggio, perché non scarica le immagini che non raggiunge.
Che differenza c'è tra lazy loading e precaricamento?
Il lazy loading ritarda il download delle risorse finché non servono. Il precaricamento fa il contrario: dice al browser di scaricare una risorsa specifica il prima possibile, prima di quando la incontrerebbe normalmente nella sequenza di caricamento. Il precaricamento si usa per risorse critiche come l'immagine principale o i caratteri chiave, per assicurarsi che si carichino più in fretta possibile. Le due tecniche si completano: precarica le risorse critiche nella parte visibile e carica in modo differito tutto ciò che sta sotto.