Caricamento lento delle immagini a livello di browser per il Web

Addy Osmani
Houssein Djirdeh
Mathias Bynens
Barry Pollard

Supporto dei browser

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 15.4.

Puoi utilizzare l'attributo loading per il caricamento differito delle immagini senza dover scrivere codice personalizzato per il caricamento differito o utilizzare una libreria JavaScript separata. Ecco una demo della funzionalità:

Le immagini con caricamento lento vengono caricate man mano che l'utente scorre la pagina.

Questa pagina illustra i dettagli dell'implementazione del caricamento lento nel browser.

Perché il caricamento lento a livello di browser?

Secondo HTTP Archive, le immagini sono il tipo di asset più richiesto per la maggior parte dei siti web e di solito occupano più larghezza di banda di qualsiasi altra risorsa. Nel 90° percentile, i siti inviano più di 5 MB di immagini su computer e dispositivi mobili.

In precedenza, esistevano due modi per posticipare il caricamento delle immagini fuori schermo:

Entrambe le opzioni consentono agli sviluppatori di includere il comportamento di caricamento differito e molti sviluppatori hanno creato librerie di terze parti per fornire astratti ancora più facili da usare.

Tuttavia, con il caricamento differito supportato direttamente dal browser, non è necessaria una libreria esterna. Il caricamento lento a livello di browser garantisce inoltre che il caricamento delle immagini funzioni anche se il client disattiva JavaScript. Tieni presente, però, che il caricamento viene differito solo quando JavaScript è attivato.

Attributo loading

Chrome carica le immagini con priorità diverse a seconda della loro posizione rispetto al viewport del dispositivo. Le immagini sotto l'area visibile vengono caricate con una priorità inferiore, ma vengono comunque recuperate durante il caricamento della pagina.

Puoi utilizzare l'attributo loading per posticipare completamente il caricamento delle immagini offscreen:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Di seguito sono riportati i valori supportati per l'attributo loading:

  • lazy: posticipa il caricamento della risorsa finché non raggiunge una distanza calcolata dall'area visibile.
  • eager: comportamento di caricamento predefinito del browser, che equivale a non includere l'attributo e indica che l'immagine viene caricata indipendentemente da dove si trova nella pagina. Questo è il valore predefinito, ma può essere utile impostarlo esplicitamente se il tuo strumento aggiunge automaticamente loading="lazy" quando non è presente un valore esplicito o se il tuo linter segnala un errore se non è impostato esplicitamente.

Relazione tra l'attributo loading e la priorità di recupero

Il valore eager è un'istruzione per caricare l'immagine come di consueto, senza ritardare ulteriormente il caricamento se l'immagine è fuori dallo schermo. L'immagine non viene caricata più velocemente di un'altra immagine che non ha un attributo loading.

Se vuoi aumentare la priorità di recupero di un'immagine importante (ad esempio l'immagine LCP), utilizza Priorità recupero con fetchpriority="high".

Un'immagine con loading="lazy" e fetchpriority="high" è ancora in ritardo mentre è fuori schermo, quindi viene recuperata con una priorità elevata quando è quasi nell'area visibile. Questa combinazione non è necessaria perché il browser caricare probabilmente l'immagine con priorità elevata.

Soglie di distanza dall'area visibile

Tutte le immagini immediatamente visibili senza scorrimento vengono caricate normalmente. Le immagini molto al di sotto dell'area visibile del dispositivo vengono recuperate solo quando l'utente scorre fino a quelle posizioni.

L'implementazione del caricamento lento di Chromium cerca di garantire che le immagini fuori schermo vengano caricate in tempo per essere completate quando l'utente arriva a visualizzarle, recuperandole molto prima che diventino visibili nell'area visibile.

La soglia di distanza varia in base ai seguenti fattori:

Puoi trovare i valori predefiniti per i diversi tipi di connessione efficaci nel codice sorgente di Chromium. Puoi provare queste diverse soglie limitando la rete in DevTools.

Miglioramento delle soglie di risparmio dei dati e di distanza dal viewport

A luglio 2020, Chrome ha apportato miglioramenti significativi per allineare le soglie di distanza dal viewport per il caricamento lento delle immagini in modo da soddisfare meglio le aspettative degli sviluppatori.

Su connessioni veloci (4G), abbiamo ridotto le soglie di distanza dal viewport di Chrome da 3000px a 1250px e su connessioni più lente (3G o precedenti), abbiamo modificato la soglia da 4000px a 2500px. Questa modifica consente di ottenere due risultati:

  • <img loading=lazy> si comporta in modo più simile all'esperienza offerta dalle librerie di caricamento differito JavaScript.
  • Le nuove soglie di distanza dal viewport indicano comunque che le immagini saranno probabilmente state caricate quando un utente le raggiungerà con lo scorrimento.

