Perfekte YouTube Core Web Vitals

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

YouTube macht es ziemlich einfach, ein Video auf deiner Seite einzubinden. Navigiere zuerst zur Videoseite und klicke unter dem Video auf Teilen

Wähle als Nächstes Einbetten und kopiere den Einbettungscode:

Kopiere den Code und füge ihn in das HTML deiner Seite ein. Wenn du dann ein Lighthouse-Audit durchführst, wirst du feststellen, dass alle wichtigen Metriken wie First Contentful Paint, Speed Index, Largest Contentful Paint und die Total Blocking Time um etwa 1 bis 1,5 Sekunden gestiegen sind. Eine standardmäßige YouTube-Einbettung lädt zwischen 1,3 und 2,6 MB an JavaScript, CSS, Schriftarten und Tracking-Skripten. Sie macht über 20 HTTP-Anfragen an 8 bis 10 verschiedene Domains. All das passiert, bevor der Besucher überhaupt auf Play drückt. Lass uns das beheben:

Standard YouTube-Einbettung

Smarte YouTube-Einbettung

Optimiere die YouTube Core Web Vitals!

Wir werden die Core Web Vitals verbessern, indem wir einen Platzhalter für das Bild erstellen. Während des Seitenaufbaus wird der Platzhalter geladen. Erst wenn wir das YouTube-Video tatsächlich benötigen, tauschen wir den Platzhalter gegen das eigentliche Video aus. Das nennt man das Facade-Pattern: Zeige zuerst einen leichten Stellvertreter an und lade die schwere Drittanbieter-Ressource erst bei Interaktion. Die gleiche Technik funktioniert für Google Maps und Chat-Widgets.

Schritt 1: Lade das Platzhalterbild herunter

Das Herunterladen des Platzhalterbildes ist sehr einfach. Schau dir die URL des YouTube-Videos an. Für dieses Beispiel verwenden wir diese URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Wie dir vielleicht auffällt, gibt es eine Variable in der URL: 'Oxv6IRcuNaI'. Kopiere diese Variable und füge sie in den Standard-Bildpfad für jedes beliebige YouTube-Video ein: https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Öffne diese URL, klicke mit der rechten Maustaste auf das Bild und wähle 'Bild speichern unter'. Nachdem du das Bild heruntergeladen hast, passe die Größe an deine Bedürfnisse an.

Schritt 2: Erstelle den Platzhalter

Der nächste Schritt ist die Erstellung des Platzhalters. Ich werde ein relativ positioniertes Div verwenden, ein Bild mit object-fit:cover und ein leeres Iframe platzieren, das wir später füllen werden. Aus Datenschutzgründen kannst du youtube-nocookie.com anstelle von youtube.com in der Einbettungs-URL verwenden. Dies verhindert, dass YouTube Tracking-Cookies setzt, bevor das Video tatsächlich abgespielt wird.

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

So weit, so gut, fügen wir nun etwas Styling hinzu. 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 die Eigenschaft object-fit:cover. Dies ahmt ein Hintergrundbild nach, ermöglicht aber Lazy Loading und responsive Bilder. Schließlich ist das Iframe selbst absolut positioniert 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: Lass uns das Platzhalterbild gegen ein echtes Video austauschen. Ich füge dem YouTube-Platzhalter einen Event-Listener hinzu. Sobald ein Besucher mit der Maus über das Bild fährt, lädt das YouTube-Iframe und wird durch die Änderung der Opacity 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);

Das YouTube-Video immer anzeigen

Lass uns noch einen Schritt weiter gehen und das YouTube-Video so einreihen, dass es das Platzhalterbild auch ohne Interaktion immer ersetzt. Ich möchte das nicht sofort tun, lass uns warten, bis der Browser im Leerlauf ist. Ich verwende der Einfachheit halber einen setTimeout, aber die Methode requestIdleCallback() wäre ebenfalls eine hervorragende Wahl. Beachte, dass requestIdleCallback in Safari standardmäßig noch nicht unterstützt wird. Verwende einen 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>

Da habt ihr es, Leute, ein perfekter Page-Speed-Score mit einem eingebetteten YouTube-Video in nur wenigen Codezeilen.

Alternative: Die srcdoc-Technik

Wenn du JavaScript komplett vermeiden möchtest, kannst du das Attribut srcdoc auf dem Iframe verwenden. Dies bettet eine Mini-HTML-Seite (nur das Thumbnail und einen Play-Button) direkt in das Iframe-Tag ein. Wenn der Besucher auf Play klickt, ersetzt der Browser sie durch den eigentlichen 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>

Der srcdoc-Ansatz lädt null externe Ressourcen, bis der Besucher interagiert. Der Kompromiss ist, dass auf einigen mobilen Browsern zwei Klicks erforderlich sind (einer, um den srcdoc-Link zu aktivieren, einer, um das Video abzuspielen).

Produktionsbereit: lite-youtube-embed

Wenn du eine Drop-in-Lösung bevorzugst, erledigt die Webkomponente lite-youtube-embed von Paul Irish all dies in einem einzigen Custom Element. Sie ist ungefähr 224-mal schneller als die standardmäßige YouTube-Einbettung und ist die von web.dev empfohlene Lösung.

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

Sie übernimmt das Thumbnail, den Play-Button, responsives Sizing und Barrierefreiheit out of the box. Sie verwendet standardmäßig youtube-nocookie.com.

Erweitere diese Technik

Natürlich ist dies nur ein einfaches Beispiel, das nur für ein einzelnes YouTube-Video mit einer bestimmten ID funktioniert. Auf deiner Seite wäre es eine gute Idee, den Event-Listener an einen querySelector anzuhängen und auch einen IntersectionObserver hinzuzufügen, um YouTube-Videos automatisch zu laden, bevor sie in den sichtbaren Bereich gescrollt werden. Wie auch immer du es erweitern möchtest: Die Idee bleibt die gleiche!

Auf Websites, die von CoreDash überwacht werden, haben Seiten, die ein YouTube-Facade-Pattern verwenden, ein durchschnittliches LCP, das 800 ms schneller ist als bei Seiten, die die Einbettung direkt laden. Wenn du das Facade-Pattern implementiert hast, nutze Real User Monitoring, um die Verbesserung mit echten Besucherdaten zu verifizieren.