Caricamento lento delle immagini a livello di browser per il Web

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

In questa pagina vengono illustrati i dettagli dell'implementazione del caricamento lento nel browser.

Perché il caricamento lento a livello di browser?

Secondo l'archivio HTTP, le immagini sono il tipo di asset più richiesto per la maggior parte dei siti web e solitamente occupano più larghezza di banda di qualsiasi altra risorsa. Al 90° percentile, i siti inviano oltre 5 MB di immagini su desktop e dispositivi mobili.

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

• Utilizzando l'API Intersection Observationr.
• Utilizzare i gestori di eventi scroll, resize o orientationchange

Entrambe le opzioni possono consentire agli sviluppatori di includere un comportamento di caricamento lento e molti sviluppatori hanno creato librerie di terze parti per fornire astrazioni ancora più facili da usare.

Il caricamento lento supportato direttamente dal browser, tuttavia, non è necessaria una libreria esterna. Il caricamento lento a livello di browser assicura inoltre che il caricamento delle immagini continui a funzionare anche se il client disattiva JavaScript. Tuttavia, il caricamento viene differito solo se JavaScript è abilitato.

Attributo loading

Chrome carica le immagini con priorità diverse a seconda di dove si trovano rispetto all'area visibile 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 rimandare completamente il caricamento delle immagini fuori schermo:

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

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

• lazy: rinvia il caricamento della risorsa fino a quando non raggiunge una distanza calcolata dall'area visibile.
• eager: comportamento di caricamento predefinito del browser, che equivale a non includere l'attributo e significa che l'immagine viene caricata indipendentemente da dove si trova nella pagina. Si tratta dell'impostazione predefinita, ma può essere utile impostarla in modo esplicito se gli strumenti aggiungono automaticamente loading="lazy" quando non è presente un valore esplicito o se il linter si lamenta 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 schermo. L'immagine non viene caricata più velocemente di un'altra immagine priva di attributo loading.

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

Un'immagine con loading="lazy" e fetchpriority="high" viene ancora ritardata quando è fuori schermo e viene quindi recuperata con priorità elevata quando si trova quasi all'interno dell'area visibile. Questa combinazione non è davvero necessaria perché il browser probabilmente caricherebbe comunque l'immagine con priorità elevata.

Soglie distanza dall'area visibile

Tutte le immagini immediatamente visibili senza dover scorrere vengono caricate normalmente. Le immagini molto al di sotto dell'area visibile del dispositivo vengono recuperate solo quando l'utente scorre vicino a queste ultime.

L'implementazione del caricamento lento in Chromium cerca di garantire che le immagini fuori schermo vengano caricate abbastanza presto da terminare il caricamento nel momento in cui l'utente scorre le immagini, recuperandole ben prima che diventino visibili nell'area visibile.

La soglia di distanza varia in base ai seguenti fattori:

• Il tipo di risorsa immagine recuperata
• Il tipo di connessione effettivo

Puoi trovare i valori predefiniti per i diversi tipi di connessione effettivi nell'origine Chromium. Puoi sperimentare queste diverse soglie limitando la rete in DevTools.

Miglioramento del risparmio dei dati e delle soglie relative alla distanza dall'area visibile

A luglio 2020, Chrome ha apportato miglioramenti significativi per allineare le soglie della distanza di caricamento lento delle immagini dall'area visibile al fine di soddisfare meglio le aspettative degli sviluppatori.

Sulle connessioni veloci (4G), abbiamo ridotto le soglie di distanza dall'area visibile di Chrome da 3000px a 1250px e, per le connessioni più lente (3G o inferiori), abbiamo modificato la soglia da 4000px a 2500px. Con questa modifica si possono raggiungere due obiettivi:

• <img loading=lazy> si comporta in modo più simile all'esperienza offerta dalle librerie di caricamento lento JavaScript.
• Le nuove soglie di distanza dall'area visibile indicano ancora che le immagini verranno probabilmente caricate nel momento in cui l'utente scorre fino a queste ultime.

Di seguito puoi trovare un confronto tra le vecchie soglie di distanza dall'area visibile e quelle nuove per una delle nostre demo su una connessione veloce (4G):

Confronto tra vecchie soglie e nuove soglie:

e le nuove soglie rispetto a LazySizes (una popolare libreria di caricamento lento JavaScript):

Specifica gli attributi relativi alle dimensioni delle immagini

Mentre il browser carica un'immagine, non conosce immediatamente le dimensioni dell'immagine, a meno che non siano specificate esplicitamente. Per consentire al browser di riservare abbastanza spazio per le immagini sulla pagina ed evitare variazioni del layout improvvise, ti 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 incorporato:

<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 tu li carichi, ma il caricamento lento può renderlo più importante.

Il caricamento lento in Chromium è implementato in modo da aumentare le probabilità che le immagini vengano caricate non appena sono visibili, ma esiste comunque la possibilità che non vengano caricate al momento giusto. In questo caso, non specificare width e height nelle immagini aumenta il loro impatto sulla variazione cumulativa del layout. Se non riesci a specificare le dimensioni delle immagini, il caricamento lento può comportare un risparmio delle risorse di rete, a rischio di un aumento delle variazioni del layout.

