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

Addy Osmani

Barry Pollard

Il caricamento lento degli elementi <iframe> ritarda il caricamento degli iframe fuori schermo finché 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 per le 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é eseguire il caricamento lento di iframe?

Gli elementi incorporati di terze parti coprono una vasta gamma di casi d'uso, dai video player ai post sui social media agli annunci. Spesso questi contenuti non sono immediatamente visibili nel viewport dell'utente, ma gli utenti pagano comunque il costo del download dei dati e del codice JavaScript costoso per ogni frame, anche se non lo scorrono.

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

Il caricamento lento di iframe fuori schermo può anche migliorare le dimensioni Contentful Paint (LCP). Poiché gli iframe spesso richiedono una quantità significativa di larghezza di banda per caricare tutte le relative 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>

Non specificare l'attributo ha lo stesso impatto di un caricamento esplicito la risorsa.

Se devi creare in modo dinamico iframe utilizzando JavaScript, impostando Anche iframe.loading = 'lazy' sull'elemento è supportato:

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

In che modo il caricamento lento di iframe popolari incorporati influisce sull'esperienza utente?

Se gli iframe con caricamento lento diventassero la scelta predefinita, i siti web sarebbero molto più reattivi. I seguenti esempi mostrano i miglioramenti e i dati relativi al Time to Interactive (TTI) di risparmio per gli incorporamenti multimediali, ma gli iframe pubblicitari con caricamento lento possono fornire vantaggi dell'IA.

YouTube

Il caricamento lento degli incorporamenti di 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>

Instagram

Gli incorporamenti di Instagram forniscono un blocco di markup e uno script che inserisce un 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 incorporamenti sono spesso visualizzati sotto l'area visibile nella maggior parte degli articoli, si tratta di una candidato ragionevole per il caricamento lento degli iframe.

Spotify

Il caricamento differito degli elementi incorporati di Spotify può farti risparmiare 514 KB al 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 i contenuti di Facebook nelle loro pagine web. Il più popolare è il plug-in Like, un pulsante che mostra quanti utenti hanno messo Mi piace della pagina. Per impostazione predefinita, l'inserimento del plug-in Mi piace in una pagina web utilizzando l'SDK JS di Facebook richiede circa 215 KB di risorse, di cui 197 KB di 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.

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 i plug-in data-lazy può impedire il caricamento di questi plug-in finché l'utente non scorre nelle vicinanze. In questo modo l'incorporamento può continuare a funzionare per gli utenti che ne hanno bisogno, Salvare i dati per gli utenti che non fanno scorrere la pagina fino in fondo. Ci auguriamo che questo sia il primo di molti embed che esploreranno il caricamento lento degli iframe standardizzato in produzione.

Quando vuoi un maggiore controllo sul caricamento lento degli iframe

Il caricamento lento degli iframe a livello di browser è ben supportato in tutti i principali browser ed è consigliato nella maggior parte dei casi d'uso, per eliminare 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 libreria di questo tipo che offre opzioni aggiuntive in caso di necessità.

Esistono eccezioni al caricamento lento degli iframe offscreen?

Un primo esperimento con il caricamento lento 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 queste strategie di euristica, pertanto lo sviluppatore può sempre scegliere cosa caricare in modo lazy. L'attributo loading deve sempre essere rispettata, 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.

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