Caricamento differito delle immagini: quando usarlo e quando evitarlo

Che cosa cambia il caricamento differito?

Il caricamento differito, o lazy loading, cambia il momento in cui il browser richiede un’immagine, non le sue dimensioni in pixel, il formato o la compressione. In una lunga ricetta il visitatore ha subito bisogno dell’inizio, ma potrebbe non arrivare mai alle quindici foto finali. Rimandarle può evitare download iniziali inutili.

Sono tre attività diverse: ridimensionare elimina pixel superflui, comprimere riduce i dati e differire rimanda la richiesta. Un’immagine grande resta pesante quando viene caricata. Una piccola può comparire tardi se la richiesta parte troppo tardi.

Prepara le dimensioni con lo strumento di ridimensionamento e confronta la compressione quando serve. Poi scegli le immagini necessarie all’apertura. La guida al peso dei file tratta la preparazione; qui scegliamo quando caricarli.

Come iniziare senza programmare

Non serve modificare l’HTML per scegliere le immagini da caricare per prime. Inizia con una pagina prodotto o un articolo lungo. La vista iniziale è la parte che vedi prima di scorrere.

1. Cerca l’impostazione esistente. Nell’amministrazione controlla tema, immagini o prestazioni. Cerca “lazy loading” o “caricamento differito”. Nome e posizione variano, e alcuni servizi lo gestiscono automaticamente. Se non lo trovi, chiedi al responsabile del sito prima di installare un altro plugin.
2. Preserva la vista iniziale. Foto principale e immagini subito visibili devono caricare normalmente. Se ci sono esclusioni, chiedi come applicarle. Non attivare una regola generale prima di sapere cosa fa alla foto principale.
3. Prova sulle immagini successive. Le illustrazioni più in basso sono un buon inizio. Usa un’anteprima o una pagina di prova se disponibile, poi controlla quella pubblicata. Verifica le gallerie a parte perché si possono sfogliare rapidamente.
4. Controlla la lettura. Apri su telefono e computer. La foto principale arriva presto? Le altre compaiono in tempo scorrendo piano e velocemente? Il testo salta quando arriva una foto? Prova anche un collegamento diretto a una sezione inferiore.

Se noti problemi, annulla l’ultima modifica e chiedi aiuto per quella pagina. La verifica visiva rivela ritardi e spostamenti evidenti, ma non dimostra che il sito sia più veloce. Servono misurazioni; la sezione sui test spiega quali annotare.

Puoi inviare questa richiesta: “Controlla il lazy loading di questa pagina. Lascia caricare normalmente la foto principale e le immagini visibili all’apertura. Rimanda quelle adatte più in basso e riserva il loro spazio per evitare salti del testo. Prova su telefono e computer e confronta la velocità di caricamento della foto principale prima e dopo”. Aggiungi il link della pagina e segnala le foto che arrivano tardi.

Quali immagini puoi caricare più tardi?

Apri una pagina rappresentativa senza scorrere. Annota le immagini visibili e quelle utili a capire il contenuto. Ripeti su un telefono stretto e uno schermo ampio: banner, titolo e galleria possono trovarsi in posizioni diverse.

Conta la posizione effettiva, non il nome del file o l’ordine di caricamento nella libreria. La prima foto della libreria non è necessariamente la prima della pagina. Anche una foto sotto una lunga introduzione può comparire subito in un altro modello.

Se la stessa immagine è subito visibile sul computer ma più in basso sul telefono, il caricamento normale è un punto di partenza più sicuro. loading non offre una media query come picture. Prima di aggiungere uno script basato sullo schermo per risparmiare una sola richiesta, verifica se quella richiesta ha un costo significativo.

Un’immagine nascosta nella galleria non verrà necessariamente scaricata più tardi. Lo script può precaricarla indipendentemente dagli attributi. Prova cambi rapidi e ritorni alle immagini precedenti, oltre allo scorrimento della pagina.