Nella maggior parte degli scenari, le immagini continuano a caricarsi lentamente se non specifichi le dimensioni, ma esistono alcuni casi limite di cui dovresti essere a conoscenza. Senza i valori width e height specificati, le dimensioni dell'immagine sono di 0 × 0 pixel per impostazione predefinita. Se hai una galleria di immagini, il browser potrebbe decidere che vengano tutte inserite nell'area visibile all'inizio, dato che ogni immagine non occupa spazio e nessuna immagine viene spostata fuori schermo. In questo caso, il browser decide di caricare tutto, rallentando così 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 lento 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 qualsiasi elemento <source>, devi solo aggiungere loading all'elemento <img> di riserva.

Carica sempre le immagini visibili nella prima area visibile

Per le immagini che sono visibili al primo caricamento della pagina da parte dell'utente, in particolare per le immagini LCP, utilizza il caricamento pronto predefinito del browser in modo che siano subito disponibili. Per saperne di più, consulta Gli effetti sulle prestazioni di un caricamento lento eccessivo.

Usa il criterio loading=lazy solo per le immagini esterne all'area visibile iniziale. Il browser non può eseguire il caricamento lento di un'immagine finché non riconosce la sua posizione nella pagina, il che 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">

Degrado controllato

I browser che non supportano l'attributo loading lo ignorano. Non usufruiscono dei vantaggi del caricamento lento, ma l'inclusione non comporta alcun impatto negativo.

Domande frequenti

Posso utilizzare il caricamento lento automatico delle immagini in Chrome?

In precedenza, Chromium caricava automaticamente tutte le immagini che erano adatte a essere differite se la modalità Lite era attivata su Chrome per Android e l'attributo loading non era fornito o era impostato su loading="auto". Tuttavia, la modalità Lite e loading="auto" sono state deprecate e non è previsto il caricamento lento automatico delle immagini in Chrome.

Posso modificare la vicinanza di un'immagine all'area visibile prima del caricamento?

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

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

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

loading può funzionare con immagini nell'area visibile non immediatamente visibili?

L'uso 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 oppure nascoste da CSS per determinate dimensioni dello schermo. Ad esempio, Chrome, Safari e Firefox non caricano le immagini usando lo stile display: none; né sull'elemento immagine né su un elemento principale. Tuttavia, altre tecniche per nascondere le immagini, come l'utilizzo dello stile opacity:0, causano comunque il caricamento dell'immagine nel browser. Testa sempre a fondo l'implementazione per assicurarti che funzioni come previsto.

Chrome 121 ha modificato il comportamento delle immagini a scorrimento orizzontale come i caroselli. Queste soglie ora utilizzano le stesse soglie dello scorrimento verticale. Ciò significa che, nel caso d'uso del carosello, le immagini verranno caricate prima di essere visibili nell'area visibile. Ciò significa che il caricamento dell'immagine ha meno probabilità di essere visibile all'utente, ma a un costo maggiore di download. Utilizza la demo del caricamento lento orizzontale per confrontare il comportamento in Chrome rispetto a Safari e Firefox.

Che cosa succede se utilizzo già una libreria di terze parti o uno script per il caricamento lento delle immagini?

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

Un motivo per continuare a utilizzare una libreria di terze parti insieme a loading="lazy" è fornire un polyfill per i browser che non supportano l'attributo o avere un maggiore controllo sull'attivazione del caricamento lento.

Come gestisco i browser che non supportano il caricamento lento? {browsers-dont-support}

Crea un polyfill o utilizza una libreria di terze parti per eseguire il caricamento lento delle immagini 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 libreria molto popolare per il caricamento lento JavaScript. Puoi rilevare il supporto dell'attributo loading per caricare lazysize come libreria di riserva solo quando loading non è supportato. L'operazione funziona nel seguente modo:

• Sostituisci <img src> con <img data-src> per evitare un carico imprevedibile nei browser non supportati. Se l'attributo loading è supportato, scambia data-src con src.
• Se loading non è supportato, carica un file di riserva da lazysize e avvialo, utilizzando la classe lazyload per indicare quali immagini eseguire il caricamento lento:

<!-- 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 modello. Provalo in un browser meno recente per vedere il funzionamento di riserva.

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

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

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

Per tutti gli annunci mostrati all'utente come immagini o iframe, il caricamento lento è simile a quello di qualsiasi altra immagine o iframe.

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

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

Lighthouse riconosce il caricamento lento a livello di browser?

Lighthouse 6.0 e un fattore superiore negli approcci per il caricamento lento delle immagini fuori schermo che possono utilizzare soglie diverse, consentendo di superare il controllo Rimanda immagini fuori schermo.

Caricamento lento delle immagini per migliorare le prestazioni

Il supporto dei browser per le immagini con caricamento lento può semplificare notevolmente il miglioramento delle prestazioni delle pagine.

Hai notato un comportamento insolito nell'attivazione di questa funzionalità in Chrome? Segnala un bug.