# 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.

> Pagina: https://ui.eneawork.it/blog/lazy-loading-quando-no
> Markdown: https://ui.eneawork.it/blog/lazy-loading-quando-no.md

*2026-11-01*

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.

Abbiamo misurato /components il 1 novembre 2026 su un viewport mobile di 390×844 pixel con Playwright e Chromium: 60 immagini nel DOM, 52 con loading="lazy", 8 caricate dopo 3,5 secondi e 13 dopo uno scroll fino in fondo. Nel codice del client l'attributo compare in 8 file, un iframe compreso. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. La regola sotto viene da web.dev, documentazione Google con licenza CC BY 4.0.

## 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.

## 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.

## Il comando per controllare

npx playwright screenshot --viewport-size=390,844 --wait-for-timeout=3500 https://ui.eneawork.it/components shot.png

Lo 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.

## FAQ

### 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.