Ein YouTube-Embed lädt beim Aufruf die eigenen Skripte des Players und ein Vorschaubild, und auf einer Seite mit mehreren Videos summiert sich das schnell. So bleibst du schnell, ohne auf eingebettetes Video zu verzichten.
Warum Embeds die Ladegeschwindigkeit beeinflussen
Schon bevor ein Besucher auf Play drückt, fordert ein eingebettetes Iframe die Player-Ressourcen von YouTube und ein Vorschaubild an. Auf einer Bewertungsseite mit fünf eingebetteten Videos zum Beispiel sind das fünf Sätze von Anfragen, die gleichzeitig beim Seitenaufbau feuern und mit den Ressourcen deiner eigenen Website um Bandbreite und Renderzeit konkurrieren.
Lösung 1: Natives Lazy Loading
Die einfachste Lösung ist ein einziges HTML-Attribut. Das Hinzufügen von loading=”lazy” zu einem <iframe> weist den Browser an, das Laden zu verzögern, bis es kurz davor ist, in den sichtbaren Bereich zu scrollen:
<iframe src="..." loading="lazy" ...></iframe>Das wird von allen modernen Browsern unterstützt, benötigt kein JavaScript und ist die wirkungsvollste einzelne Änderung für eine Seite mit eingebettetem Video unterhalb des sichtbaren Bereichs.
Lösung 2: Klick-zum-Laden
Für Seiten mit vielen Embeds ist eine noch konsequentere Option, überhaupt kein Iframe zu laden, bis ein Besucher darauf klickt. Zeige ein statisches Vorschaubild, bezogen von den öffentlichen Thumbnail-URLs von YouTube (siehe unseren Thumbnail-Viewer), mit einem Play-Button darüber, und tausche das echte Iframe erst beim Klick ein. So entstehen für Videos, die ein Besucher nie wirklich abspielt, keine YouTube-Anfragen.
Lösung 3: Nur autoplayen, was es wirklich braucht
Autoplay fügt in dem Moment, in dem die Seite lädt, echte Arbeit hinzu: Der Player muss sofort puffern, statt auf die Absicht des Nutzers zu warten. Hebe Autoplay für wirklich wichtige Embeds auf und verlasse dich bei den übrigen auf Lazy Loading plus einen sichtbaren Play-Button.
Die Wirkung messen
Tools wie Google PageSpeed Insights oder das Lighthouse-Panel deines eigenen Browsers weisen nicht optimierte Drittanbieter-Embeds direkt aus und erlauben es, die Ladezeiten vor und nach dem Einsatz von Lazy Loading zu vergleichen. Auf Seiten mit mehreren Videos ist der Unterschied meist sowohl an den Zahlen als auch am gefühlten Ladeverhalten leicht erkennbar.
Standardmäßig eingebaut
Unser Embed-Code-Generator fügt standardmäßig loading=”lazy” bei jedem generierten Embed hinzu, sodass diese Optimierung bereits erledigt ist, sobald du den Code kopierst.