Perfekte YouTube Core Web Vitals

Sådan indlejrer du en YouTube-video (den langsomme måde)

YouTube har gjort det ret enkelt at indlejre en video på din side. Naviger først til videosiden og klik på del under videoen

Vælg derefter embed og kopier indlejringskoden:

Kopier koden og indsæt den i HTML'en på din side. Når du derefter kører en Lighthouse-audit, vil du bemærke, at alle de vigtige metrikker som First Contentful Paint, Speed index, Largest Contentful Paint og Time to interactive er steget med cirka 1 - 1,5 sekunder. Lad os fikse dette:

Standard YouTube-indlejring

Smart YouTube-indlejring

Fiks YouTube Core Web Vitals!

Vi vil fikse Core Web Vitals ved at oprette en pladsholder til billedet. Under sideindlæsning indlæses pladsholderen. Først når vi faktisk har brug for YouTube-videoen, udskifter vi pladsholderen med den faktiske video.

Trin 1: Download pladsholderbilledet

Det er ret nemt at downloade pladsholderbilledet. Se på URL'en til YouTube-videoen. I dette eksempel bruger vi denne URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Som du måske bemærker, er der en variabel i URL'en: 'Oxv6IRcuNaI'. Kopier den variabel og indsæt den i standardbilledplaceringen for enhver YouTube-video https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Åbn den URL, højreklik på billedet og vælg 'gem billede som'. Når du har downloadet billedet, skalér det efter dine behov.

Trin 2: Opret pladsholderen

Næste trin er at oprette pladsholderen. Jeg vil bruge en relativt positioneret div, placere et billede med object-fit:cover og en tom iframe, som vi udfylder senere.

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

Så langt, så godt. Lad os nu tilføje noget styling. Padding i YouTube-pladsholderen er et lille trick til at sikre, at videoen skalerer på alle enheder. Billedet er placeret absolut øverst og har en object-fit:absolute egenskab. Dette efterligner et baggrundsbillede, men tillader lazy loading og responsive billeder. Endelig har selve iframen en absolut position og dækker hele pladsholderen, når den er synlig.

Nu til magien: lad os udskifte pladsholderbilledet med en faktisk video. Jeg tilføjer en event listener til YouTube-pladsholderen. Når en besøgende holder musen over billedet, indlæses YouTube-iframen og bliver synlig på grund af ændringen i 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);

Vis altid YouTube-videoen

Lad os gå et skridt videre og sætte YouTube-videoen i kø til altid at erstatte pladsholderbilledet, selv uden nogen interaktion. Jeg vil ikke gøre det med det samme, lad os vente til browseren er idle. Jeg bruger en timeout for enkelhedens skyld, men requestIdleCallback() -metoden ville også være et godt valg

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

Værsgo, en perfekt PageSpeed-score med en indlejret YouTube-video på blot få linjer kode.

Udvid denne teknik.

Dette er selvfølgelig bare et simpelt eksempel, der kun virker for en enkelt YouTube-video med et specifikt id. På din side ville det være en god idé at tilknytte event listeneren til en querySelector og også tilknytte en intersection-observer til automatisk at indlæse YouTube-videoer, før de scroller ind i visningen. Uanset hvordan du vil udvide det: idéen forbliver den samme!