Perfecte YouTube Core Web Vitals

Een YouTube-video embedden (de trage manier)

YouTube maakt het heel eenvoudig om een video op je pagina te embedden. Ga eerst naar de videopagina en klik onder de video op delen

Selecteer daarna embed en kopieer de embed-code:

Kopieer de code en plak die in de HTML van je site. Draai je daarna een Lighthouse-audit, dan zie je dat alle belangrijke metrics zoals First Contentful Paint, Speed Index, Largest Contentful Paint en Total Blocking Time met zo'n 1 tot 1,5 seconde zijn gestegen. Een standaard YouTube-embed laadt tussen de 1,3 en 2,6 MB aan JavaScript, CSS, fonts en tracking-scripts. Hij doet ruim 20 HTTP-requests naar 8 tot 10 verschillende domeinen. Dat gebeurt allemaal nog voordat de bezoeker op play klikt. Laten we dit fixen:

Standaard YouTube-embed

Slimme YouTube-embed

Fix de YouTube Core Web Vitals!

We fixen de Core Web Vitals door een placeholder voor de afbeelding te maken. Tijdens het laden van de pagina wordt de placeholder geladen. Pas als we de YouTube-video echt nodig hebben, vervangen we de placeholder door de echte video. Dit heet het facade pattern: toon eerst een lichte stand-in en laad de zware third-party resource pas bij interactie. Dezelfde techniek werkt voor Google Maps en chat widgets.

Stap 1: Download de placeholder-afbeelding

De placeholder-afbeelding downloaden is heel eenvoudig. Kijk naar de url van de YouTube-video. Voor dit voorbeeld gebruiken we deze url: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Zoals je ziet zit er een variabele in de url: 'Oxv6IRcuNaI'. Kopieer die variabele en plak hem in de standaard afbeeldingslocatie voor elke YouTube-video https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Open die url, klik met de rechtermuisknop op de afbeelding en kies 'Afbeelding opslaan als'. Heb je de afbeelding gedownload, schaal hem dan naar het gewenste formaat.

Stap 2: Maak de placeholder

De volgende stap is het maken van de placeholder. Ik gebruik een relatief gepositioneerde div, plaats een afbeelding met object-fit:cover en een leeg iframe dat we later vullen. Voor privacy kun je in de embed-url youtube-nocookie.com gebruiken in plaats van youtube.com. Dit voorkomt dat YouTube tracking-cookies plaatst totdat de video echt afspeelt.

<div id="ytplaceholder">
   <img class="ytcover"
        loading="lazy"
        width="560"
        height="315"
        src="https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp">
   <iframe
       id="ytiframe"
       width="560"
       height="315"
       data-src="https://www.youtube-nocookie.com/embed/Oxv6IRcuNaI">
   </iframe>
</div>

Tot zover duidelijk, nu wat styling. De padding in de YouTube-placeholder is een handig trucje om te zorgen dat de video op elk apparaat meeschaalt. De afbeelding is absoluut bovenaan geplaatst en heeft een object-fit:cover-property. Dit bootst een achtergrondafbeelding na, maar maakt lazy loading en responsive afbeeldingen mogelijk. Tot slot is het iframe zelf absoluut gepositioneerd en bedekt het de hele placeholder zodra het zichtbaar wordt.

#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;
}

Dan nu de magie: we vervangen de placeholder-afbeelding door de echte video. Ik voeg een event listener toe aan de YouTube-placeholder. Zodra een bezoeker over de afbeelding hovert, laadt het YouTube-iframe en wordt het zichtbaar door de verandering in opacity.

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

Toon de YouTube-video altijd

We gaan nog een stap verder: we zorgen dat de YouTube-video de placeholder-afbeelding altijd vervangt, ook zonder interactie. Dat doen we liever niet meteen; we wachten tot de browser idle is. Voor het gemak gebruik ik hier een setTimeout, maar de requestIdleCallback()-methode is ook een uitstekende keuze. Let op: Safari ondersteunt requestIdleCallback standaard nog niet. Gebruik een fallback: const idle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));

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

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);
   };

ytplaceholder.addEventListener ('mouseover', videolistner);

// show the YouTube video anyway after 3 seconds
setTimeout(function(){
   videolistner();
},3000);
</script>

En zo heb je een perfecte PageSpeed-score met een geëmbedde YouTube-video in maar een paar regels code.

Alternatief: de srcdoc-techniek

Wil je JavaScript helemaal vermijden, dan kun je het srcdoc-attribuut op het iframe gebruiken. Dit embedt een mini-HTML-pagina (alleen de thumbnail en een play-knop) direct in de iframe-tag. Klikt de bezoeker op play, dan vervangt de browser dit door de echte YouTube-speler.

<iframe
   src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1"
   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-nocookie.com/embed/VIDEO_ID?autoplay=1>
   <img src=https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp
   alt='Video title'><span>&#x25BA;</span></a>"
   width="560"
   height="315"
   loading="lazy"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

De srcdoc-aanpak laadt nul externe resources totdat de bezoeker interactie heeft. Het nadeel is dat het op sommige mobiele browsers twee tikken vereist (één om de srcdoc-link te activeren en één om de video af te spelen).

Klaar voor productie: lite-youtube-embed

Zoek je een drop-in oplossing, dan doet het web component lite-youtube-embed van Paul Irish dit allemaal in één custom element. Het is zo'n 224 keer sneller dan de standaard YouTube-embed en is de oplossing die web.dev aanraadt.

<lite-youtube videoid="Oxv6IRcuNaI"></lite-youtube>

Het regelt de thumbnail, de play-knop, responsive schaling en toegankelijkheid direct out-of-the-box. Het gebruikt standaard youtube-nocookie.com.

Breid deze techniek uit

Natuurlijk is dit maar een eenvoudig voorbeeld dat alleen werkt voor één specifieke YouTube-video met een vast id. Op je eigen site is het slim om de event listener aan een querySelector te koppelen en een IntersectionObserver toe te voegen om YouTube-video's automatisch te laden voordat ze in beeld scrollen. Hoe je het ook wilt uitbreiden: het principe blijft hetzelfde!

Op websites die door CoreDash worden gemonitord, hebben pagina's met een YouTube facade pattern een gemiddelde LCP die 800 ms sneller is dan pagina's die de embed direct inladen. Heb je het facade pattern geïmplementeerd, gebruik dan Real User Monitoring om de verbetering te controleren met data van echte bezoekers.