Caricamento lento di immagini ed elementi <iframe>

Le immagini e gli elementi <iframe> spesso consumano più larghezza di banda rispetto ad altri tipi di risorse. Nel caso degli elementi <iframe>, il caricamento e il rendering delle pagine al loro interno può richiedere una discreta quantità di tempo di elaborazione aggiuntivo.

Nel caso di immagini con caricamento lento, rimandare il caricamento delle immagini che si trovano al di fuori dell'area visibile iniziale può essere utile per ridurre la contesa della larghezza di banda per risorse più importanti all'interno dell'area visibile iniziale. Ciò può migliorare la Largest Contentful Paint (LCP) di una pagina in alcuni casi in cui le connessioni di rete sono scarse e la larghezza di banda riallocata può aiutare i candidati LCP a caricare e visualizzare più velocemente.

Per quanto riguarda gli elementi <iframe>, è possibile migliorare l'Interaction to Next Paint (INP) di una pagina durante l'avvio tramite il caricamento lento. Questo perché un <iframe> è un documento HTML completamente separato con le proprie sottorisorse. Anche se gli elementi <iframe> possono essere eseguiti in un processo separato, non è raro condividere un processo con altri thread, il che può creare condizioni in cui le pagine diventano meno reattive all'input dell'utente.

Di conseguenza, rimandare il caricamento delle immagini fuori schermo e degli elementi <iframe> è una tecnica che vale la pena seguire e richiede uno sforzo minimo per ottenere un ritorno ragionevolmente buono in termini di prestazioni. Questo modulo spiega il caricamento lento di questi due tipi di elementi per offrire un'esperienza utente migliore e più rapida durante il periodo di avvio critico della pagina.

Immagini con caricamento lento con l'attributo loading

L'attributo loading può essere aggiunto agli elementi <img> per indicare ai browser come devono essere caricati:

• "eager" comunica al browser che l'immagine deve essere caricata immediatamente, anche se si trova al di fuori dell'area visibile iniziale. Questo è anche il valore predefinito per l'attributo loading.
• "lazy" impedisce il caricamento di un'immagine finché non si trova a una distanza impostata dall'area visibile visibile. Questa distanza varia in base al browser, ma spesso è impostata in modo da essere abbastanza grande da caricare l'immagine nel momento in cui l'utente scorre fino a visualizzarla.

Vale inoltre la pena notare che se utilizzi l'elemento <picture>, l'attributo loading deve comunque essere applicato all'elemento <img> secondario, non all'elemento <picture> stesso. Questo perché l'elemento <picture> è un contenitore che contiene altri elementi <source> che rimandano a diverse immagini candidati e il candidato scelto dal browser viene applicato direttamente al relativo elemento <img> secondario.

Non eseguire il caricamento lento delle immagini che si trovano nell'area visibile iniziale

Aggiungi l'attributo loading="lazy" solo agli elementi <img> che si trovano al di fuori dell'area visibile iniziale. Tuttavia, può essere complesso conoscere la posizione esatta di un elemento rispetto all'area visibile prima della visualizzazione della pagina. Occorre prendere in considerazione dispositivi, dimensioni dell'area visibile e proporzioni diverse.

Ad esempio, un'area visibile per computer può essere molto diversa da un'area visibile su un telefono cellulare in quanto esegue il rendering di più spazio verticale che potrebbe essere in grado di adattarsi nell'area visibile iniziale che non verrebbero visualizzate nell'area visibile iniziale di un dispositivo fisicamente più piccolo. Anche i tablet utilizzati con orientamento verticale mostrano una notevole quantità di spazio verticale, forse anche più di alcuni computer.

Tuttavia, in alcuni casi è abbastanza chiaro che debba evitare di applicare loading="lazy". Ad esempio, dovresti omettere l'attributo loading="lazy" dagli elementi <img> nel caso di immagini hero o altri casi d'uso di immagini in cui è probabile che gli elementi <img> vengano mostrati above the fold o vicino alla parte superiore del layout su qualsiasi dispositivo. Questo è ancora più importante per le immagini che potrebbero essere candidati LCP.

