Leistung von Videos

In Im vorherigen Modul haben Sie einige Leistungstechniken im Zusammenhang mit Bildern kennengelernt. Bilder sind ein weit verbreiteter Ressourcentyp im Web, der erhebliche Bandbreite verbrauchen kann, wenn sie nicht optimiert werden und der Viewport des Nutzers nicht berücksichtigt wird.

Bilder sind jedoch nicht der einzige Medientyp, der häufig im Web zu finden ist. Videos sind ein weiterer beliebter Medientyp, der oft auf Webseiten verwendet wird. Bevor wir uns einige der möglichen Optimierungen ansehen, ist es wichtig, zuerst zu verstehen, wie das <video> Element funktioniert.

Videoquelldateien

Wenn Sie mit Mediendateien arbeiten, wird die Datei, die Sie in Ihrem Betriebssystem sehen (.mp4, .webm usw.), als Container bezeichnet. Ein Container enthält einen oder mehrere Streams. In den meisten Fällen sind das der Video- und der Audiostream.

Sie können jeden Stream mit einem Codec komprimieren. Beispielsweise könnte video.webm ein WebM-Container sein, der einen mit VP9 komprimierten Videostream und einen mit Vorbis komprimierten Audio stream enthält.

Es ist hilfreich, den Unterschied zwischen Containern und Codecs zu kennen, da Sie so Ihre Mediendateien mit deutlich weniger Bandbreite komprimieren können. Das führt zu kürzeren Ladezeiten für Seiten und kann auch den LCP-Wert (Largest Contentful Paint) einer Seite verbessern. Der nutzerorientierte Messwert ist einer der drei Core Web Vitals.

Eine Möglichkeit zum Komprimieren von Videodateien ist die Verwendung von FFmpeg:

ffmpeg -i input.mov output.webm

Der vorherige Befehl, der so einfach wie möglich ist, wenn Sie FFmpeg verwenden, nimmt die Datei input.mov und gibt eine output.webm-Datei mit den Standardoptionen von FFmpeg aus. Der vorherige Befehl gibt eine kleinere Videodatei aus, die in allen modernen Browsern funktioniert. Wenn Sie die Video oder Audiooptionen von FFmpeg anpassen, können Sie die Dateigröße eines Videos noch weiter reduzieren. Wenn Sie beispielsweise ein <video> Element verwenden, um ein GIF zu ersetzen, sollten Sie die Audiospur entfernen:

ffmpeg -i input.mov -an output.webm

Wenn Sie die Dinge noch weiter anpassen möchten, bietet FFmpeg das Flag -crf zum Komprimieren von Videos ohne Verwendung der Codierung mit variabler Bitrate. -crf steht für Constant Rate Factor (Konstanter Ratenfaktor). Das ist eine Einstellung, mit der die Komprimierungsstufe angepasst wird. Dazu wird eine Ganzzahl innerhalb eines bestimmten Bereichs akzeptiert.

Codecs wie H.264 und VP9 unterstützen das Flag -crf, die Verwendung hängt jedoch davon ab, welchen Codec Sie verwenden. Weitere Informationen finden Sie unter Konstanter Ratenfaktor für die Codierung von Videos in H.264 sowie Konstante Qualität bei der Codierung von Videos in VP9.

Mehrere Formate

Wenn Sie mit Videodateien arbeiten, können Sie mehrere Formate angeben, um als Fallback für Browser zu dienen, die nicht alle modernen Formate unterstützen.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Da alle modernen Browser den H.264-Codec unterstützen, kann MP4 als Fallback für ältere Browser verwendet werden. Für die WebM-Version kann der neuere AV1-Codec verwendet werden, der noch nicht so weit verbreitet ist, oder der ältere VP9-Codec, der besser unterstützt wird als AV1, aber in der Regel nicht so gut komprimiert wie AV1.

Das poster-Attribut

Das Posterbild eines Videos wird mit dem poster Attribut im <video> Element hinzugefügt. So können Nutzer sehen, was die Videoinhalte sein könnten, bevor die Wiedergabe gestartet wird:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Autoplay

Laut dem HTTP Archive enthalten 20% der Videos im Web das autoplay Attribut. autoplay wird verwendet, wenn ein Video sofort abgespielt werden muss, z. B. als Videohintergrund oder als Ersatz für animierte GIFs.

Animierte GIFs können sehr groß sein, insbesondere wenn sie viele Frames mit komplexen Details enthalten. Es ist nicht ungewöhnlich, dass animierte GIFs mehrere Megabyte an Daten verbrauchen. Das kann die Bandbreite erheblich belasten, die besser für wichtigere Ressourcen verwendet werden könnte. Sie sollten animierte Bildformate im Allgemeinen vermeiden, da <video> Entsprechungen für diese Art von Medien viel effizienter sind.