Di seguito puoi trovare un confronto tra le vecchie e le nuove soglie di distanza dal viewport per una delle nostre demo su una connessione veloce (4G):

Le nuove e migliorate soglie per il caricamento lento delle immagini, che riducono le soglie di distanza dal viewport per le connessioni rapide da 3000 px a 1250 px.
Confronto tra le soglie precedenti e quelle più recenti utilizzate per il caricamento differito a livello di browser.

e le nuove soglie rispetto a LazySizes (una popolare libreria JavaScript per il caricamento differito):

Le nuove soglie di distanza dal viewport in Chrome caricano 90 KB di immagini rispetto ai 70 KB di LazySizes nelle stesse condizioni di rete.
Confronto delle soglie utilizzate per il caricamento differito in Chrome e LazySizes.

Assegnare agli attributi delle dimensioni delle immagini

Quando il browser carica un'immagine, non conosce immediatamente le sue dimensioni, a meno che non siano specificate esplicitamente. Per consentire al browser di riservare abbastanza spazio su una pagina per le immagini ed evitare variazioni del layout che potrebbero causare interruzioni, consigliamo di aggiungere gli attributi width e height a tutti i tag <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

In alternativa, specifica i valori direttamente in uno stile in linea:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

La best practice per l'impostazione delle dimensioni si applica ai tag <img> indipendentemente dal fatto che vengano caricati in modo lazy, ma il caricamento lazy può renderla più importante.

Il caricamento lento in Chromium è implementato in modo da aumentare le probabilità che le immagini vengano caricate non appena sono visibili, ma c'è ancora la possibilità che non vengano caricate al momento giusto. In questo caso, non specificare width e height nelle immagini aumenta il loro impatto sul Cumulative Layout Shift. Se non puoi specificare le dimensioni delle immagini, il caricamento differito può farti risparmiare risorse di rete con il rischio di aumentare i spostamenti del layout.

Nella maggior parte dei casi, le immagini vengono caricate in modo lazy se non specifichi le dimensioni, ma esistono alcuni casi limite che devi conoscere. Se non specifichi width e height, le dimensioni dell'immagine predefinite sono 0 x 0 pixel. Se hai una galleria di immagini, il browser potrebbe decidere che tutte rientrano nell'area visibile all'inizio, perché ogni immagine non occupa spazio e nessuna viene spostata fuori dallo schermo. In questo caso, il browser decide di caricare tutto, rallentando il caricamento della pagina.

Per un esempio di come loading funziona con un numero elevato di immagini, consulta questa demo.

Puoi anche eseguire il caricamento differito delle immagini che hai definito utilizzando l'elemento <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Anche se è il browser a decidere quale immagine caricare da uno degli elementi <source>, devi solo aggiungere loading all'elemento di riserva <img>.

Caricare sempre in modo eager le immagini visibili nella prima area visibile

Per le immagini visibili al primo caricamento della pagina e in particolare per le immagini LCP, utilizza il caricamento immediato predefinito del browser in modo che siano disponibili subito. Per ulteriori informazioni, consulta Effetti del caricamento lento eccessivo sul rendimento.

Utilizza loading=lazy solo per le immagini esterne all'area visibile iniziale. Il browser non può eseguire il caricamento differito di un'immagine finché non sa dove deve trovarsi nella pagina, il che ne rallenta il caricamento.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Riduzione controllata

I browser che non supportano l'attributo loading lo ignorano. Non ottengono i vantaggi del caricamento lento, ma la loro inclusione non ha alcun impatto negativo.

Domande frequenti

Alcune domande frequenti sul caricamento differito a livello di browser.

Posso caricare automaticamente le immagini in Chrome?

In precedenza, Chromium caricava automaticamente le immagini adatte al posticipamento se la modalità Lite era attivata su Chrome per Android e l'attributo loading non era fornito o impostato su loading="auto". Tuttavia, la modalità Lite e loading="auto" sono state ritirate e non è prevista la possibilità di fornire il caricamento differito automatico delle immagini in Chrome.

Posso modificare la distanza a cui deve trovarsi un'immagine rispetto all'area visibile prima del caricamento?

Questi valori sono hardcoded e non possono essere modificati tramite l'API. Tuttavia, potrebbero cambiare in futuro man mano che i browser sperimentano diverse distanze e variabili di soglia.

