Lazy loading
Il lazy loading (caricamento pigro, o caricamento asincrono) rimanda il caricamento di immagini, video e script al momento esatto in cui l’utente li raggiunge scorrendo la pagina. Il browser scarica subito solo ciò che serve a mostrare la prima schermata, non l’intera pagina in un colpo solo.
Lazy loading: i punti chiave
- Come funziona: il browser carica subito i contenuti visibili (above the fold) e rimanda gli altri (below the fold) a quando l’utente scorre fino a raggiungerli.
- Vantaggi: pagina più leggera al primo accesso, meno banda consumata, metriche Core Web Vitals migliori.
- Implementazione: attributo HTML
loading="lazy"su<img>e<iframe>, oppure Intersection Observer API per i casi che il browser non gestisce da solo. - Quando evitarlo: mai sui contenuti above the fold, altrimenti peggiora il Largest Contentful Paint.
- Su WordPress: attivo di default dalla versione 5.5, con plugin dedicati per i casi che il core non copre.
Come funziona il lazy loading
Il lazy loading divide la pagina in due zone. Quella above the fold, visibile appena il browser disegna la prima schermata, viene caricata subito senza ritardi. Quella below the fold resta in attesa: il browser scarica le risorse solo quando l’utente scorre e se ne avvicina.
Questa tecnica fa parte delle ottimizzazioni dei Core Web Vitals che lavorano sul tempo di caricamento percepito, non solo su quello reale. Il meccanismo tecnico più usato per rilevare quando un elemento sta per entrare nello schermo è l’Intersection Observer API, una funzione nativa del browser che osserva la posizione degli elementi rispetto al viewport senza dover controllare lo scroll a ogni istante.
Al posto della risorsa non ancora caricata il browser mostra spesso un segnaposto: un colore di sfondo, un’immagine a bassa qualità o semplicemente uno spazio vuoto delle dimensioni corrette. Consiglio sempre di riservare quello spazio in anticipo: è il punto in cui molti siti perdono punti sul Cumulative Layout Shift, perché l’immagine arriva dopo e sposta tutto il resto. Il caricamento asincrono riguarda quindi anche la stabilità visiva della pagina durante lo scroll, oltre alla velocità.
Lazy loading ed eager loading: la differenza
L’eager loading è il comportamento predefinito del browser: scarica tutte le risorse di una pagina non appena l’utente la apre, comprese quelle che non vedrà mai se non scorre fino in fondo. Il lazy loading è l’opposto: carica solo ciò che serve nel momento in cui serve.
| Aspetto | Lazy loading | Eager loading |
|---|---|---|
| Caricamento iniziale | Solo contenuto above the fold | Tutte le risorse della pagina |
| Uso tipico | Pagine lunghe, ricche di immagini o video | Pagine corte o con poche risorse pesanti |
| Banda consumata | Solo quella effettivamente necessaria | Sempre al massimo, usata o no |
| Rischio principale | Ritardo se applicato sopra la piega | Caricamento lento su pagine pesanti |
Un sito con poco testo e pochissime immagini, come una pagina enciclopedica di solo testo, non guadagna molto dal lazy loading e può restare su un caricamento eager senza penalità evidenti. Un e-commerce con decine di schede prodotto per categoria è il caso opposto: lì il caricamento pigro fa la differenza.
Come si attiva il lazy loading
Il metodo da scegliere dipende da quanto controllo serve: l’attributo HTML nativo basta per la maggior parte dei casi, l’Intersection Observer API serve quando bisogna gestire logiche personalizzate o browser più datati.
Attributo HTML nativo
Dal 2020 i browser moderni supportano il lazy loading nativo tramite l’attributo loading="lazy", come riportato in Come velocizzare un sito web con il lazy load (2020). Per applicarlo:
- Individua i tag
<img>e<iframe>che si trovano below the fold. - Aggiungi l’attributo
loading="lazy"a quei tag, lasciando invariati quelli above the fold. - Specifica sempre
widtheheight(o l’aspect-ratio via CSS) per riservare lo spazio prima che l’immagine arrivi.
Esempio pratico:
<img src="prodotto.jpg" alt="Descrizione" width="600" height="400" loading="lazy">
Intersection Observer API
Quando serve un controllo più fine, ad esempio per caricare un video solo al click o per gestire componenti personalizzati, si usa direttamente l’Intersection Observer in JavaScript. L’osservatore riceve una lista di elementi e un callback che si attiva quando uno di essi entra nel viewport: a quel punto lo script sostituisce l’attributo data-src con src e smette di osservare l’elemento. È la soluzione giusta per i browser che non supportano ancora l’attributo nativo o per logiche che l’HTML da solo non copre.
Lazy loading su WordPress
WordPress attiva il lazy loading in automatico dalla versione 5.5, aggiungendo loading="lazy" alle immagini inserite tramite editor o funzioni core. Per i casi che il core non copre, come immagini di sfondo o iframe esterni, si usano plugin dedicati: uno dei più diffusi è installato su oltre 50.000 siti con una valutazione di 4,7 stelle su 5, un altro su oltre 10.000 installazioni con 4 stelle su 5, secondo i dati riportati in Come Implementare in WordPress il Lazy Load (2023). Prima di installarne uno controllo sempre se il plugin di cache già in uso ha già questa funzione: attivarle entrambe rallenta il sito invece di velocizzarlo.
Librerie JavaScript dedicate
Per progetti senza CMS o con esigenze più avanzate esistono librerie leggere pensate solo per questo: Lozad.js, Lazysizes e Vanilla Lazyload gestiscono il rilevamento del viewport, i placeholder e il fallback sui browser più vecchi senza dover scrivere da zero l’Intersection Observer.
Vantaggi del lazy loading
Il primo vantaggio è la velocità iniziale: la pagina pesa meno al primo accesso e il tempo di risposta percepito si riduce. Le pagine web pesano in media 3719 kB, con immagini e video che rappresentano quasi il 78% del peso totale secondo Come Implementare in WordPress il Lazy Load (2023): è su quella quota che il lazy loading agisce, rimandando ciò che non serve subito.
Il secondo vantaggio è il risparmio di banda: se l’utente non scorre fino in fondo, quelle risorse non vengono mai scaricate, né dal suo dispositivo né dal server. Per un sito mobile con connessione lenta questo si traduce in meno dati consumati e meno tempo di attesa.
Il terzo riguarda le metriche di prestazione che Google usa per valutare l’esperienza utente: applicato bene, il lazy loading migliora il tempo di caricamento misurato da strumenti come la guida a PageSpeed Insights e contribuisce a un buon punteggio sulla metrica che misura il rendering del contenuto più grande, descritta nella guida all’LCP. La velocità di pagina è un fattore di ranking, e il lazy loading contribuisce a migliorarla anche su questo fronte.
Svantaggi e quando evitarlo
L’errore più frequente che vedo è applicare il lazy loading anche al contenuto above the fold, compresa l’immagine principale o il logo: il risultato è un peggioramento del tempo di rendering del contenuto più grande, perché il browser aspetta a caricare proprio ciò che deve mostrare per primo.
Se il contenuto è above the fold: non applicare il lazy loading
Lascia che quelle risorse si carichino con il comportamento predefinito del browser. Applica loading="lazy" solo a ciò che si trova sotto la piega, verificabile con gli strumenti per sviluppatori del browser o con un test su PageSpeed Insights.
Un secondo limite riguarda i layout shift: se non si riserva lo spazio dell’immagine con width, height o un aspect-ratio via CSS, l’arrivo del file sposta il contenuto intorno, con un effetto che la guida al CLS considera un peggioramento della stabilità visiva.
Il terzo caso riguarda lo scroll molto rapido: su connessioni lente il browser può non fare in tempo a scaricare l’immagine prima che l’utente la raggiunga, con un effetto di buffering visibile. Per un e-commerce con schede prodotto, dove l’immagine è parte della decisione d’acquisto, questo è un rischio da valutare con attenzione prima di applicare il lazy loading a tutte le gallerie.
Un aspetto tecnico meno citato: attivare il lazy loading su un CMS che già lo gestisce in automatico, aggiungendo sopra anche un plugin dedicato, può creare conflitti e rallentamenti invece che benefici. Controllo sempre cosa fa già il sistema che ho davanti prima di installare qualcosa.
Lazy loading nei framework JavaScript
Nei framework frontend come React e Angular il lazy loading cambia livello: non riguarda più la singola immagine ma interi componenti o moduli di codice, caricati solo quando l’utente arriva su quella parte dell’applicazione. React usa React.lazy insieme a Suspense per mostrare un contenuto provvisorio mentre il componente si scarica; Angular ottiene lo stesso risultato con il caricamento differito delle rotte. È una tecnica che si avvicina al code splitting più che al lazy loading delle immagini, e merita un approfondimento dedicato allo sviluppo frontend: qui mi occupo di contenuti e di ottimizzazione dei Core Web Vitals, il campo in cui lavoro più spesso con chi gestisce un sito senza un team di sviluppo interno.
Domande frequenti sul lazy loading
Cos’è il lazy loading?
Il lazy loading è la tecnica che rimanda il caricamento di immagini, video e script al momento in cui l’utente li raggiunge scorrendo la pagina, invece di scaricarli tutti all’apertura. Riduce il peso iniziale della pagina e il tempo di attesa percepito.
Come funziona il lazy loading sopra e sotto la piega?
Il browser carica subito solo i contenuti above the fold, visibili senza scorrere; quelli below the fold restano in attesa e si scaricano quando l’utente si avvicina alla loro posizione tramite lo scrolling.
Come si attiva il lazy loading in HTML?
Si attiva aggiungendo l’attributo loading="lazy" ai tag <img> e <iframe> che si trovano sotto la piega, lasciando invariati quelli visibili al primo caricamento.
Il lazy loading migliora la SEO?
Riduce il peso della pagina e migliora le metriche di velocità dei Core Web Vitals, che Google considera nella valutazione dell’esperienza utente, anche se non è un fattore di ranking diretto.
Quando non conviene usare il lazy loading?
Non conviene applicarlo ai contenuti above the fold, perché ne ritarda la visualizzazione e peggiora il tempo di rendering del contenuto principale della pagina.
Che differenza c’è tra lazy loading ed eager loading?
Il lazy loading carica le risorse solo quando servono, l’eager loading le scarica tutte subito all’apertura della pagina: è il comportamento predefinito del browser in assenza di altre istruzioni.
Il lazy loading funziona anche su WordPress?
Sì, WordPress lo applica in automatico dalle immagini inserite in pagina dalla versione 5.5, mentre plugin dedicati coprono i casi aggiuntivi come immagini di sfondo e iframe esterni.
