È ora di eseguire il caricamento lento degli iframe fuori schermo.

Addy Osmani

Barry Pollard

Supporto dei browser

• 77
• 79
• 121
• 16.4

Il caricamento lento degli elementi <iframe> ritarda il caricamento degli iframe fuori schermo fino a quando l'utente non scorre vicino a loro. In questo modo risparmi dati, velocizzi il caricamento di altre parti della pagina e riduci l'utilizzo della memoria.

Come per il caricamento lento delle immagini, utilizza l'attributo loading per indicare al browser che vuoi eseguire il caricamento lento di un iframe.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Questa demo di <iframe loading=lazy> mostra gli embed dei video con il caricamento lento:

Perché utilizzare il caricamento lento degli iframe?

Gli incorporamenti di terze parti coprono un'ampia gamma di casi d'uso, dai video player ai post sui social media, agli annunci. Questi contenuti spesso non sono immediatamente visibili nell'area visibile dell'utente, ma gli utenti pagano comunque il costo del download dei dati e il costo di JavaScript per ogni frame, anche se non li visualizzano.

Il caricamento intensivo di iframe fuori schermo comporta lo spreco di dati da parte degli utenti scaricando elementi che potrebbero non vedere mai.

In base a una ricerca di Chrome sugli iframe fuori schermo con caricamento lento automatico per gli utenti Risparmio dati, il caricamento lento di iframe potrebbe comportare un risparmio medio dei dati del 2-3%, una riduzione dell'1-2% First Contentful Paint in media e una riduzione del 2% di First Input Delay (FID) al 95° percentile.

Il caricamento lento degli iframe off-screen può anche migliorare il Largest Contentful Paint (LCP) della tua pagina. Poiché gli iframe spesso richiedono una quantità significativa di larghezza di banda per caricare tutte le risorse secondarie, il caricamento lento degli iframe offscreen può ridurre la contesa per la larghezza di banda sui dispositivi con limitazioni di rete, lasciando più larghezza di banda per caricare le risorse che contribuiscono al LCP di una pagina.

Come funziona il caricamento lento integrato per gli iframe?

L'attributo loading consente a un browser di posticipare il caricamento di iframe e immagini fuori schermo finché gli utenti non li scorrono. loading supporta due valori:

• lazy: un buon candidato per il caricamento lento.
• eager: non è una buona opzione per il caricamento lento. Carica subito.

L'utilizzo dell'attributo loading negli iframe funziona nel seguente modo:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

La mancata specifica dell'attributo ha lo stesso impatto del caricamento esplicito della risorsa.

Se devi creare dinamicamente gli iframe utilizzando JavaScript, è supportata anche l'impostazione di iframe.loading = 'lazy' sull'elemento:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

In che modo il caricamento lento degli iframe incorporati più utilizzati influisce sull'esperienza utente?

L'impostazione predefinita degli iframe con caricamento lento rendere i siti web molto più reattivi. I seguenti esempi mostrano i miglioramenti nel tempo all'interattività (TTI) e il risparmio dei dati per gli incorporamenti multimediali, ma gli iframe pubblicitari con caricamento lento possono offrire vantaggi simili.

YouTube

Il caricamento differito degli elementi incorporati dei video di YouTube consente di risparmiare circa 500 KB al caricamento iniziale della pagina:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Chrome.com ha ridotto il TTI di 10 secondi grazie al caricamento differito degli elementi incorporati di YouTube offscreen.

Nota: se stai cercando modi più efficienti per caricare gli incorporamenti di YouTube, potrebbe interessarti il componente YouTube Lite.

Instagram

Gli incorporamenti di Instagram forniscono un blocco di markup e uno script che inserisce un iframe nella tua pagina. Il caricamento differito di questo iframe evita di dover caricare tutto lo script necessario per l'embed e può farti risparmiare circa 100 kB al caricamento iniziale. Poiché questi elementi incorporati vengono spesso visualizzati sotto l'area visibile nella maggior parte degli articoli, si tratta di un candidato ragionevole per il caricamento lento degli iframe.

Spotify

Gli incorporamenti Spotify con caricamento lento possono risparmiare 514 kB sul caricamento iniziale.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Plug-in social di Facebook

I plug-in social di Facebook consentono agli sviluppatori di incorporare contenuti di Facebook nelle loro pagine web. Il più popolare è il plug-in Mi piace, un pulsante che mostra il numero di utenti che hanno messo "Mi piace" alla pagina. Per impostazione predefinita, l'incorporamento del plug-in Like in una pagina web utilizzando il JSSDK di Facebook recupera circa 215 kB di risorse, di cui 197 kB sono JavaScript. Il plug-in viene spesso visualizzato alla fine di un articolo o verso la fine di una pagina, pertanto il caricamento anticipato quando non è sullo schermo può non essere ottimale.

Plug-in Mi piace di Facebook.

Grazie all'ingegnere Stoyan Stefanov, tutti i plug-in social di Facebook ora supportano il caricamento differito degli iframe standardizzati. Gli sviluppatori che attivano il caricamento lento tramite la configurazione data-lazy dei plug-in ora possono impedire il caricamento di questi plug-in finché l'utente non scorre nelle vicinanze. In questo modo, l'embed continua a funzionare per gli utenti che ne hanno bisogno, mentre consente di risparmiare dati per gli utenti che non scorrono fino in fondo una pagina. Ci auguriamo che questo sia il primo di molti incorporamenti a esplorare il caricamento lento standardizzato degli iframe in produzione.

Quando vuoi un maggiore controllo sul caricamento lento degli iframe

Il caricamento lento degli iframe a livello di browser è ben supportato su tutti i principali browser ed è consigliato per la maggior parte dei casi d'uso, in quanto elimina la necessità di dipendenze aggiuntive da JavaScript.

Tuttavia, se hai la necessità di supportare browser meno recenti o vuoi avere un maggiore controllo sulle soglie di caricamento lento, puoi utilizzare una libreria di terze parti per eseguire il caricamento lento di iframe sul tuo sito. La libreria JavaScript lazysizes è una di queste librerie che consente opzioni aggiuntive, se necessario.

Esistono eccezioni al caricamento lento degli iframe offscreen?

Un primo esperimento con il caricamento differito automatico degli iframe per gli utenti di Risparmio dati in Chrome prevedeva un'eccezione per gli iframe nascosti, spesso utilizzati per le comunicazioni o l'analisi. Il loro caricamento è stato impedito e sono stati caricati sempre per evitare di interrompere queste funzionalità.

L'attributo loading non applica questa euristica, quindi lo sviluppatore può sempre scegliere quali contenuti sottoporre a caricamento lento. L'attributo loading deve essere sempre rispettato, rispettando i limiti di distanza e altre scelte del browser (come la stampa).

Risorse

Per altre idee sul caricamento lento, consulta la raccolta di risorse sul caricamento lento di immagini e video di web.dev.

Un ringraziamento a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley e Stoyan Stefanov per le loro recensioni.