Lazy Load YouTube video’s

De lazy Load YouTube video’s zoals we die hier presenteren is waarschijnlijk de beste oplossing om page speed te verbeteren. Ook kan je hiermee de melding “Bepaalde resources van derden kunnen via lazy loading worden geladen met een façade” in de Google page speed test te voorkomen en of oplossen. Belangrijkste is natuurlijk om de laad tijd te verbeteren en te zorgen dat bezoekers een betere bezoekerservaring heeft.

Ook verbeterd dit het TBT (Total Blocking Time) wat een belangrijk onderdeel is voor page speed en Web Vitals. Hier mee verbeterd het ook de SEO voor de pagina.

Waarom Lazy Load YouTube video’s?

YouTube video’s zijn een grote last voor een pagina om te laden. In een iframe wordt een video getoond dat eigenlijk op YouTube staat. Niet hoeft alleen de video geladen te worden maar ook nog eens een hoop JavaScript en dergelijken. Het laden van al deze files kost veel tijd. Het is daarom dan ook veel beter niet direct alles te laden en dit uit te stellen tot het nodig is.

De beste manier is om eerst een afbeelding te plaatsen. De afbeelding van de video is waarschijnlijk de mooiste en beste oplossing maar een andere afbeelding is ook mogelijk. Zodra men klikt op de afbeelding worden pas de video en andere bestanden geladen. Door alleen maar een afbeelding te hoeven laden is dit een enorme winst voor page speed.

Hier een voorbeeld:

Lazy Load YouTube video’s

De volgende code kan gebruikt worden om een youtube video te tonen met een soort van lazy loading. Het is niet echt lazy loading want het wordt geladen als er op geklikt wordt en niet als het in beeld komt. Als men wilt dat de video automatisch wordt afgespeeld als het in beeld komt kan men dit regelen met JavaScript. Dit zullen we hier niet behandelen.

Hiervoor hebben we nodig de hoogte, breedte, titel van de video en de ID van de Video. Hoogte en breedte kan je plaatsen bij de “width” en “height”. Vervang “TITEL-VIDEO” voor de titel die je wenst te gebruiken maar deze kan ook leeg gelaten worden.

Belangrijkste is het ID van de video. Wanneer je een video bekijkt op YouTube dan staat de ID in de link.
Bijvoorbeeld voor de link https://www.youtube.com/watch?v=YSyIbUHRvDo is “YSyIbUHRvDo” de ID van de video. Makkelijk te herkennen omdat er altijd “v=” voor staat. Vervang in de code ID-VIDEO met de ID van de video. Let op: De ID moet hier 3 maal vervangen worden.

<iframe
  width="900"
  height="506"
  src="https://www.youtube.com/embed/ID-VIDEO"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/ID-VIDEO?autoplay=1><img src=https://img.youtube.com/vi/ID-VIDEO/hqdefault.jpg /><span>►</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen title="TITEL-VIDEO">
</iframe>

Deze code kan overal op de website geplaatst waar is toegestaan om HTML te plaatsen. Hier zijn geen speciale aanpassingen voor nodig.

Waarom op deze manier

Hiervoor is geen JavaScript nodig en kan men makkelijk verwerken in een functie of voor WordPress in een shortcode functie.
Het is mogelijk om alles in een extra container te plaatsen om het ook nog eens responsive te maken.

Belangrijkste is te zien dat deze pagina nog steeds 100/100 scoort in de Google page speed test.

Dit is iets wat eigenlijk iedereen zelf kan doen en er is helemaal geen plugin of iets dergelijks voor nodig. En men hoeft zelfs geen kennis te hebben van programmeren.