Ladezeit von YouTube-Videos optimieren für mehr PageSpeed

Mit diesem Trick können Sie YouTube-Videos auf Ihrer Website einbinden, ohne den PageSpeed zu verschlechtern.

Eingebettete YouTube-Videos: Die Ladezeit-Bremse für Ihren PageSpeed

Dass die Ladegeschwindigkeit einer Website – der sogenannte Google PageSpeed – ein kritischer Rankingfaktor ist, gehört mittlerweile zum SEO-Basiswissen. Doch schnelle Ladezeiten sind nicht nur für Suchmaschinen wichtig: Auch die Nutzer Ihrer Website oder Ihres Onlineshops erwarten eine sofortige Darstellung und springen bei Verzögerungen schnell ab. Google selbst gibt in seinen PageSpeed Insights zahlreiche Tipps zur Optimierung. Umso kurioser ist es, dass ausgerechnet ein hauseigenes Google-Produkt die Performance massiv ausbremsen kann: YouTube.

Zwar lassen sich Videos via iFrame im Handumdrehen einbetten, standardmäßig laden sie jedoch eine enorme Menge an Skripten, Bildern und Player-Ressourcen im Hintergrund – und das direkt beim ersten Seitenaufruf, noch bevor ein Nutzer überhaupt auf den „Play“-Button geklickt hat. Das belastet den kritischen Rendering-Pfad und drückt den PageSpeed-Score spürbar nach unten.

Schritt-für-Schritt-Anleitung: YouTube-Ladezeit für PageSpeed optimieren

Mit einem einfachen Kniff verhindern Sie, dass der Browser die schweren YouTube-Ressourcen blockierend mitlädt. Die Lösung: Wir verzögern das Laden des iFrames (sogenanntes Deferring) und laden die Videodaten erst dann nach, wenn die eigentliche Hauptseite bereits vollständig aufgebaut ist.

1. iFrame-Code anpassen: Fügen Sie den YouTube-Einbettungscode in Ihre Seite ein. Ändern Sie dabei im HTML-Code das Attribut src="..." in data-src="..." ab. Dadurch blockiert der Browser beim ersten Laden der Seite den Abruf der YouTube-Server.
2. JavaScript im Footer einfügen: Platzieren Sie das folgende JavaScript-Snippet im Footer Ihrer Website (am besten kurz vor dem schließenden </body>-Tag). Dieses sorgt dafür, dass die korrekte Video-URL automatisch eingesetzt wird, sobald die restliche Seite fertig geladen ist.

Hier ist der Code zum Kopieren:

function initYouTubeDefer() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.addEventListener('load', initYouTubeDefer);

Durch diese Methode sparen Sie beim initialen Seitenaufruf Dutzende Dateianfragen (Requests) und wertvolle Megabytes an Datenvolumen. So können Sie YouTube-Videos nahtlos einbinden, ohne dafür Ihren PageSpeed zu opfern.

Weitere wertvolle Tipps zur PageSpeed-Optimierung (z. B. für Shopware) finden Sie hier.