Perché l’immagine principale non deve aspettare

Largest Contentful Paint (LCP) misura quanto presto diventa visibile il più grande elemento di contenuto della vista iniziale. Spesso è la foto principale, ma può essere un blocco di testo. Identificalo nel rapporto sulle prestazioni. Se è un’immagine, non differirla. Un indirizzo presente nell’HTML iniziale consente di partire presto; se uno script lo inserisce dopo, può aggiungere attesa.

Togliere il lazy loading non risolve ogni rallentamento. Risposta del server, peso del download e visualizzazione possono ancora incidere. La guida Google all’ottimizzazione LCP distingue queste fasi. La guida Pixilo ai Core Web Vitals separa problemi di caricamento e spostamenti del layout.

Usa fetchpriority="high" solo per un’immagine di cui hai verificato l’importanza. Assegnarla a tutta la galleria non crea un ordine utile. Non annulla nemmeno il rinvio di un’immagine con lazy loading.

Controllare cosa fanno già CMS e galleria

Prima di installare un plugin, ispeziona l’immagine pubblicata. CMS, tema o servizio di ottimizzazione potrebbero già aggiungere l’attributo. Guarda l’HTML risultante e la richiesta reale, non solo un’opzione chiamata “ottimizzazione immagini”.

Gestisci il comportamento in un solo punto. Se uno script cambia indirizzi, aggiunge elementi intorno alle immagini o precarica diapositive, un secondo meccanismo complica la diagnosi. Parti da una pagina ed escludi la foto principale dal rinvio.

Uno sfondo CSS è un caso diverso: l’attributo di img non si applica alla dichiarazione di sfondo. Chiedi al responsabile del modello come viene individuata quella risorsa. Incollare HTML in un blocco di contenuto non cambia lo sfondo del tema.

Aggiungere il caricamento differito nativo in HTML

Per un’illustrazione ben sotto la vista iniziale, mantieni un indirizzo reale in src e aggiungi l’attributo. Sostituisci i percorsi di esempio con i tuoi file. Il testo alternativo descrive ciò che mostra l’immagine; le istruzioni della ricetta restano nel testo. Un’immagine puramente decorativa usa alt="".

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="Impasto ripiegato sul ripieno, con i bordi ancora aperti"
>

Una foto identificata come LCP nella vista iniziale richiede un’altra scelta:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Pane appena sfornato con crosta dorata"
>

eager indica un caricamento normale, come di solito avviene omettendo loading. Specificarlo aiuta se il modello aggiunge automaticamente il lazy loading. Non significa che il download finisca subito. Il riferimento MDN all’elemento immagine spiega gli attributi.

Il browser decide quando l’immagine è abbastanza vicina da richiederla, anche prima che sia visibile. Una richiesta fuori schermo non dimostra un errore. Non usare una distanza fissa di scorrimento come criterio del test. Consulta la guida web.dev al lazy loading nativo.

Riservare spazio e mantenere le varianti responsive

Indica in width e height i pixel del file sorgente, qui 1200 × 800. Definiscono le proporzioni; il CSS può mostrarlo più piccolo. Copiarli su una forma diversa riserva uno spazio sbagliato. Per ridimensionare senza ritagliare:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Aggiungi class="article-image" o adatta una regola esistente. Con un ritaglio fisso, riserva l’area mostrata. Controlla il layout reale: altre regole CSS possono modificare il risultato.

Il lazy loading non sostituisce srcset e sizes. Mantieni varianti utili alla scelta del file. Dentro picture, l’impostazione va su img. La guida alle immagini responsive offre esempi completi.

Come verificare la pagina pubblicata