Wenn das automatische Abspielen von Videos für Ihre Website erforderlich ist, können Sie das autoplay Attribut direkt im <video> Element verwenden:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Wenn Sie das poster-Attribut mit der Intersection Observer API kombinieren, können Sie Ihre Seite so konfigurieren, dass Videos erst heruntergeladen werden, wenn sie sich im Viewport befinden. Das poster-Bild kann ein Platzhalter mit niedriger Qualität sein, z. B. der erste Frame des Videos. Sobald das Video im Viewport angezeigt wird, beginnt der Browser mit dem Herunterladen des Videos. Dadurch können die Ladezeiten für Inhalte im ursprünglichen Viewport verbessert werden. Wenn Sie ein poster-Bild für autoplay verwenden, erhalten Ihre Nutzer ein Bild, das nur kurz angezeigt wird, bis das Video geladen ist und abgespielt wird.

Vom Nutzer initiierte Wiedergabe

Im Allgemeinen beginnt der Browser mit dem Herunterladen einer Videodatei, sobald der HTML Parser das <video> Element findet. Wenn Sie <video> Elemente haben, bei denen der Nutzer die Wiedergabe startet, möchten Sie wahrscheinlich nicht, dass das Video heruntergeladen wird, bevor der Nutzer damit interagiert hat.

Sie können beeinflussen, was für Videoressourcen heruntergeladen wird, indem Sie das <video> Element's preload Attribut verwenden:

• Wenn Sie preload="none" festlegen, wird der Browser darüber informiert, dass keine der Videoinhalte vorab geladen werden soll.
• Wenn Sie preload="metadata" festlegen, werden nur Videometadaten abgerufen, z. B. die Dauer des Videos und möglicherweise andere oberflächliche Informationen.

Die Einstellung preload="none" ist wahrscheinlich die beste Option, wenn Sie Videos laden, für die Nutzer die Wiedergabe starten müssen.

Sie können die Nutzererfahrung in diesem Fall verbessern, indem Sie ein poster-Bild hinzufügen. So erhalten Nutzer einen Kontext zum Video. Wenn das Posterbild Ihr LCP-Element ist, können Sie außerdem die Priorität des poster Bilds mit dem Hinweis <link rel="preload"> zusammen mit fetchpriority="high" erhöhen:

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Lazy Loading

Eine relativ neue Ergänzung für die Videoleistung ist das Attribut loading=lazy. Ähnlich wie beim Lazy Loading von Bildern auf Browserebene und beim Lazy Loading von iFrames bietet dieses Attribut dasselbe für Videos für die poster- und preload-Downloads.

Wenn Sie ein poster-Attribut zusammen mit preload="none" oder preload="metadata" verwenden, wird das Video standardmäßig nicht heruntergeladen. Mit dem Attribut loading=lazy wird das Herunterladen des Posterbilds und der Metadaten sogar verzögert, bis sich das Video im Viewport befindet oder sich ihm nähert.

Embeds API

Angesichts der Komplexität bei der Optimierung und effizienten Bereitstellung von Videoinhalten ist es sinnvoll, das Problem an spezielle Videodienste wie YouTube oder Vimeo auszulagern. Solche Dienste optimieren die Bereitstellung von Videos für Sie. Das Einbetten eines Videos von einem Drittanbieterdienst kann jedoch eigene Auswirkungen auf die Leistung haben, da die eingebetteten Videoplayer oft viele zusätzliche Ressourcen wie JavaScript bereitstellen.

Daher können Video-Embeds von Drittanbietern die Seitenleistung erheblich beeinträchtigen. Laut dem HTTP Archive blockieren YouTube-Embeds den Hauptthread für die durchschnittliche Website mehr als 1, 7 Sekunden. Das Blockieren des Hauptthreads über längere Zeiträume ist ein ernstes Problem für die Nutzererfahrung, das sich auf den INP-Wert (Interaction to Next Paint) einer Seite auswirken kann. Sie können jedoch einen Kompromiss eingehen, indem Sie das Embed nicht sofort beim ersten Laden der Seite laden, und stattdessen einen Platzhalter für das Embed erstellen, der durch das tatsächliche Video-Embed ersetzt wird, wenn der Nutzer damit interagiert.

Video-Demos

Wissen testen

Nächstes Thema: Webschriftarten optimieren

Als Nächstes in unserer Reihe zur Optimierung bestimmter Ressourcentypen sind Schriftarten an der Reihe. Die Optimierung der Schriftarten Ihrer Website wird oft übersehen, kann aber erhebliche Auswirkungen auf die Gesamtladegeschwindigkeit Ihrer Website und Messwerte wie LCP und CLS (Cumulative Layout Shift) haben.