Caricamento lento delle immagini a livello di browser per il Web

Il caricamento lento integrato è finalmente arrivato.

Il supporto a livello di browser per il caricamento lento delle immagini è ora supportato sul web. Questo video mostra una demo della funzionalità:

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. Esaminiamo nel dettaglio.

Compatibilità del browser

I browser che non supportano l'attributo loading possono semplicemente ignorarlo senza effetti collaterali.

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 computer e dispositivi mobili. Sono tantissime immagini di gatti.

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 la funzionalità 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 differito delle immagini continui a funzionare anche se JavaScript è disabilitato sul client.

Attributo loading

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

Puoi utilizzare l'attributo loading per rimandare completamente il caricamento delle immagini fuori schermo raggiungibili tramite scorrimento:

<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 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. Anche se si tratta dell'impostazione predefinita, può essere utile impostarla esplicitamente se i tuoi strumenti aggiungono automaticamente loading="lazy" in assenza di 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 è semplicemente un'istruzione per caricare l'immagine come di consueto, senza ritardare ulteriormente il caricamento se è fuori dallo schermo. Ciò non implica che l'immagine venga caricata più velocemente di un'altra immagine senza l'attributo loading="eager".

I browser danno la priorità alle risorse in base a varie euristiche e l'attributo loading indica semplicemente quando la risorsa immagine è in coda, non come ha la priorità in quella coda. eager implica solo il solito browser desideroso di utilizzare per impostazione predefinita.

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

Tieni presente che l'immagine con loading="lazy" e fetchpriority="high" verrà comunque ritardata quando è fuori dallo schermo, per poi essere recuperata con priorità elevata quando si trova quasi all'interno dell'area visibile. In questo caso, probabilmente verrà recuperata con una priorità elevata, quindi questa combinazione non dovrebbe essere davvero necessaria né utilizzata.

Soglie distanza dall'area visibile

Tutte le immagini above the fold, ovvero immediatamente visibili senza scorrere, vengono caricate normalmente. Quelle che si trovano 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 con sufficiente anticipo, in modo da terminare il caricamento quando l'utente scorre nelle vicinanze. Recuperando le immagini vicine molto prima che diventino visibili nell'area visibile, massimizziamo le possibilità che vengano già caricate nel momento in cui diventano visibili.

Rispetto alle librerie a caricamento lento JavaScript, le soglie per il recupero delle immagini che scorrono fino alla visualizzazione possono essere considerate prudenti.

La soglia di distanza non è fissa e varia in base a diversi 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. Questi numeri, e persino l'approccio del recupero solo quando viene raggiunta una determinata distanza dall'area visibile, potrebbero cambiare in futuro man mano che il team di Chrome migliora l'euristica per determinare quando iniziare il caricamento.

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

A partire da luglio 2020, Chrome ha apportato miglioramenti significativi per allineare le soglie della distanza di caricamento lento dall'area visibile delle immagini 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 relative alla distanza dall'area visibile ci consentono ancora di garantire che le immagini vengano probabilmente caricate nel momento in cui un utente vi ha fatto scorrere.

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):

Vecchie soglie e nuove soglie:

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

Ci impegniamo a collaborare con la community degli standard web per esplorare un miglior allineamento nel modo in cui vengono gestite le soglie relative alla distanza dall'area visibile nei diversi browser.

Le immagini devono includere attributi relativi alle dimensioni

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 prenotare spazio sufficiente per le immagini sulla pagina, è consigliabile che tutti i tag <img> includano gli attributi width e height. Senza le dimensioni specificate, possono verificarsi variazioni del layout, più evidenti nelle pagine il cui caricamento richiede un po' di tempo.

<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 vengano caricati lentamente o meno. Con il caricamento lento, questo può diventare più pertinente. L'impostazione di width e height sulle immagini nei browser moderni consente inoltre ai browser di dedurre le loro dimensioni intrinseche.

Nella maggior parte degli scenari le immagini vengono comunque caricate lentamente se non vengono incluse le dimensioni, ma esistono alcuni casi limite di cui è bene essere a conoscenza. Senza width e height specificati, le dimensioni dell'immagine sono inizialmente 0 × 0 pixel. Se hai una galleria di immagini di questo tipo, il browser potrebbe concludere che si adattano tutte all'area visibile all'inizio, in quanto ciascuna non occupa praticamente spazio e nessuna immagine viene spostata fuori schermo. In questo caso, il browser stabilisce che tutte le opzioni sono visibili all'utente e decide di caricarle tutte.

Inoltre, specificando le dimensioni dell'immagine si riducono le probabilità che si verifichino variazioni del layout. Se non riesci a includere le dimensioni per le tue immagini, caricarle lentamente può essere un compromesso tra il risparmio delle risorse di rete e il rischio di variazioni del layout.

Sebbene il caricamento lento in Chromium sia implementato in modo tale che le immagini possano essere caricate una volta visibili, esiste comunque una piccola probabilità che non siano state ancora caricate. In questo caso, gli attributi width e height mancanti in queste immagini aumentano il loro impatto sulla metrica Cumulative Layout Shift.

