Performance
Lazy loading: quando peggiora le prestazioni
Mettere loading="lazy" sull'immagine sopra la piega sposta il LCP indietro. Misure su una pagina reale, regola pratica e casi in cui il lazy loading costa.
In sintesi
- Il lazy loading peggiora la pagina quando rimanda l'immagine candidata a LCP.
- Sulla pagina /components misurata il 1 novembre 2026, 52 immagini su 60 erano lazy e 8 si erano caricate senza scroll.
- Se non sai se un'immagine è sopra la piega, non marcarla lazy.
Il lazy loading peggiora la pagina quando colpisce l'immagine più grande della prima schermata: il browser la scopre dopo il layout, quindi LCP misura un'attesa che poteva essere evitata. Va usato sotto la piega, non sopra.
Dove il lazy loading aiuta
Serve per tutto ciò che l'utente non vede al primo paint: griglie lunghe di card, gallerie, iframe di anteprima, immagini dentro schede chiuse. Lì il download non tocca il LCP e risparmia byte.
- Griglie di card che continuano oltre la seconda schermata.
- iframe di preview e player video inseriti più in basso.
- Immagini dentro tab, accordion o modali chiusi al caricamento.
Dove lo paghi
L'immagine candidata a LCP non è solo il banner. Su una pagina di dettaglio può essere la prima card, un logo grande o un'anteprima. Se sta sopra la piega, loading="lazy" le toglie la corsa.
La prima riga carica subito l'immagine del primo schermo e ne dichiara la priorità. La seconda rimanda il download e conserva le dimensioni, quindi non produce layout shift.
La regola pratica
Se non sai se l'immagine è sopra la piega, non marcare lazy. Un'immagine caricata in più costa pochi KB; un LCP peggiorato costa visite.
| Elemento | Attributi | Perché |
|---|---|---|
| Immagine del primo schermo | fetchpriority="high" | è il candidato LCP |
| Card sotto la piega | loading="lazy" | fuori schermo al primo paint |
| iframe di anteprima | loading="lazy" | 60 KB che nessuno ha chiesto |
Il comando per controllare
npx playwright screenshot --viewport-size=390,844 --wait-for-timeout=3500 https://ui.eneawork.it/components shot.pngLo screenshot mostra ciò che l'utente vede dopo 3,5 secondi. Aprilo con il pannello Network: le immagini mai richieste sono quelle che il lazy loading ha rimandato.
La limitazione
La misura copre una pagina, un viewport e una connessione. Su un altro template o su una rete lenta i numeri cambiano, e un'immagine lazy diventa LCP quando tutto il resto è più piccolo di lei.
Dove continuare
Il catalogo EneUI indicizza 111.985 componenti e 1.556 blocchi con preview. Il record interactive image accordion carica immagini multiple: controlla gli attributi prima di installarlo. Per il layout shift leggi immagini senza dimensioni, per le soglie Core Web Vitals, per il confronto misurato librerie React 2026.
Domande frequenti
Quando NON devo usare loading=lazy?
Sull'immagine più grande visibile al primo caricamento e su ogni immagine che sta sopra la piega. Lì il download immediato è ciò che rende veloce il LCP.
Il lazy loading fa male alla SEO?
No, se le immagini restano nel DOM e i crawler le vedono. Fa male indirettamente quando peggiora LCP, che è un segnale di page experience con peso minore della pertinenza.
loading=lazy su un iframe è sicuro?
Sì, è supportato dai browser moderni e conviene sui player e sulle anteprime fuori schermo. In questo repository l'attributo compare in 8 file, un iframe compreso.
Meglio lazy loading o content-visibility?
Rispondono a problemi diversi: lazy rimanda il download di una risorsa, content-visibility rimanda il rendering di una sezione. Puoi usarli insieme, ma nessuno dei due risolve l'immagine LCP.
Come verifico quali immagini sono lazy?
Apri il pannello Elements e cerca l'attributo, oppure conta le richieste nel pannello Network prima e dopo uno scroll. La differenza è ciò che il lazy loading ha trattenuto.