Come posso Caricare in maniera Efficace un iframe con Lazy Load?
E’ possibile farlo in pochi e semplici step anche se si è dei neofiti del codice… ora è Ufficiale e Nativo!
Che vantaggi si hanno gestendo il Caricamento degli iframe (oltre che delle immagini) con Lazy Load?
Gli iframe di terze parti (youtube, pulsanti social, sondaggi, post social, advertising) sono tantissimi e gestirli correttamente sotto il profilo delle performance del sito che li ospita è fondamentale soprattutto in vista dei Web Signals. Tra le 1000 attività per Migliorare le Performance di un Sito Web il Lazy Loading è tra quegli interventi di vitale importanza attuare. Integrare questa tecnologia è un gioco da ragazzi!
Nell’immagine sottostante (prelevata da web.dev) possiamo vedere in azione il Lazy Loading sugli iframe. Noterete come l’iframe non viene caricato fino a quando l’utente non arriva ad esso, nel punto pagina in cui è contenuto.
Questa operazione ha essenzialmente 2 vantaggi:
- Prestazioni / Performance del sito decisamente Migliorate
- Download dei dati misurato solo se è richiesto l’elemento
Come funziona il caricamento Nativo per iframe?
L’Attributo Loading permette a un Browser (Chrome, Chromium e Mozilla) di posticipare il caricamento degli iframe e delle immagini fuori schermo fino a quando gli utenti non “scrollano” fino al punto in cui sono inseriti, quindi, se per esempio un utente da mobile visita una pagina web dove è contenuto un iframe di qualche tipo (come un video incorporato da youtube) non verranno scaricati i dati e quindi non si pagheranno costi ulteriori su quei download… semplicemente perchè non sono avvenuti.
Senza l’utilizzo di Lazy Loading, un device mobile che visita una pagina web dove sono incorporati degli iframe, scaricherà tutto il peso della pagina e degli elementi contenuti in esso.
Lazy Load è una Bomba!
Lazy Load oggi è Nativo! ti basta inserire l’attributo
loading=”lazy”
all’iframe ed i Browser che supportano la funzione caricheranno correttamente l’iframe senza l’ausilio di Js. Ma se vuoi ottenere di più da Lazy Load e rendere Cross Browser la funzione ti basta aggiungere poche altre righe di codice al progetto.
Come si inserisce il caricamento Lazy Load (Cross Browser) su un iframe?
Ecco lo snippet di codice:
<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>
Nella prima parte del codice vediamo un iframe di youtube con i classici attributi come:
- width=””
- height=””
- allowfullscreen=””
- frameborder=””
e sicuramente avrai notato che l’attributo src=”” si è trasformato in data-src=”” e sono stati aggiunti class=”lazyload” e loading=”lazy”.
Nello script javascript sottostante all’iframe (che inserirai prima della chiusura del </body>) noterai come venga richiamato da un CDN Cloudflare lo script lazysizes.min.js.
Se vuoi approfondire ancor di più l’argomento ti invito a leggere l’Articolo Ufficiale su come caricare iframe con Lazy Load su web.dev
Hai già inserito tutto? hai avuto qualche difficoltà? corri a provarlo!
A presto…
