Caricamento lento di immagini ed elementi <iframe>

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

Nel caso del caricamento lento di immagini, rinviare il caricamento di immagini che sono al di fuori dell'area visibile iniziale può essere utile per ridurre il conflitto di larghezza di banda per risorse più critiche all'interno dell'area visibile iniziale. Questo può migliorare LCP (Largest Contentful Paint) della pagina nei casi in cui le connessioni di rete sono scadenti e la larghezza di banda riallocata può aiutare i candidati LCP a caricare dipingere più velocemente.

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

Di conseguenza, il differimento del caricamento delle immagini fuori schermo e degli elementi <iframe> è una che vale la pena seguire e richiede uno sforzo piuttosto basso per ottenere una buona rendimento in termini di rendimento. Questo modulo spiega come usare il caricamento lento due tipi di elementi per un'esperienza utente migliore e più veloce durante il caricamento in un periodo di avvio critico.

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 all'esterno dell'area visibile iniziale. Questo è anche il valore predefinito per l'attributo loading.
• "lazy" rimanda il caricamento di un'immagine fino a quando non si trova entro una distanza prestabilita dal visibile. Questa distanza varia a seconda del browser, ma spesso è impostata su abbastanza grande da consentire il caricamento dell'immagine nel momento in cui l'utente vi scorre.

Vale anche la pena notare che se utilizzi l'elemento <picture>, il valore L'attributo loading deve comunque essere applicato al relativo elemento <img> secondario, non l'elemento <picture> stesso. Questo perché l'elemento <picture> è un un container che contiene altri elementi <source> che puntano a immagini candidate e il candidato scelto dal browser viene applicato direttamente al relativo elemento secondario <img>.

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

Devi aggiungere l'attributo loading="lazy" solo agli elementi <img> che sono all'esterno dell'area visibile iniziale. Tuttavia, può essere complesso conoscere la posizione esatta di un elemento rispetto all'interno dell'area visibile prima che la pagina venga eseguire il rendering. Le dimensioni dell'area visibile, le proporzioni e i dispositivi devono essere diversi considerati.

Ad esempio, l'area visibile su desktop può essere molto diversa da un'area visibile Un cellulare, poiché esegue il rendering di uno spazio verticale che potrebbe adattarsi alle immagini. nell'area visibile iniziale che non verrebbe mostrata nell'area visibile iniziale di un dispositivo fisicamente più piccolo. Sui tablet utilizzati con orientamento verticale vengono visualizzati anche una notevole quantità di spazio verticale, forse anche più di alcuni computer dispositivi mobili.

Tuttavia, in alcuni casi è abbastanza chiaro che dovresti evitare applicazione di loading="lazy". Ad esempio, devi assolutamente omettere Attributo loading="lazy" da elementi <img> in caso di immagini hero, o altri casi d'uso di immagini in cui è probabile che gli elementi <img> siano visualizzati sopra piegati 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 finisca il layout in per sapere se la posizione finale dell'immagine è all'interno dell'area visibile. Ciò significa che se un elemento <img> nell'area visibile ha un loading="lazy" viene richiesto solo dopo aver scaricato, analizzato e vengono applicate alla pagina, invece di essere recuperata non appena viene rilevata lo scanner di precaricamento nel markup non elaborato.

Poiché l'attributo loading nell'elemento <img> è supportato su tutte le principali browser non è necessario usare JavaScript per il caricamento lento delle immagini, ad esempio aggiungendo codice JavaScript aggiuntivo in una pagina per fornire le funzionalità già fornite dal browser influisce su altri aspetti delle prestazioni della pagina, come INP.

Demo del caricamento lento delle immagini

Caricamento lento di <iframe> elementi

Il caricamento lento di <iframe> elementi finché non vengono visualizzati nell'area visibile può essere salvato e migliorare il caricamento delle risorse critiche necessarie per caricare la pagina di primo livello. Inoltre, poiché gli elementi <iframe> sono sostanzialmente interi documenti HTML caricati all'interno di un documento di primo livello, includere un numero significativo di sottorisorse, in particolare JavaScript, che possono influisce notevolmente sull'INP di una pagina se le attività all'interno di quei frame richiedono molto tempo di elaborazione.

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

In ogni caso, ogni volta che hai un <iframe> below the fold in una pagina, devi Prendi in considerazione il caricamento lento se non è fondamentale caricarlo in anticipo, perché questo 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 il loro comportamento sono i come con gli elementi <img> che utilizzano l'attributo loading:

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

Demo del caricamento lento di iframe

Facciate

