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

Addy Osmani

Il caricamento lento degli elementi <iframe> impedisce il caricamento degli iframe fuori schermo finché l'utente non scorre vicino agli elementi. In questo modo puoi salvare dati, velocizzare il caricamento di altre parti della pagina e ridurre 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 incorporamenti dei video con caricamento lento:

Perché utilizzare il caricamento lento per gli iframe?

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

In base alla ricerca di Chrome sugli iframe a caricamento lento automatico per gli utenti che utilizzano Risparmio dati, gli iframe a caricamento lento potrebbero determinare un risparmio mediano dei dati del 2-3%, una riduzione dell'1-2% della First Contentful Paint alla media e miglioramenti del 2% del First Input Delay (FID) al 95° percentile.

Il caricamento lento degli iframe fuori schermo può anche migliorare la Largest Contentful Paint (LCP) della pagina. Poiché gli iframe spesso hanno bisogno di una quantità significativa di larghezza di banda per caricare tutte le loro sottorisorse, gli iframe offscreen a caricamento lento possono ridurre il conflitto di larghezza di banda sui dispositivi con limitazioni di rete, lasciando una larghezza di banda maggiore per caricare le risorse che contribuiscono all'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 scorrono nelle vicinanze. loading supporta due valori:

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

L'utilizzo dell'attributo loading su iframe funziona come segue:

<!-- 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 del caricamento esplicito della risorsa con entusiasmo.

Se devi creare iframe dinamicamente utilizzando JavaScript, è anche supportata l'impostazione 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 incorporamenti di iframe più diffusi influisce sull'esperienza utente?

Se imposti come predefiniti gli iframe a caricamento lento, i siti web saranno molto più adattabili. I seguenti esempi mostrano i miglioramenti del 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

Gli incorporamenti dei video di YouTube a caricamento lento consentono 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 iframe nella pagina. Il caricamento lento di questo iframe evita di dover caricare tutti gli script necessari per l'incorporamento e può risparmiare circa 100 kB sul caricamento iniziale. Poiché nella maggior parte degli articoli questi incorporamenti vengono spesso visualizzati sotto l'area visibile, è un candidato ragionevole per il caricamento lento dell'iframe.

Spotify

Gli incorporamenti di Spotify a caricamento lento consentono di 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 quanti utenti hanno messo Mi piace alla pagina. Per impostazione predefinita, l'incorporamento del plug-in Mi piace in una pagina web utilizzando l'SDK JS di Facebook consente di ottenere circa 215 kB di risorse, di cui 197 kB. Il plug-in viene spesso visualizzato alla fine di un articolo o verso la fine di una pagina, quindi caricarlo con impazienza quando è fuori schermo potrebbe non essere ottimale.

Grazie all'ingegnere Stoyan Stefanov, tutti i plug-in social di Facebook ora supportano il caricamento lento standardizzato degli iframe. Gli sviluppatori che attivano il caricamento lento tramite la configurazione data-lazy dei plug-in ora possono impedirne il caricamento finché l'utente non scorre nelle vicinanze. In questo modo l'incorporamento continuerà a funzionare per gli utenti che ne hanno bisogno, salvando al contempo i dati degli utenti che non scorrono tutta la pagina verso il basso. Speriamo che questo sia il primo di molti incorporamenti a esplorare il caricamento lento standardizzato degli iframe in produzione.

Caricamento lento iframe tra browser

Puoi applicare il caricamento lento iframe al tuo sito come miglioramento progressivo. I browser che supportano loading=lazy negli iframe eseguono il caricamento lento dell'iframe, mentre i browser che non supportano l'attributo loading lo ignorano in modo sicuro.

Puoi anche eseguire il caricamento lento degli iframe fuori schermo utilizzando la libreria JavaScript lazysizes. È consigliabile eseguire questa operazione se:

• Richiedere più soglie di caricamento lento personalizzate rispetto alle offerte di caricamento lento standardizzato
• Vuoi offrire agli utenti un'esperienza coerente di caricamento lento con iframe su tutti i browser.

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Utilizza il seguente pattern per rilevare il caricamento lento e recuperare i lazysize quando non è disponibile:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

Esistono eccezioni al caricamento lento degli iframe fuori schermo?

Un primo esperimento con gli iframe a caricamento lento automatico per gli utenti di Risparmio dati in Chrome aveva un'eccezione per gli iframe nascosti, spesso utilizzati per le comunicazioni o l'analisi. che non venivano caricate lentamente e sempre caricate per evitare di spezzarle.

L'attributo loading non applica queste euristiche, pertanto lo sviluppatore può sempre scegliere cosa eseguire il caricamento lento. L'attributo loading deve essere sempre rispettato, soggetto a limiti di distanza e ad altre scelte del browser (come la stampa).

Risorse

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

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