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'attributoloading."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
Qual è il valore predefinito per l'attributo loading per
entrambi gli elementi <img> e <iframe>?
"eager""lazy"In quali circostanze è possibile usare le soluzioni di caricamento lento basate su JavaScript?
loading non è
supportati, come nel caso di video con riproduzione automatica destinati a sostituire
immagini animate o il caricamento lento di un elemento <video>
poster
Quando una facciata è una tecnica utile?
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.