Invece di caricare un elemento incorporato immediatamente durante il caricamento della pagina, puoi caricarlo sul della domanda in risposta a un'interazione dell'utente. A questo scopo, puoi mostrare un'immagine o un altro elemento HTML appropriato fino a quando l'utente non vi interagisce. Una volta se l'utente interagisce con l'elemento, puoi sostituirlo con l'incorporamento di terze parti. Questa tecnica è nota come facciata.

Un caso d'uso comune per i facciata sono gli incorporamenti di video di servizi di terze parti in cui l'incorporamento può comportare il caricamento di molte altre risorse secondarie, ad esempio JavaScript, oltre ai contenuti video stessi. In tale un caso, a meno che non sia assolutamente necessario che un video venga riprodotto automaticamente, i video incorporati richiede all'utente di interagire con loro prima della riproduzione facendo clic sul pulsante .

Si tratta di un'ottima opportunità per mostrare un'immagine statica che ricorda un'immagine incorporare il video e risparmiare una notevole larghezza di banda. Dopo che l'utente fa clic sull'immagine, questa viene sostituita dall'incorporamento <iframe> effettivo, attiva l'HTML dell'elemento <iframe> di terze parti e le relative sottorisorse per iniziare download.

Oltre a migliorare il caricamento iniziale della pagina, un altro aspetto positivo è che se la l'utente non riproduce mai il video, le risorse necessarie per la sua pubblicazione non sono mai scaricato. Si tratta di un buon schema, in quanto garantisce che l'utente scarichi solo ciò che vogliono in realtà, senza fare ipotesi potenzialmente errate sugli in base alle esigenze dell'utente.

I widget di chat costituiscono un altro eccellente caso d'uso per la tecnica dell'adozione. Più alta i widget di chat scaricano quantità significative di JavaScript che possono incidere influiscono sul caricamento pagina e sulla reattività all'input dell'utente. Come quando si carica qualcosa In primo luogo, il costo è sostenuto al momento del caricamento, ma nel caso di un widget della chat, non ogni utente non ha mai intenzione di interagire.

Con un facade, invece, è possibile sostituire il componente "Start" di terze parti Chat" con un pulsante finto. Una volta che l'utente interagisce in modo significativo ad esempio tenendo premuto un puntatore per un periodo di tempo ragionevole oppure con un clic: il widget della chat reale e funzionante viene inserito in posizione quando all'utente ne ha bisogno.

Anche se è possibile costruire facciate personali, esistono modelli open source opzioni disponibili per le terze parti più popolari, ad esempio lite-youtube-embed per i video di YouTube, lite-vimeo-embed per i video di Vimeo e React Live Chat Caricatore per i widget di chat.

Librerie di caricamento lento JavaScript

Se hai bisogno di eseguire il caricamento lento di elementi <video>, elementi <video> di immagini poster, immagini caricate dalla proprietà CSS background-image o altre immagini non supportate , puoi farlo con una soluzione di caricamento lento basata su JavaScript, come lazysize o yall.js, poiché il caricamento lento di questi tipi di risorse non è 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 alle GIF animate, che possono spesso essere diverse volte più grandi di una risorsa video di immagini qualità. Anche in questo caso, questi video possono comunque essere significativi in termini di larghezza di banda, pertanto il loro caricamento lento costituisce un'ulteriore ottimizzazione che per ridurre lo spreco di larghezza di banda.

La maggior parte di queste librerie funziona utilizzando l'API Intersection Observer e in aggiunta all'API Mutation Observer se il codice HTML di una pagina cambia dopo il caricamento iniziale, per riconoscere quando 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, come src.

Supponiamo che tu abbia un video che sostituisce una GIF animata ma vuoi caricarlo tramite caricamento lento con una soluzione JavaScript. Questo è possibile con yall.js con quanto segue: 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 sulla pagina, il video non fino a quando l'utente non lo fa scorrere nell'area visibile. A quel punto, la data-src attributi negli elementi <source> secondari dell'elemento <video> vengono scambiati agli attributi src, che inviano una richiesta per scaricare il video e inizierà automaticamente a riprodurlo.

Verifica le tue conoscenze

A seguire: precaricamento e prerendering

Ora che hai acquisito familiarità con il caricamento lento delle immagini e degli elementi <iframe>, sei in una buona posizione per fare in modo che le pagine si carichino più rapidamente mentre rispettando le esigenze dei tuoi utenti. Tuttavia, ci sono casi in cui il caricamento speculativo delle risorse può essere desiderabile. Nel modulo successivo, sul precaricamento e sul prerendering, nonché su come queste tecniche, se utilizzate attentamente, velocizzando in modo significativo le navigazioni verso le pagine successive caricando per tempo.