YouTube video optimaliseren voor de Core Web Vitals te verbeteren

YouTube video’s zijn ideaal om om je webpagina te verrijken met content. Bovendien is een goede video dan ook een absolute meerwaarde voor je bezoekers. Maar hoe leuk deze video’s ook zijn, ze zullen altijd je pagina’s vertragen als je ze op de klassieke manier embed. In dit artikel laten we je zien hoe je een YouTube video kunt toevoegen aan je website zonder dat dit een negatieve impact heeft op de Core Web Vitals van Google.

Video’s embedden op de klassieke manier

YouTube maakt het voor een leek zeer gebruiksvriendelijk en gemakkelijk om een video te embedden op een webpagina. Eerst navigeer je naar een video op YouTube en vervolgens klik je op ‘Delen’.

Vervolgens klik je op ‘<> Insluiten’ en kopieer je de code.

Nu je de code gekopieerd hebt, kun je deze toevoegen aan de HTML van je website. Wij voegden deze video toe aan onze pagina wat is SEO. Echter, wat stellen we vast: door het toevoegen van deze video is de laadtijd onze pagina er sterk op achteruit gegaan. Je ziet dat alle belangrijke Core Web Vitals metrics zoals First Contentful Paint, Speed index, Largest Contentful Paint and the Time to interactive met 1 tot 1.5 seconden zijn toegenomen. Onder de aanbevelingen zie je dat het JavaScript van de YouTube video hier de grootste impact op heeft:

In totaal had deze pagina een mobile score van 52/100. Niets om over naar huis te schrijven dus… Gelukkig hebben wij een manier om dit te optimaliseren!

Oplossing: YouTube video vervangen door een thumbnail

We gaan dit oplossen door de YouTube video te vervangen door een thumbnail. Zo’n thumbnail laadt veel sneller in vergelijking met een YouTube video. Als een gebruiker de video gaat afspelen wordt de afbeelding vervangen door de video en speelt hij direct af. De gebruiker merkt hier dus niets van.

Stap 1: genereer de thumbnail

YouTube maakt het je heel gemakkelijk om de thumbnail te vinden. Voor deze video gebruiken we opnieuw dezelfde video: https://www.youtube.com/watch?v=u3Q-_A5lT7c

Als je de URL analyseert dan zie je dat er een variabele in staat, namelijk “u3Q-_A5lT7c”. Kopieer deze variabele en plak deze in de standaard locatie voor een YouTube thumbnail: https://i.ytimg.com/vi_webp/u3Q-_A5lT7c/maxresdefault.webp

Stap 2: plaats de placeholder

Nu gaan we de placeholder plaatsen. Plaats de placeholder in een relatief gepositioneerde div en gebruik de CSS property object-fit:cover om de afbeelding op de juiste manier weer te geven. Daarna plaats je best een leeg iframe in dezelfde div. Dit iframe gaan we gebruiken om de YouTube video te laten zien.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        src="https://i.ytimg.com/vi_webp/u3Q-_A5lT7c/maxresdefault.webp">
   <iframe 
       id="ytiframe" 
       data-src="https://www.youtube.com/embed/u3Q-_A5lT7c">
   </iframe>
</div>

Nu moeten we nog wat styling toevoegen aan de video. Hiervoor gebruiken we volgende opmaak:

<style type="text/css">
#ytplaceholder {
    position: relative;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

#ytplaceholder img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover
}

#ytplaceholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 2.4s ease 0s;
}
</style>

Nu komt het cruciale onderdeel: om de afbeelding te vervangen door de uiteindelijke YouTube video, hangen we een ‘eventlistener’ aan de afbeelding. Van zodra een surfer over de video gaat met zijn muis, wordt de uiteindelijke video ingeladen.

<script>
// youtube placeholder
var ytplaceholder = document.getElementById ('ytplaceholder'); 

// change the video
var videolistner = function(e) {
   var ytiframe = document.getElementById('ytiframe');
   ytiframe.src = ytiframe.getAttribute('data-src');
   ytiframe.onload = ytiframe.style.opacity = 1;
   ytplaceholder.removeEventListener("mouseover", videolistner);
};

//listen to the mouseover event to change the video
ytplaceholder.addEventListener('mouseover', videolistner);
</script>

Impact op de Core Web Vitals

Na het optimaliseren van onze pagina hebben we natuurlijk opnieuw onze pagina getest. Het mag gezegd worden: de laadtijd ging er een pak op vooruit. Onze mobile score steeg van 52/100 naar 82/100. Vooral bij de metrics Speed Index, Time to Interactive en Total Blocking Time (TBT) mochten we de meeste vooruitgang waarnemen.