Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
Velocità Impatto medio Facile 10–30 min

Lazy loading delle immagini

Carica le immagini fuori schermo solo durante lo scroll.

Cos'è

Il lazy loading significa che le immagini fuori dall'area visibile non si caricano subito, ma solo quando l'utente vi scorre vicino. Basta l'attributo loading="lazy".

Perché è importante

Senza lazy loading il browser scarica anche le immagini in fondo alla pagina, che l'utente forse non vedrà mai — questo ritarda il primo rendering e spreca dati. Il lazy loading velocizza l'avvio e risparmia traffico.

Come fare

  1. 1Aggiungi loading="lazy" alle immagini e agli iframe sotto l'area visibile.
  2. 2NON usare lazy sull'immagine principale above the fold (immagine LCP) — quella la vuoi al contrario il prima possibile (anche con preload).
  3. 3Indica sempre width e height, così il layout non sobbalza (CLS).

Esempio

Corretto
<img src="galleria-12.webp" alt="..." loading="lazy" width="800" height="600">

Conclusione

Oggi il lazy loading è nativo (un solo attributo) e velocizza quasi gratuitamente le pagine con molte immagini. Attenzione solo all'immagine principale above the fold — su quella non mettere lazy. Aggiungi le dimensioni per la stabilità del layout.

Argomenti correlati