Le immagini caricate tramite caricamento lento devono attendere che il browser termina il layout per sapere se la posizione finale dell'immagine si trova all'interno dell'area visibile. Ciò significa che se un elemento <img> nell'area visibile ha un attributo loading="lazy", viene richiesto solo dopo che tutto il CSS è stato scaricato, analizzato e applicato alla pagina, anziché essere recuperato non appena viene rilevato dallo scanner di precaricamento nel markup non elaborato.

Poiché l'attributo loading nell'elemento <img> è supportato su tutti i principali browser, non è necessario utilizzare JavaScript per eseguire il caricamento lento delle immagini, in quanto l'aggiunta di codice JavaScript aggiuntivo a una pagina per fornire funzionalità già fornite dal browser influisce su altri aspetti delle prestazioni della pagina, come l'INP.

Demo sul caricamento lento delle immagini

Elementi <iframe> con caricamento lento

Il caricamento lento degli elementi <iframe> finché non sono visibili nell'area visibile consente di risparmiare dati significativi e migliorare il caricamento delle risorse fondamentali necessarie per il caricamento della pagina di primo livello. Inoltre, poiché gli elementi <iframe> sono essenzialmente interi documenti HTML caricati all'interno di un documento di primo livello, possono includere un numero significativo di sottorisorse, in particolare JavaScript, che può influire notevolmente sull'INP di una pagina se le attività all'interno di questi frame richiedono tempi di elaborazione significativi.

Gli incorporamenti di terze parti sono un caso d'uso comune per gli elementi <iframe>. Ad esempio, i video player incorporati o i post dei social media utilizzano comunemente elementi <iframe> e spesso richiedono un numero significativo di risorse secondarie, il che può anche generare un conflitto di larghezza di banda per le risorse della pagina di primo livello. Ad esempio, il caricamento lento dell'incorporamento di un video di YouTube consente di risparmiare più di 500 KiB durante il caricamento iniziale della pagina, mentre il caricamento lento del plug-in del pulsante Mi piace di Facebook consente di risparmiare più di 200 KiB, nella maggior parte dei casi in JavaScript.

In ogni caso, ogni volta che in una pagina hai <iframe> below the fold, dovresti valutare la possibilità di caricarlo lentamente se non è importante caricarlo in anticipo, poiché in questo modo può migliorare notevolmente l'esperienza utente.

Attributo loading per gli elementi <iframe>

L'attributo loading negli elementi <iframe> è supportato anche in tutti i principali browser. I valori dell'attributo loading e i relativi comportamenti sono gli stessi degli elementi <img> che utilizzano l'attributo loading:

• "eager" è il valore predefinito. Comunica al browser di caricare immediatamente il codice HTML dell'elemento <iframe> e le relative risorse secondarie.
• "lazy" impedisce il caricamento del codice HTML dell'elemento <iframe> e delle relative risorse secondarie fino a quando non si trova a una distanza predefinita dall'area visibile.

Demo del caricamento lento di iframe

Facciate

Anziché caricare un incorporamento immediatamente durante il caricamento della pagina, puoi caricarlo on demand in risposta a un'interazione dell'utente. A questo scopo, mostra un'immagine o un altro elemento HTML appropriato finché l'utente non interagisce con l'immagine. Una volta che l'utente interagisce con l'elemento, puoi sostituirlo con l'incorporamento di terze parti. Questa tecnica è nota come facade.

Un caso d'uso comune per le facciate è l'incorporamento di video da servizi di terze parti in cui l'incorporamento può comportare il caricamento di molte sottorisorse aggiuntive e potenzialmente costose, come JavaScript, oltre ai contenuti video stessi. In questo caso, a meno che non sia legittima la necessità di attivare la riproduzione automatica di un video, gli incorporamenti dei video richiedono all'utente di interagire con i video prima della riproduzione facendo clic sul pulsante di riproduzione.

Si tratta di un'ottima opportunità per mostrare un'immagine statica che assomiglia all'incorporamento del video e che ti consenta di risparmiare una larghezza di banda significativa. Una volta che l'utente fa clic sull'immagine, questa viene sostituita dall'effettiva incorporamento <iframe>, che attiva il codice HTML dell'elemento <iframe> di terze parti e le relative risorse secondarie per iniziare il download.