1. Registra la situazione iniziale. Annota URL, dimensioni della finestra, elemento e tempo LCP, avvio della richiesta principale e dati delle immagini trasferiti prima di scorrere. Specifica se simuli una prima visita o usi la cache.
2. Esamina le richieste. Apri Network prima di ricaricare e filtra le immagini. Quali file vengono richiesti all’inizio e quando partono?
3. Cambia una sola regola. Per esempio, rimuovi il rinvio della principale o attivalo per le illustrazioni successive.
4. Conferma il risultato pubblicato. Verifica attributi e indirizzi dopo l’aggiornamento necessario della cache. Una modifica locale non cambia ancora la pagina online.
5. Ripeti e scorri. Confronta prove equivalenti, poi scorri piano e rapidamente, usa le gallerie e i link alle sezioni. Cerca spazi vuoti e spostamenti.

“Disable cache” esclude la cache del browser mentre gli strumenti sono aperti, ma non svuota quella del server o CDN. La documentazione Chrome di Network spiega l’ispezione. Mantieni le stesse condizioni di rete e confronta più prove, non solo la migliore.

Inizia in cima con la stessa finestra, rete e durata di osservazione prima di scorrere. Annota prima i risultati iniziali, altrimenti le richieste successive alterano il confronto. Una posizione di scorrimento ripristinata può anche far caricare subito una foto più in basso.

Una buona modifica rende pronta la vista iniziale e mostra le altre immagini quando servono. Meno richieste iniziali aiutano solo se lettura e navigazione restano fluide. Usa la guida PageSpeed per confrontare i risultati.

Esempio: una copertina e dodici illustrazioni

Un articolo lungo ha una copertina nella vista iniziale e dodici foto sotto. Una regola generale differisce tutte e tredici. Sul telefono la copertina compare tardi, anche se il file è leggero. È un esempio di procedura, non un miglioramento misurato.

Verifica se la copertina è l’elemento LCP. Rimuovi il suo rinvio e prova solo quella modifica. Mantieni il rinvio selettivo e lo spazio riservato delle altre. Se la prima illustrazione è visibile subito sul computer, falla caricare normalmente.

Dopo la pubblicazione confronta l’avvio della richiesta e LCP in condizioni simili. Controlla tutte le dodici foto e usa un link di sezione. Se la copertina arriva presto ma un’animazione la nasconde, indaga il ritardo di visualizzazione invece di cambiare ancora l’attributo.

Mantenere le immagini accessibili ai motori di ricerca

Usa un testo alternativo pertinente e un indirizzo reale. Un segnaposto che resta finché qualcuno clicca o scorre richiede una verifica dello script. I consigli Google sul contenuto differito raccomandano il caricamento all’ingresso nella vista senza dipendere da un evento di interazione.

Se necessario, controlla la pagina renderizzata con l’ispezione URL di Search Console. Gli indirizzi importanti compaiono nell’HTML renderizzato? Un’impostazione di prestazioni non garantisce l’indicizzazione di tutte le immagini né posizioni migliori.

Domande frequenti

Tutte le immagini devono usare il lazy loading?

No. Scegli secondo posizione e importanza. Quelle necessarie subito, soprattutto l’immagine LCP, non devono aspettare.

Il file diventa più piccolo?

No, cambia il momento della richiesta. Ridimensiona o comprimi una copia se dimensioni o peso sono eccessivi.

Serve una libreria JavaScript?

Non per il caricamento nativo di normali immagini HTML. Con JavaScript disattivato non c’è rinvio e le immagini con indirizzi reali caricano normalmente. Uno script che conserva l’unico indirizzo in data-src richiede un’alternativa. Scegli una soluzione personalizzata solo per un bisogno preciso e verificala.

Perché alcune immagini fuori schermo caricano subito?

Possono essere abbastanza vicine o precaricate da un altro componente. Controlla l’origine della richiesta e le opzioni del tema o della galleria prima di considerarlo un errore.

La decodifica asincrona sostituisce il lazy loading?

No. decoding riguarda decodifica e visualizzazione, loading il rinvio. Un’impostazione non conferma l’altra.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)