Was ist Lazy Loading?
Eine Technik, die das Laden einer Ressource, etwa eines eingebetteten Videoplayers, verzögert, bis diese kurz davor ist, sichtbar zu werden.
Lazy Loading verzögert das Laden eines Teils einer Seite, etwa eines Bilds oder eines eingebetteten Iframes, bis dieser tatsächlich in die Nähe des sichtbaren Bereichs scrollt. Bei einem YouTube-Embed bedeutet das, dass Player-Skript und Thumbnail-Vorschau nicht sofort beim Öffnen der Seite laden, sondern erst, wenn ein Besucher kurz davor ist, es zu sehen.
Warum das bei Embeds wichtig ist
Ein YouTube-Iframe ist verhältnismäßig schwer zu laden. Eine Seite mit mehreren Embeds (etwa ein Blogbeitrag mit einer Besprechung von fünf Videos) kann sich merklich langsamer anfühlen, wenn alle sofort laden, weshalb Lazy Loading eine gängige Empfehlung für Core Web Vitals und allgemeine Seitenladegeschwindigkeit ist.
Wie man es aktiviert
Moderne Browser unterstützen das native Attribut loading=”lazy” direkt an einem <iframe>, ohne zusätzliches Skript. Der Embed-Code-Generator fügt dieses Attribut standardmäßig hinzu.
Wie natives Lazy Loading unter der Haube funktioniert
Wenn ein Browser auf ein Element mit loading=”lazy” trifft, erstellt er keinen Platzhalter und wartet dann unbegrenzt; stattdessen berechnet er einen groben Abstandsschwellenwert vom aktuellen sichtbaren Bereich und startet die eigentliche Netzwerkanfrage erst, sobald sich das Element diesem Schwellenwert nähert, typischerweise einige hundert bis tausend Pixel, bevor es sichtbar würde, abhängig von Browser und Netzwerkbedingungen. Das bedeutet, ein per Lazy Loading geladenes Embed lädt trotzdem rechtzeitig, um sichtbar zu sein, wenn ein Besucher dorthin scrollt, ohne die Ladekosten für Embeds weit unterhalb des sichtbaren Bereichs zu zahlen, zu denen ein Besucher vielleicht nie hinscrollt.
Ein praktisches Beispiel
Ein längerer Artikel, der zehn Produkte bespricht, jeweils mit eingebettetem Demovideo, profitiert enorm von Lazy Loading: Ohne es würden alle zehn Player ihre Skripte und Thumbnails gleichzeitig beim Laden der Seite anfordern; mit loading="lazy" an jedem Iframe laden nur das eine oder zwei Videos nahe dem oberen Bereich sofort, während der Rest schrittweise lädt, während der Besucher nach unten scrollt.
Lazy Loading versus Click-to-Load
Lazy Loading und Click-to-Load lösen ein ähnliches Problem mit unterschiedlichen Kompromissen. Lazy Loading lädt letztlich trotzdem jedes Embed automatisch, sobald ein Besucher in dessen Nähe scrollt, was einfach umzusetzen ist (ein einziges HTML-Attribut), aber keine Ressourcen für Embeds spart, an denen der Besucher tatsächlich vorbeiscrollt und die er sieht. Click-to-Load geht weiter und lädt das echte Iframe erst, wenn ein Besucher ausdrücklich auf einen Platzhalter klickt, was mehr Umsetzungsaufwand erfordert, aber null Anfragen für nie tatsächlich abgespielte Videos garantiert. Für die meisten Websites bietet natives Lazy Loading, bereits standardmäßig in unserem Embed-Code-Generator verwendet, die beste Balance zwischen Einfachheit und Leistungsvorteil.
Als Faustregel: Wende Lazy Loading auf jedes Embed an, außer auf eines, das garantiert schon im Moment des Seitenladens sichtbar ist, etwa ein Hero-Video ganz oben.
Die Browserunterstützung für natives Lazy Loading ist inzwischen bei modernem Chrome, Firefox, Safari und Edge breit genug, dass eine JavaScript-basierte Lazy-Loading-Bibliothek speziell für Iframes kaum noch nötig ist, obwohl ältere bibliotheksbasierte Ansätze auf vielen bestehenden Websites weiterhin im Einsatz sind, die vor Einführung der nativen Unterstützung gebaut wurden.
Häufig gestellte Fragen
Hilft Lazy Loading speziell bei YouTube-Embeds?
Ja, es verzögert das Laden des Players und seiner Skripte, bis ein Besucher in die Nähe des Embeds scrollt, was Seiten mit mehreren Videos schnell hält.
Wie füge ich einem Embed Lazy Loading hinzu?
Unser Embed-Code-Generator fügt das Attribut loading=”lazy” standardmäßig hinzu.