Le immagini di sfondo CSS possono utilizzare l'attributo loading?

No, puoi utilizzarlo solo con i tag <img>.

L'utilizzo di loading="lazy" può impedire il caricamento delle immagini quando non sono visibili, ma si trovano entro la distanza calcolata. Queste immagini potrebbero trovarsi dietro un carosello o essere nascoste da CSS per determinate dimensioni dello schermo. Ad esempio, Chrome, Safari e Firefox non caricano le immagini utilizzando lo stile display: none;, né sull'elemento immagine né su un elemento principale. Tuttavia, altre tecniche di occultamento delle immagini, come l'uso dello opacity:0 stile, fanno comunque sì che il browser carichi l'immagine. Testa sempre accuratamente la tua implementazione per assicurarti che funzioni come previsto.

Chrome 121 ha modificato il comportamento delle immagini con scorrimento orizzontale, come i caroselli. Ora utilizzano le stesse soglie dello scorrimento verticale. Ciò significa che, per il caso d'uso del carosello, le immagini verranno caricate prima di essere visibili nel viewport. Ciò significa che il caricamento delle immagini è meno probabile che venga notato dall'utente, ma a costo di un maggior numero di download. Utilizza la demo del caricamento lento orizzontale per confrontare il comportamento in Chrome rispetto a Safari e Firefox.

Cosa succede se utilizzo già una libreria o uno script di terze parti per il caricamento differito delle immagini?

Grazie al supporto completo del caricamento differito integrato nei browser moderni, probabilmente non hai bisogno di una libreria o di uno script di terze parti per il caricamento differito delle immagini.

Un motivo per continuare a utilizzare una raccolta di terze parti insieme a loading="lazy" è fornire un polyfill per i browser che non supportano l'attributo o per avere un maggiore controllo sul momento in cui viene attivato il caricamento differito.

Come faccio a gestire i browser che non supportano il caricamento differito?

Il caricamento lento delle immagini a livello di browser è ben supportato su tutti i principali browser ed è consigliato per la maggior parte dei casi d'uso, in quanto elimina la necessità di dipendenze aggiuntive da JavaScript.

Tuttavia, se hai bisogno di supportare più browser o vuoi avere un maggiore controllo sulle soglie di caricamento differito, puoi utilizzare una libreria di terze parti per caricare le immagini in modo differito sul tuo sito.

Puoi utilizzare la proprietà loading per rilevare se un browser supporta la funzionalità:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Ad esempio, lazysizes è una popolare libreria di caricamento lento JavaScript. Puoi rilevare il supporto dell'attributo loading per caricare lazysizes come libreria di riserva solo quando loading non è supportato. Ecco come funziona:

  • Sostituisci <img src> con <img data-src> per evitare un caricamento immediato nei browser non supportati. Se l'attributo loading è supportato, sostituisci data-src con src.
  • Se loading non è supportato, carica un'immagine di riserva da lazysizes e avviala utilizzando la classe lazyload per indicare le immagini da caricare in modo lazy:
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Ecco una demo di questo pattern. Provalo in un browser precedente per vedere il fallback in azione.

Il caricamento differito per gli iframe è supportato anche nei browser?

Supporto dei browser

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

Anche <iframe loading=lazy> è stato standardizzato. In questo modo puoi eseguire il caricamento lazy degli iframe utilizzando l'attributo loading. Per ulteriori informazioni, consulta l'articolo È arrivato il momento di eseguire il caricamento lento degli iframe offscreen.

In che modo il caricamento differito a livello di browser influisce sugli annunci su una pagina web?

Tutti gli annunci mostrati all'utente come immagini o iframe vengono caricati in modo lazy come qualsiasi altra immagine o iframe.

Come vengono gestite le immagini quando una pagina web viene stampata?

Tutte le immagini e gli iframe vengono caricati immediatamente quando la pagina viene stampata. Per informazioni dettagliate, consulta il problema 875403.

Lighthouse riconosce il caricamento lento a livello di browser?

Lighthouse 6.0 e versioni successive tengono conto degli approcci per il caricamento lento delle immagini offscreen che possono utilizzare soglie diverse, consentendo di superare l'audit Rinvia le immagini offscreen.

Carica le immagini con il caricamento lento per migliorare il rendimento

Il supporto del browser per il caricamento lento delle immagini può semplificare notevolmente il miglioramento delle prestazioni delle tue pagine.

Noti un comportamento insolito con questa funzionalità abilitata in Chrome? Segnala un bug.