Veröffentlicht am 16. August 2019, zuletzt aktualisiert am 2. Juli 2026
Wie bei Bildelementen kann es auch sinnvoll sein, Videos per Lazy Loading zu laden. Videos werden in der Regel mit dem <video> Element geladen. Bei Videos, die auf anderen Diensten wie YouTube gehostet werden, können jedoch auch <iframe>s verwendet werden. In diesem Fall finden Sie weitere Informationen im Artikel zum Lazy Loading von iFrames.
Wie Sie <video> per Lazy Loading laden, hängt vom Anwendungsfall ab, da es verschiedene Lösungen gibt.
Attribut loading verwenden
Browser unterstützen jetzt das loading Attribut für Media-Elemente (<video> und <audio>). Wenn es unterstützt wird, werden sowohl die Medien als auch alle Posterbilder automatisch per Lazy Loading geladen, indem Sie einfach das loading="lazy" Attribut hinzufügen:
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Wenn Sie loading="lazy" verwenden, wird das poster-Bild erst geladen, wenn es sich im oder in der Nähe des Darstellungsbereichs befindet. Dann wird mit dem Attribut preload festgelegt, wie viel vom video geladen werden soll. Das bedeutet auch, dass autoplay-Videos erst automatisch abgespielt werden, wenn sie sich im oder in der Nähe des Darstellungsbereichs befinden. Das Attribut loading="lazy" funktioniert mit den Attributen poster, preload und autoplay und ersetzt sie nicht.
Browser, die das Attribut loading für Media-Elemente nicht unterstützen, ignorieren es. Das führt dazu, dass das poster-Bild sofort geladen wird und das Video basierend auf dem Attribut preload geladen wird, das wir als Nächstes behandeln.
Attribut preload verwenden, um Videos per Lazy Loading zu laden, die nicht automatisch abgespielt werden
Es ist in der Regel die beste Vorgehensweise, Videos nicht automatisch abzuspielen, da der Nutzer so die Kontrolle behält. In diesen Fällen ist es am besten, das Attribut preload für das Element <video> anzugeben, um zu verhindern, dass das gesamte Video geladen wird, bis es benötigt wird:
<video controls loading="lazy" preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Im vorherigen Beispiel wird ein preload-Attribut mit dem Wert none verwendet, um zu verhindern, dass Browser irgendwelche Videodaten vorab laden, auch wenn sie sich im Darstellungsbereich befinden. Das poster Attribut gibt dem <video> Element einen Platzhalter, der den Platz einnimmt, während das Video geladen wird.
In den meisten Browsern ist preload standardmäßig auf metadata festgelegt und ein Teil des Videos wird mit dem Header Content-Range vorab geladen. Das kann dazu führen, dass mehr Daten heruntergeladen werden als gewünscht. Browser wissen nicht, an welcher Stelle die Metadaten gespeichert sind, und sie sind möglicherweise nicht am Anfang der Datei gespeichert. Die beste Möglichkeit, das Laden des Videos zu vermeiden, ist daher die Verwendung von preload="none".
Sie können dies weiter verbessern, indem Sie die Metadaten vorab laden, wenn der Nutzer mit dem Mauszeiger auf das Video bewegt wird. Verwenden Sie dazu das onmouseenter Attribut oder den entsprechenden mouseenter Ereignishandler:
<video controls
loading="lazy"
preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Dadurch wird nicht nur die Verzögerung reduziert, wenn der Nutzer das Video abspielen möchte, sondern auch die Dauer des Videos angezeigt, sobald er den Mauszeiger auf das Video bewegt.
Videos können als LCP-Kandidaten infrage kommen. Ein poster Bild wird schneller geladen als das Video. Wenn es sich also um einen LCP-Kandidaten handelt, sollten Sie ein Posterbild verwenden, es aber auch vorab laden mit dem Attribut fetchpriority und dem Wert "high". Derzeit können Sie fetchpriority nicht für Posterattribute angeben:
<link rel="preload" href="one-does-not-simply-placeholder.jpg" as="image" fetchpriority="high">
<video controls preload="none"
poster="one-does-not-simply-placeholder.jpg"
onmouseenter="event.target.setAttribute('preload','metadata')">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Für Videos, die LCP-Elemente sind, sollte loading="lazy" nicht verwendet werden. Genauso sollten Sie LCP-Bilder und ‑Videos nicht per Lazy Loading laden.
Video als Ersatz für animierte GIFs
Autoplay-Videos werden häufig für kurze Animationen im GIF-Stil verwendet. Animierte GIFs sind zwar weit verbreitet, aber in vielerlei Hinsicht unterlegen sie Video-Äquivalenten, insbesondere in Bezug auf die Dateigröße. Animierte GIFs können mehrere Megabyte an Daten umfassen. Videos mit ähnlicher visueller Qualität sind in der Regel viel kleiner.
Die Verwendung des <video> Elements als Ersatz für animierte GIFs ist nicht so einfach wie beim <img> Element. Animierte GIFs haben drei Merkmale:
- Sie werden beim Laden automatisch abgespielt.
- Sie werden kontinuierlich wiederholt (das ist jedoch nicht immer der Fall).
- Sie haben keine Audiospur.
So erreichen Sie das mit dem <video> Element:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Das Attribut loading="lazy" verhindert, dass das Video geladen wird, bis es sich in der Nähe des Darstellungsbereichs befindet. Die Attribute autoplay, muted und loop sind selbsterklärend. playsinline ist erforderlich, damit die automatische Wiedergabe unter iOS funktioniert.
Jetzt haben Sie einen brauchbaren Video-als-GIF-Ersatz, der auf allen Plattformen funktioniert. Aber wie können Sie es per Lazy Loading laden?
Für Browser, die dies unterstützen, ist loading="lazy" die einfachste Option:
<video loading="lazy" autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Wenn Sie Videos in anderen Browsern per Lazy Loading laden möchten, müssen Sie JavaScript verwenden und Ihr <video> Markup entsprechend ändern:
<video class="lazy" preload="none" controls muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Sie sehen, dass autoplay entfernt wurde und die Attribute class="lazy", preload="none" und poster hinzugefügt wurden. Mit diesen Attributen können Sie einen Platzhalter angeben, der den Platz des Elements <video> einnimmt, bis das Video per Lazy Loading geladen wird. Anschließend verwenden wir einen JavaScript-Intersection Observer, um die automatische Wiedergabe wieder zu aktivieren:
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
video.target.removeAttribute('preload');
video.target.removeAttribute('controls');
video.target.autoplay = true;
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Bei dieser Methode wird das Video nicht standardmäßig automatisch abgespielt, sondern nur, wenn der Intersection Observer erkennt, dass das Video in den Darstellungsbereich gelangt. Außerdem werden mit dem Attribut controls die Fälle behandelt, in denen JavaScript fehlschlägt. Insgesamt haben Sie also eine Videolösung, die das Verhalten animierter GIFs nachahmt, aber nicht so viel Datenverkehr verursacht wie animierte GIFs. Außerdem können Sie diese Inhalte per Lazy Loading laden.
Bibliotheken für Lazy Loading
Mit den folgenden Bibliotheken können Sie Videos per Lazy Loading laden:
- vanilla-lazyload und lozad.js sind sehr schlanke Optionen, die nur Intersection Observer verwenden. Daher sind sie sehr leistungsstark, müssen aber polyfillt werden, bevor Sie sie in älteren Browsern verwenden können.
- Wenn Sie eine React-spezifische Bibliothek für Lazy Loading benötigen, sollten Sie react-lazyload in Betracht ziehen. Sie verwendet zwar keinen Intersection Observer, bietet aber eine vertraute Methode zum Lazy Loading von Bildern für Nutzer, die mit React-Anwendungen entwickeln.
Jede dieser Bibliotheken für Lazy Loading ist gut dokumentiert und bietet viele Markup-Muster für Ihre verschiedenen Lazy Loading-Projekte.
Da das loading Attribut für <video> in immer mehr Browsern verfügbar ist, gehen wir davon aus, dass JavaScript-Lösungen (einschließlich Bibliotheken) weniger verwendet werden und stattdessen die integrierten Lösungen zum Einsatz kommen. Das gilt jedoch nicht für Nutzer, die mehr Kontrolle benötigen.