Oltre a migliorare il caricamento iniziale della pagina, un altro aspetto chiave è che se l'utente non riproduce mai il video, le risorse necessarie per recapitarlo non vengono mai scaricate. Questo è un buon modello, in quanto garantisce che l'utente scarichi solo ciò che vuole effettivamente, senza fare ipotesi potenzialmente errate sulle sue esigenze.

I widget di chat sono un altro eccellente caso d'uso per la tecnica di facciata. La maggior parte dei widget di chat scarica quantità significative di JavaScript che possono influire negativamente sul caricamento della pagina e sulla reattività all'input dell'utente. Come per il caricamento iniziale, il costo viene addebitato al momento del caricamento, ma nel caso di un widget della chat, non tutti gli utenti intendono mai interagire con il widget.

Con facciata, invece, è possibile sostituire il pulsante "Avvia chat" di terze parti con un pulsante finto. Dopo che l'utente interagisce in modo significativo con l'utente, ad esempio tenendo sopra il puntatore per un periodo di tempo ragionevole o con un clic, il widget di chat reale e funzionale viene inserito quando l'utente ne ha bisogno.

Anche se puoi sicuramente creare le tue facciate, sono disponibili opzioni open source per terze parti più popolari, ad esempio lite-youtube-embed per i video di YouTube, lite-vimeo-embed per i video Vimeo e React Live Chat Loader per i widget di chat.

Librerie a caricamento lento JavaScript

Se hai bisogno di eseguire il caricamento lento degli elementi <video>, dell'elemento <video> poster, delle immagini caricate dalla proprietà CSS background-image o di altri elementi non supportati, puoi utilizzare una soluzione di caricamento lento basata su JavaScript, come lazysizes o yall.js, in quanto il caricamento lento di questi tipi di risorse non è una funzionalità a livello di browser.

In particolare, la riproduzione automatica e il loop degli elementi <video> senza una traccia audio sono un'alternativa molto più efficiente rispetto all'utilizzo di GIF animate, che spesso possono essere diverse volte più grandi di una risorsa video di qualità visiva equivalente. Anche così, questi video possono comunque essere significativi in termini di larghezza di banda, per cui il caricamento lento è un'ottimizzazione aggiuntiva che può fare molto per ridurre gli sprechi di larghezza di banda.

La maggior parte di queste librerie funziona utilizzando l'API Intersection Observationr e, inoltre, l'API Mutation Observationr se il codice HTML di una pagina cambia dopo il caricamento iniziale, per riconoscere il momento in cui un elemento entra nell'area visibile dell'utente. Se l'immagine è visibile o si sta avvicinando all'area visibile, la libreria JavaScript sostituisce l'attributo non standard (spesso data-src o un attributo simile) con l'attributo corretto, ad esempio src.

Supponiamo che tu abbia un video che sostituisce una GIF animata, ma che tu voglia caricarlo lentamente con una soluzione JavaScript. Questo è possibile con yall.js con il seguente pattern di markup:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Per impostazione predefinita, yall.js osserva tutti gli elementi HTML idonei con una classe "lazy". Una volta caricato ed eseguito yall.js nella pagina, il video non viene caricato finché l'utente non lo scorre nell'area visibile. A quel punto, gli attributi data-src negli elementi <source> secondari dell'elemento <video> vengono scambiati con gli attributi src, che inviano una richiesta di download del video e ne avvia automaticamente la riproduzione.

verifica le tue conoscenze

A seguire: precaricamento e prerendering

Ora che conosci il caricamento lento delle immagini e degli elementi <iframe>, sei in grado di assicurarti che le pagine vengano caricate più rapidamente nel rispetto delle esigenze dei tuoi utenti. Tuttavia, in alcuni casi il caricamento speculativo delle risorse può essere auspicabile. Nel modulo successivo, scopri di più sul precaricamento e sul prerendering e su come queste tecniche, se utilizzate con attenzione, possono velocizzare notevolmente la navigazione alle pagine successive caricandole in anticipo.