È 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. Ciò consente di risparmiare dati, velocizzare il caricamento altre parti della pagina e riduce la memoria utilizzata.

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 incorporamenti dei video con caricamento lento:

Perché eseguire il caricamento lento degli iframe?

Gli incorporamenti di terze parti coprono un'ampia gamma di casi d'uso, dai video player ai dai post sui social media agli annunci. Spesso questi contenuti non sono immediatamente visibili in dall'area visibile, ma gli utenti pagano comunque il costo del download dei dati JavaScript per ogni frame, anche se gli utenti non scorrono fino a visualizzare questo elemento.

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). Dato che gli iframe richiedono spesso di larghezza di banda significativa per caricare tutte le risorse secondarie, gli iframe fuori schermo possono ridurre il conflitto di larghezza di banda su reti vincolate lasciando una larghezza di banda maggiore per caricare le risorse che contribuiscono al LCP.

Come funziona il caricamento lento integrato per gli iframe?

L'attributo loading consente al browser di posticipare il caricamento di iframe fuori schermo e più immagini finché gli utenti non scorrono vicino a loro. loading supporta due valori:

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

L'utilizzo dell'attributo loading negli 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 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?

L'impostazione predefinita degli iframe con caricamento lento renderebbe i siti web 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 lento di questo iframe evita di dover caricare script necessario per l'incorporamento e consente di risparmiare circa 100 kB sul 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

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 nel 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'incorporamento il plug-in Mi piace in una pagina web che utilizza il codice JSSDK di Facebook recupera circa 215 kB di di risorse, 197 kB di cui JavaScript. Il plug-in spesso viene visualizzato alla fine un articolo o verso la fine di una pagina, quindi caricalo con entusiasmo quando non è visualizzato può non essere ottimale.

Grazie all'ingegnere Stoyan Stefanov, ora tutti i plug-in social di Facebook supportare iframe standardizzati il caricamento lento, 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. Speriamo bene questo è il primo di molti incorporamenti a esplorare il caricamento lento standardizzato e produzione.

Caricamento lento degli iframe cross-browser

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 più browser 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.

Puoi anche eseguire il caricamento lento di iframe fuori schermo utilizzando il metodo lazysize Libreria JavaScript:

<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>

Usa il seguente pattern per rilevare la funzionalità di caricamento lento e recuperare le dimensioni lazy se 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 esperimento iniziale con iframe a caricamento lento automatico per Risparmio dati degli utenti di Chrome faceva un'eccezione per gli iframe nascosti, spesso utilizzati per le comunicazioni o l'analisi. Questi ultimi non venivano caricati lentamente vengono sempre caricati per evitare di danneggiare tali caratteristiche.

L'attributo loading non applica questa euristica, quindi lo sviluppatore sempre può scegliere cosa viene caricato con il caricamento lento. L'attributo loading deve sempre essere rispettata, rispettando i limiti di distanza e altre scelte del browser (come la stampa).

Risorse

Per altre idee relative al caricamento lento, consulta raccolta con caricamento lento di immagini e video.

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