Perfekte YouTube-Core-Web-Vitals

YouTube-Videos einbetten (der langsame Weg)

YouTube macht das Einbetten von Videos denkbar einfach. Öffne zuerst die Videoseite und klicke unter dem Video auf „Teilen“

Wähle danach „Einbetten“ und kopiere den Embed-Code:

Kopiere den Code und füge ihn in das HTML deiner Seite ein. Wenn du danach einen Lighthouse-Audit machst, siehst du das Problem: Wichtige Metriken wie First Contentful Paint, Speed Index, Largest Contentful Paint und Total Blocking Time steigen um etwa 1 bis 1,5 Sekunden. Ein Standard-YouTube-Embed lädt zwischen 1,3 und 2,6 MB an JavaScript, CSS, Fonts und Tracking-Skripten. Dazu kommen über 20 HTTP-Requests an 8 bis 10 verschiedene Domains. All das passiert, bevor der Besucher überhaupt auf Play drückt. Das beheben wir:

Standard-YouTube-Embed

Smartes YouTube-Embed

YouTube-Core-Web-Vitals optimieren!

Wir optimieren die Core Web Vitals, indem wir einen Platzhalter vorschalten. Beim Laden der Seite lädt zunächst nur dieser Platzhalter. Erst wenn das YouTube-Video wirklich gebraucht wird, tauschen wir den Platzhalter gegen das eigentliche Video aus. Das nennt sich Facade Pattern: Zeige zuerst einen schlanken Stellvertreter und lade die schwere Drittanbieter-Ressource erst bei Interaktion. Dieselbe Technik funktioniert auch für Google Maps und Chat-Widgets.

Schritt 1: Platzhalter-Bild herunterladen

Das Platzhalter-Bild herunterzuladen ist denkbar einfach. Schau dir die URL des YouTube-Videos an. In diesem Beispiel nutzen wir diese URL: https://www.youtube.com/watch?v=Oxv6IRcuNaI

Wie du siehst, enthält die URL eine Variable: „Oxv6IRcuNaI“. Kopiere diesen Wert und füge ihn in die Standard-Bild-URL für YouTube-Videos ein: https://i.ytimg.com/vi_webp/Oxv6IRcuNaI/maxresdefault.webp

Öffne die URL, klicke mit der rechten Maustaste auf das Bild und wähle „Bild speichern unter…“. Skaliere das Bild nach dem Download passend für deinen Bedarf.

Schritt 2: Platzhalter erstellen

Im nächsten Schritt erstellen wir den Platzhalter. Dafür nutze ich ein relativ positioniertes div, platziere ein Bild mit object-fit:cover und ein leeres iframe, das wir später befüllen. Aus Datenschutzgründen kannst du in der Embed-URL youtube-nocookie.com statt youtube.com nutzen. Das verhindert, dass YouTube Tracking-Cookies setzt, bis 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. Jetzt kommt das Styling. Das Padding im YouTube-Platzhalter ist ein kleiner Trick, damit das Video auf allen Geräten sauber skaliert. Das Bild liegt absolut positioniert oben und erhält die Eigenschaft object-fit:cover. Das wirkt wie ein Hintergrundbild, erlaubt aber lazy loading und responsive Bilder. Der iframe ist ebenfalls absolut positioniert und füllt den gesamten Platzhalter aus, sobald er 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 zum eigentlichen Trick: Tauschen wir das Platzhalter-Bild gegen das echte Video aus. Dazu hänge ich einen Event-Listener an den YouTube-Platzhalter. Sobald ein Besucher über das Bild hovert, lädt der YouTube-iframe und wird durch den Opacity-Wechsel 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);

YouTube-Video immer anzeigen

Gehen wir einen Schritt weiter: Das YouTube-Video soll das Platzhalter-Bild auch ohne jede Interaktion ersetzen. Aber nicht sofort – warten wir, bis der Browser idle ist. Der Einfachheit halber nutze ich ein setTimeout, aber requestIdleCallback() ist ebenfalls eine hervorragende Wahl. Safari unterstützt requestIdleCallback standardmäßig noch nicht. Nutze 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>

So geht's: Ein perfekter PageSpeed-Score mit eingebettetem YouTube-Video in nur wenigen Zeilen Code.

Alternative: Die srcdoc-Technik

Wenn du komplett auf JavaScript verzichten willst, nutze das srcdoc-Attribut am iframe. Damit bettest du eine Mini-HTML-Seite (nur das Thumbnail und ein Play-Button) direkt in das iframe-Tag ein. Klickt der Besucher auf Play, 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 bis zur ersten Interaktion null externe Ressourcen. Der Nachteil: Auf manchen mobilen Browsern sind zwei Taps nötig (einer aktiviert den srcdoc-Link, der zweite startet das Video).

Produktionsreif: lite-youtube-embed

Wenn du eine Drop-in-Lösung bevorzugst: Die Web-Component lite-youtube-embed von Paul Irish erledigt all das in einem einzigen Custom Element. Sie ist rund 224-mal schneller als das Standard-YouTube-Embed und die Lösung, die von web.dev empfohlen wird.

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

Sie bringt Thumbnail, Play-Button, responsive Skalierung und Accessibility von Haus aus mit. Standardmäßig nutzt sie youtube-nocookie.com.

Diese Technik erweitern

Das ist natürlich nur ein einfaches Beispiel für ein einzelnes YouTube-Video mit einer bestimmten ID. Auf deiner Seite ist es sinnvoll, den Event-Listener an einen querySelector zu binden und per IntersectionObserver YouTube-Videos automatisch zu laden, kurz bevor sie in den Viewport scrollen. Wie auch immer du es erweiterst: Das Prinzip bleibt das gleiche!

Auf den von CoreDash überwachten Seiten ist der LCP mit YouTube-Facade-Pattern im Schnitt 800 ms schneller als auf Seiten, die das Embed direkt laden. Wenn du das Facade Pattern implementiert hast: Überprüfe die Verbesserung mit Real User Monitoring anhand echter Besucherdaten.