Perfecte YouTube Core Web Vitals

Hoe een YouTube video te embedden (de trage 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 insluiten 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 Time to Interactive met ongeveer 1 - 1,5 seconden zijn toegenomen. Laten we dit oplossen:

Standaard YouTube embed

Slimme YouTube embed

Fix de YouTube Core Web Vitals!

We gaan de Core Web Vitals fixen door een placeholder voor de afbeelding te maken. Tijdens het laden van de pagina wordt de placeholder geladen. Pas wanneer we de YouTube video daadwerkelijk nodig hebben, wisselen we de placeholder voor de daadwerkelijke video.

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, zit 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, pas je de grootte aan naar wens.

Stap 2: maak de placeholder

De volgende stap is het maken van de placeholder. Ik ga een relatief gepositioneerde div gebruiken, plaats een afbeelding met object-fit:cover en een leeg iframe dat we later zullen vullen.

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

So far so good, laten we nu wat styling toevoegen. De padding in de YouTube placeholder is een trucje om ervoor te zorgen dat de video schaalt op alle apparaten. De afbeelding is absoluut geplaatst aan de bovenkant en heeft een object-fit:absolute eigenschap. Dit bootst een achtergrondafbeelding na maar maakt lazy loading en responsieve afbeeldingen mogelijk. Tot slot heeft het iframe zelf een absolute positie en bedekt de hele placeholder zodra deze zichtbaar is.

Nu voor de magie: laten we de placeholder afbeelding veranderen in een werkelijke video. Ik voeg een event listener toe aan de YouTube placeholder. Zodra een bezoeker over de afbeelding hovers, laadt het YouTube iframe en wordt zichtbaar vanwege de verandering in dekking.

<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 zetten om de placeholder afbeelding altijd te vervangen, zelfs zonder enige interactie. Ik wil dat niet meteen doen, laten we wachten tot de browser in rust is. Ik gebruik een time-out voor eenvoud maar de requestIdleCallback() methode zou ook een goede keuze zijn

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

Alsjeblieft jongens, een perfecte PageSpeed score met een embedded YouTube video in slechts een paar regels code.

Breid deze techniek uit.

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