Le immagini definite utilizzando l'elemento <picture> possono anche essere caricate tramite caricamento lento:

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

Anche se sarà un browser a decidere quale immagine caricare da qualsiasi elemento <source>, l'attributo loading deve essere incluso solo nell'elemento <img> di riserva.

Evita il caricamento lento delle immagini che si trovano nella prima area visibile visibile

Dovresti evitare di impostare loading=lazy per tutte le immagini che si trovano nella prima area visibile visibile. Ciò è particolarmente importante per le immagini LCP. Per saperne di più, consulta l'articolo Gli effetti sulle prestazioni di un caricamento lento eccessivo.

Ti consigliamo di aggiungere loading=lazy solo alle immagini posizionate below the fold, se possibile. Le immagini caricate con impazienza possono essere recuperate immediatamente, mentre le immagini caricate lentamente il browser deve attendere fino a quando non riconosce la posizione dell'immagine nella pagina, il che si basa sul IntersectionObserver per essere disponibile.

In genere, le immagini all'interno dell'area visibile devono essere caricate con attenzione utilizzando le impostazioni predefinite del browser. Non è necessario specificare loading=eager affinché ciò sia valido per le immagini nell'area visibile.

<!-- 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 ne ignorano la presenza. Sebbene questi browser non usufruiscano ovviamente dei vantaggi del caricamento lento, l'inclusione dell'attributo non ha alcun impatto negativo su di essi.

Domande frequenti

È previsto il caricamento lento automatico delle immagini in Chrome?

In precedenza, Chromium caricava automaticamente le immagini che erano adatte a essere differite se in Chrome per Android era attivata la modalità Lite e se l'attributo loading non era stato fornito o impostato come loading="auto". Tuttavia, la modalità Lite è stata ritirata (così come la versione loading="auto" non standard) e al momento non è previsto il caricamento lento automatico delle immagini in Chrome.

Posso modificare la distanza che deve avere un'immagine prima che venga attivato un 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.

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

No, al momento può essere utilizzata solo con i tag <img>.

Esiste uno svantaggio del caricamento lento delle immagini che si trovano nell'area visibile del dispositivo?

È più sicuro evitare di inserire loading=lazy nelle immagini above the fold, poiché Chrome non precarica le immagini loading=lazy nello scanner di precaricamento e ritarda il recupero di queste immagini fino al completamento di tutto il layout. Per saperne di più, consulta Evitare il caricamento lento di immagini che si trovano nella prima area visibile visibile.

Come funziona l'attributo loading con le immagini che sono nell'area visibile, ma non immediatamente visibili (ad esempio, dietro un carosello o nascoste dal CSS per determinate dimensioni dello schermo)?

L'utilizzo di loading="lazy" potrebbe impedirne il caricamento quando non sono visibili, ma rientrano nella distanza calcolata. 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 per nascondere le immagini, come l'uso dello stile opacity:0, comporteranno il caricamento delle immagini. Testa sempre a fondo la tua implementazione per assicurarti che funzioni come previsto.

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

Con il pieno supporto del caricamento lento nativo ora disponibile nei browser moderni, ti consigliamo di riconsiderare se hai ancora 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 maggiore controllo su quando viene attivato il caricamento lento.

Come gestisco i browser che non supportano il caricamento lento?

Crea un polyfill o utilizza una libreria di terze parti per eseguire il caricamento lento delle immagini sul tuo sito. La proprietà loading può essere utilizzata per rilevare se la funzionalità è supportata nel browser:

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

Ad esempio, lazysizes è una libreria comune di caricamento lento JavaScript. Puoi rilevare il supporto dell'attributo loading per il caricamento di 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 caricamento impetuoso nei browser non supportati. Se l'attributo loading è supportato, scambia data-src con src.
• Se loading non è supportato, carica un file di riserva (lazysize) e avvialo. Come per i documenti di lazysize, puoi utilizzare la classe lazyload come mezzo per indicare ai file lazysize quali immagini applicare al 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 pattern. Provalo in un browser meno recente per vedere il fallback in azione.

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

Anche <iframe loading=lazy> è stato standardizzato ed è già implementato in Chromium e Safari. In questo modo puoi eseguire il caricamento lento degli iframe utilizzando l'attributo loading. Per ulteriori informazioni, consulta questo articolo dedicato al caricamento lento degli iframe.

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

Tutti gli annunci mostrati all'utente sotto forma di caricamento lento di immagini o iframe, proprio come 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 se la pagina viene stampata. Per informazioni dettagliate, leggi il problema n. 875403.

Lighthouse riconosce il caricamento lento a livello di browser?

Lighthouse 6.0 e versioni successive tengono conto degli approcci al caricamento lento delle immagini fuori schermo che potrebbero utilizzare soglie diverse, consentendo di superare il controllo Rimanda immagini fuori schermo.

Conclusione

L'uso del supporto per il caricamento lento delle immagini può semplificare notevolmente il miglioramento delle prestazioni delle pagine web.

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