Perfekte YouTube Core Web Vitals

Wie man ein YouTube-Video einbettet (der langsame Weg)

YouTube hat es ziemlich einfach gemacht, ein Video auf Ihrer Seite einzubetten. Navigieren Sie zuerst zur Videoseite und klicken Sie unter dem Video auf Teilen.

Wählen Sie als nächstes Einbetten und kopieren Sie den Embed-Code:

Kopieren Sie den Code und fügen Sie ihn in das HTML Ihrer Seite ein. Wenn Sie dann ein Lighthouse-Audit durchführen, werden Sie feststellen, dass alle wichtigen Metriken wie First Contentful Paint, Speed Index, Largest Contentful Paint und Time to Interactive um etwa 1 - 1,5 Sekunden gestiegen sind. Lassen Sie uns das beheben:

Standard YouTube-Embed

Smart YouTube-Embed

Fix die YouTube Core Web Vitals!

Wir werden die Core Web Vitals reparieren, indem wir einen Platzhalter für das Bild erstellen. Während des Ladens der Seite wird der Platzhalter geladen. Erst wenn wir das YouTube-Video tatsächlich benötigen, tauschen wir den Platzhalter gegen das eigentliche Video aus.

Schritt 1: Laden Sie das Platzhalterbild herunter

Das Herunterladen des Platzhalterbildes ist ganz einfach. Schauen Sie sich die URL für das YouTube-Video an. Für dieses Beispiel verwenden wir diese URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Wie Sie vielleicht bemerken, gibt es eine Variable in der URL: 'Oxv6IRcuNaI'. Kopieren Sie diese Variable und fügen Sie sie in den Standardbildspeicherort für jedes YouTube-Video ein https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Öffnen Sie diese URL, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie 'Bild speichern unter'. Nachdem Sie das Bild heruntergeladen haben, passen Sie die Größe an Ihre Bedürfnisse an.

Schritt 2: Erstellen Sie den Platzhalter

Der nächste Schritt ist das Erstellen des Platzhalters. Ich werde ein relativ positioniertes Div verwenden, ein Bild mit object-fit:cover und ein leeres i-Frame platzieren, das wir später füllen werden.

<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 weit so gut, lassen Sie uns jetzt etwas Styling hinzufügen. Das Padding im YouTube-Platzhalter ist ein kleiner Trick, um sicherzustellen, dass das Video auf allen Geräten skaliert. Das Bild ist absolut oben platziert und hat eine object-fit:absolute-Eigenschaft. Dies ahmt ein Hintergrundbild nach, ermöglicht jedoch Lazy Loading und responsive Bilder. Schließlich hat das Iframe selbst eine absolute Position und deckt den gesamten Platzhalter ab, sobald es sichtbar ist.

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

Jetzt zur Magie: Lassen Sie uns das Platzhalterbild in ein tatsächliches Video ändern. Ich füge dem YouTube-Platzhalter einen Event-Listener hinzu. Sobald ein Besucher über das Bild fährt, lädt das YouTube-i-Frame und wird aufgrund der Opazitätsänderung sichtbar.

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

Zeigen Sie das YouTube-Video immer an

Gehen wir noch einen Schritt weiter und stellen das YouTube-Video in die Warteschlange, um das Platzhalterbild immer zu ersetzen, auch ohne Interaktion. Ich möchte das nicht sofort tun, warten wir, bis der Browser im Leerlauf ist. Ich verwende der Einfachheit halber ein Timeout, aber die requestIdleCallback() Methode wäre auch eine gute Wahl

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

Bitte sehr Leute, eine perfekte PageSpeed-Bewertung mit einem eingebetteten YouTube-Video in nur wenigen Zeilen Code.

Erweitern Sie diese Technik.

Natürlich ist dies nur ein einfaches Beispiel, das nur für ein einzelnes YouTube-Video mit einer bestimmten ID funktioniert. Auf Ihrer Website wäre es eine gute Idee, den Event-Listener an einen querySelector und auch den Interaction-Observer anzuhängen, um YouTube-Videos automatisch zu laden, bevor sie in den sichtbaren Bereich scrollen. Wie auch immer Sie es erweitern möchten: Die Idee bleibt die gleiche!