Perfecte YouTube Core Web Vitals

Hoe een YouTube video te embedden (de langzame manier)

YouTube heeft het vrij eenvoudig gemaakt om een video op je pagina te embedden. Navigeer eerst naar de videopagina en klik op delen onder de video

Selecteer vervolgens embedden en kopieer de embed code:

Kopieer de code en plak deze in de HTML van je site. Wanneer je vervolgens een Lighthouse audit uitvoert, zul je merken dat alle belangrijke metrics zoals First Contentful Paint, Speed Index, Largest Contentful Paint en de Total Blocking Time met ongeveer 1 tot 1,5 seconde zijn toegenomen. Een standaard YouTube embed laadt tussen de 1,3 en 2,6 MB aan JavaScript, CSS, lettertypen en tracking scripts. Het maakt meer dan 20 HTTP requests naar 8 tot 10 verschillende domeinen. Dat gebeurt allemaal nog voordat de bezoeker op play drukt. Laten we dit oplossen:

Standaard YouTube embed

Slimme YouTube embed

Repareer de YouTube Core Web Vitals!

We gaan de Core Web Vitals repareren door een placeholder voor de afbeelding te maken. Tijdens het laden van de pagina zal de placeholder geladen worden. Pas wanneer we de YouTube video daadwerkelijk nodig hebben, zullen we de placeholder veranderen voor de echte video. Dit wordt het facade patroon genoemd: toon eerst een lichtgewicht stand-in, laad de zware externe resource alleen bij interactie. Dezelfde techniek werkt voor Google Maps en chat widgets.

Stap 1: Download de placeholder afbeelding

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

Zoals je misschien opmerkt, is er een variabele in de url: 'Oxv6IRcuNaI'. Kopieer die variabele en plak deze 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 selecteer 'afbeelding opslaan als'. Nadat je de afbeelding hebt gedownload, verklein je deze naar wens.

Stap 2: Maak de placeholder

De volgende stap is om de placeholder te maken. Ik ga een relatief gepositioneerde div gebruiken, een afbeelding plaatsen met object-fit:cover en een lege iframe die we later zullen vullen. Voor privacy kun je youtube-nocookie.com gebruiken in plaats van youtube.com in de embed URL. Dit voorkomt dat YouTube tracking cookies plaatst totdat de video daadwerkelijk 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 gaat het goed, laten we nu wat styling toevoegen. De padding in de YouTube placeholder is een trucje om ervoor te zorgen dat de video op alle apparaten meeschaalt. De afbeelding is absoluut bovenaan geplaatst en heeft een object-fit:cover eigenschap. Dit bootst een achtergrondafbeelding na, maar maakt lazy loading en responsieve afbeeldingen mogelijk. Ten slotte heeft de iframe zelf een absolute positie en bedekt deze de hele placeholder zodra hij zichtbaar is.

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

Nu voor de magie: laten we de placeholder afbeelding veranderen in een echte video. Ik voeg een event listener toe aan de YouTube placeholder. Zodra een bezoeker over de afbeelding hoovert, laadt de YouTube iframe en wordt deze 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

Laten we nog een stap verder gaan en de YouTube video in de wachtrij plaatsen om de placeholder afbeelding altijd te vervangen, zelfs zonder enige interactie. Ik wil dat niet meteen doen, laten we wachten tot de browser idle is. Ik zal een setTimeout gebruiken voor de eenvoud, maar de requestIdleCallback() methode zou ook een goede keuze zijn. Let op dat requestIdleCallback nog niet standaard wordt ondersteund in Safari. 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>

Daar heb je het, een perfecte PageSpeed score met een embedded YouTube video in slechts een paar regels code.

Alternatief: de srcdoc techniek

Als je JavaScript volledig wilt vermijden, kun je het srcdoc attribuut op de iframe gebruiken. Dit embedt een mini HTML pagina (alleen de thumbnail en een afspeelknop) direct in de iframe tag. Wanneer de bezoeker op play klikt, vervangt de browser het door de echte YouTube player.

<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. De afweging is dat het op sommige mobiele browsers twee tikken vereist (één om de srcdoc link te activeren, één om de video af te spelen).

Productieklaar: lite-youtube-embed

Als je de voorkeur geeft aan een drop-in oplossing, doet Paul Irish's lite-youtube-embed web component dit alles in een enkel custom element. Het is ruwweg 224 keer sneller dan de standaard YouTube embed en is de oplossing aanbevolen door web.dev.

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

Het handelt de thumbnail, de afspeelknop, responsieve dimensionering en toegankelijkheid out of the box af. Het gebruikt standaard youtube-nocookie.com.

Breid deze techniek uit

Natuurlijk is dit slechts een eenvoudig voorbeeld dat alleen werkt voor een enkele YouTube video met een specifiek id. Op jouw site zou het een goed idee zijn om de event listener te koppelen aan een querySelector en ook een IntersectionObserver te koppelen om YouTube video's automatisch te laden voordat ze in beeld scrollen. Hoe je het ook wilt uitbreiden: het idee blijft hetzelfde!

Op sites die gemonitord worden door CoreDash, hebben pagina's die een YouTube facade patroon gebruiken een gemiddelde LCP die 800ms sneller is dan pagina's die de embed direct laden. Als je het facade patroon hebt geïmplementeerd, gebruik dan Real User Monitoring om de verbetering te verifiëren met echte bezoekersdata.