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.
Supporto dei browser
- 77
- 79
- 121
- 16.4
Indichi al browser che vuoi eseguire il caricamento lento di un iframe con l'attributo loading,
nello stesso modo in cui indichi il caricamento lento per le immagini.
<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, agli annunci. Spesso questi contenuti non sono immediatamente visibili nell'area visibile dell'utente. Si vedono solo quando scorrono la pagina più in basso. Ciononostante, gli utenti pagano 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 di Risparmio dati, gli iframe con caricamento lento potrebbero determinare un risparmio mediano dei dati del 2-3%, una riduzione dell'1-2% nella First Contentful Paint alla media e miglioramenti del 2% nel First Input Delay (FID) al 95° percentile.
Inoltre, il caricamento lento degli iframe fuori schermo può conferire vantaggi alla Largest Contentful Paint (LCP). Candidati LCP, ad esempio immagini o testo che dipende dai caratteri web per il rendering. Poiché gli iframe possono spesso richiedere una quantità significativa di larghezza di banda per caricare tutte le loro sottorisorse, gli iframe fuori schermo con caricamento lento possono ridurre significativamente i conflitti di larghezza di banda sui dispositivi con limitazioni di rete, lasciando una larghezza di banda maggiore per il caricamento delle 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>
La mancata specifica dell'attributo avrà lo stesso impatto del caricamento esplicito della risorsa.
Se devi creare iframe dinamicamente tramite JavaScript, è possibile supportare anche l'impostazione iframe.loading = 'lazy' sull'elemento:
var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);
Quale potrebbe essere l'impatto degli incorporamenti iframe popolari utilizzando il caricamento lento?
Se il web dovesse cambiare e l'impostazione predefinita fosse il caricamento lento gli iframe fuori schermo, l'aspetto sarebbe simile al seguente:
Incorporamenti di video di YouTube a caricamento lento (risparmi 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>
Aneddoto: quando siamo passati agli incorporamenti di YouTube a caricamento lento per Chrome.com,
abbiamo risparmiato 10 secondi sul tempo necessario per rendere interattive le nostre pagine sui
dispositivi mobili. Ho aperto un bug interno su YouTube per discutere dell'aggiunta di loading=lazy al codice di incorporamento.
Incorporamenti di Instagram a caricamento lento (risparmia circa 100 kB compressi durante il caricamento iniziale):
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 tutto lo script necessario per l'incorporamento. Poiché questi incorporamenti vengono spesso visualizzati sotto l'area visibile nella maggior parte degli articoli, questo sembra un candidato ragionevole per il caricamento lento dell'iframe.
Incorporamenti Spotify a caricamento lento (risparmi 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>
Sebbene gli incorporamenti precedenti illustrino i potenziali vantaggi degli iframe a caricamento lento per i contenuti multimediali, esiste la possibilità di riscontrare questi vantaggi anche per gli annunci.
Case study: caricamento lento dei plug-in social di Facebook
I plug-in social di Facebook consentono agli sviluppatori di incorporare i contenuti di Facebook nelle loro pagine web. Ci sono vari plug-in offerti, come post incorporati, foto, video, commenti... 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 Mi piace in una pagina web (utilizzando l'SDK JSSDK di Facebook) consente di estrarre circa 215 kB di risorse, di cui 197 kB. In molti casi, il plug-in può essere visualizzato alla fine di un articolo o in prossimità della fine di una pagina, pertanto caricarlo con entusiasmo 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 potranno evitarne il caricamento finché l'utente non scorrerà nelle vicinanze. Ciò consente all'incorporamento di funzionare perfettamente per gli utenti che ne hanno bisogno, offrendo al contempo un risparmio dei dati a coloro che non scorrono tutta la pagina verso il basso. Ci auguriamo che questo sia il primo di molti incorporamenti a esplorare il caricamento lento standardizzato degli iframe in produzione.
Posso eseguire il caricamento lento di iframe tra i browser? Sì
Il caricamento lento dell'iframe può essere applicato come miglioramento progressivo. I browser che supportano loading=lazy negli iframe eseguono il caricamento lento dell'iframe, mentre l'attributo loading viene ignorato in sicurezza nei browser che non lo supportano ancora.
È anche possibile eseguire il caricamento lento degli iframe fuori schermo utilizzando la libreria JavaScript lazysizes. Questa operazione può essere utile se:
- richiedono più soglie di caricamento lento personalizzate rispetto a quelle attualmente offerte da questo tipo di
- Desiderano offrire agli utenti un'esperienza di caricamento lento coerente per gli 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>
Ci sono casi in cui gli iframe fuori schermo con loading=lazy vengono ancora caricati?
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 comprometterle.
Con l'attributo loading, la scelta è di nuovo con lo sviluppatore, quindi non viene applicata alcuna euristica di questo tipo e l'attributo loading deve sempre rispettare i limiti di distanza e altre scelte del browser (ad esempio, la stampa).
Conclusione
Per altre idee per il caricamento lento, consulta la raccolta di immagini e video per il caricamento lento di web.dev.
Grazie a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley e StoyanStefanov per le loro recensioni.