Leistung von Videos

Im vorherigen Modul haben Sie einige Leistungstechniken im Zusammenhang mit Bildern kennengelernt. Sie sind ein weit verbreiteter Ressourcentyp im Web, der viel Bandbreite verbrauchen kann, wenn nicht darauf geachtet wird, sie zu optimieren und den Darstellungsbereich des Nutzers zu berücksichtigen.

Bilder sind jedoch nicht die einzigen Medientypen, die im Web häufig verwendet werden. Videos sind ein weiterer beliebter Medientyp, der oft auf Webseiten verwendet wird. Bevor wir uns einige mögliche Optimierungen ansehen, müssen Sie verstehen, wie das Element <video> funktioniert.

Videoquelldateien

Bei der Arbeit mit Mediendateien wird die Datei, die Sie auf Ihrem Betriebssystem (.mp4, .webm usw.) erkennen, als Container bezeichnet. Ein Container enthält einen oder mehrere Streams. In den meisten Fällen ist dies der Video- und Audiostream.

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

Es ist hilfreich, den Unterschied zwischen Containern und Codecs zu verstehen. So können Sie Ihre Mediendateien mit deutlich weniger Bandbreite komprimieren, was zu kürzeren Seitenladezeiten führt und potenziell den Largest Contentful Paint (LCP) einer Seite – ein nutzerorientierter Messwert und einer der drei Core Web Vitals – verbessert.

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

ffmpeg -i input.mov output.webm

Der vorherige Befehl ist zwar so einfach wie er bei Verwendung von FFmpeg auch einfach ist, verwendet die Datei input.mov und gibt eine output.webm-Datei mit den FFmpeg-Standardoptionen aus. Mit dem vorherigen Befehl wird eine kleinere Videodatei ausgegeben, die in allen modernen Browsern funktioniert. Durch das Optimieren der Video- oder Audiooptionen, die in FFmpeg angeboten werden, kannst du die Dateigröße eines Videos noch weiter reduzieren. Wenn du beispielsweise ein <video>-Element zum Ersetzen eines GIF verwendest, solltest du den Audiotrack entfernen:

ffmpeg -i input.mov -an output.webm

Wenn Sie weitere Optimierungen vornehmen möchten, können Sie in FFmpeg beim Komprimieren von Videos ohne variable Bitrate-Codierung das Flag -crf verwenden. -crf steht für Constant Rate Factor (Konstantenratenfaktor). Mit dieser Einstellung wird die Komprimierungsstufe angepasst, indem eine Ganzzahl innerhalb eines bestimmten Bereichs akzeptiert wird.

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

Mehrere Formate

Bei der Arbeit mit Videodateien können Sie in Browsern, die nicht alle modernen Formate unterstützen, mehrere Formate angeben.

<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. Die WebM-Version kann den neueren AV1-Codec, der noch nicht so weit verbreitet unterstützt wird, oder den früheren VP9-Codec verwenden, der besser als AV1 unterstützt wird, aber in der Regel nicht so gut wie AV1 komprimiert wird.

Das Attribut poster

Das Posterbild eines Videos wird mithilfe des Attributs poster im Element <video> hinzugefügt, das Nutzern vor der Wiedergabe Aufschluss über den Videoinhalt gibt:

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

Autoplay

Laut HTTP-Archiv enthalten 20% aller Videos im Web das Attribut autoplay. 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 aufwendigen Details haben. Es ist nicht ungewöhnlich, dass animierte GIFs mehrere Megabyte an Daten verbrauchen, was die Bandbreite erheblich beanspruchen kann, die für kritischere Ressourcen besser verwendet werden kann. Animierte Bildformate sollten im Allgemeinen vermieden werden, da <video>-Entsprechungen für diese Art von Medien wesentlich effizienter sind.

Wenn die automatische Wiedergabe von Videos für Ihre Website erforderlich ist, können Sie das Attribut autoplay direkt für das <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 Attribut poster mit der Intersection Observer API kombinieren, können Sie Ihre Seite so konfigurieren, dass Videos nur dann heruntergeladen werden, wenn sie sich im Darstellungsbereich befinden. Das Bild poster kann ein Bildplatzhalter in niedriger Qualität sein, z. B. der erste Frame des Videos. Sobald das Video im Darstellungsbereich erscheint, beginnt der Browser mit dem Download. Dadurch können die Ladezeiten für Inhalte im anfänglichen Darstellungsbereich verkürzt werden. Wenn Sie ein poster-Bild für autoplay verwenden, sehen Nutzer ein Bild, das nur kurz angezeigt wird, bis das Video geladen ist und die Wiedergabe beginnt.

Vom Nutzer initiierte Wiedergabe

Im Allgemeinen beginnt der Browser mit dem Herunterladen einer Videodatei, sobald der HTML-Parser das <video>-Element erkannt hat. Wenn es <video>-Elemente gibt, mit denen der Nutzer die Wiedergabe startet, ist es wahrscheinlich erst dann sinnvoll, wenn der Nutzer mit dem Video interagiert hat.

Mit dem Attribut preload des Elements <video> können Sie festlegen, was für Videoressourcen heruntergeladen wird:

• Mit der Einstellung preload="none" wird dem Browser mitgeteilt, dass keiner der Videoinhalte vorab geladen werden sollte.
• Wenn du preload="metadata" festlegst, werden nur Videometadaten wie die Dauer des Videos und möglicherweise andere oberflächliche Informationen abgerufen.

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

In diesem Fall können Sie die Nutzererfahrung verbessern, indem Sie ein poster-Bild hinzufügen. Dies gibt dem Nutzer einen gewissen Kontext zu dem, worum es in dem Video geht. Wenn das Posterbild dein LCP-Element ist, kannst du außerdem die Priorität des Bilds poster erhöhen. Verwende dazu den Hinweis <link rel="preload"> zusammen mit fetchpriority="high":

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

Embeds API

Angesichts der Komplexität bei der effizienten Optimierung und Bereitstellung von Videoinhalten ist es sinnvoll, dieses Problem auf dedizierte Videodienste wie YouTube oder Vimeo auszulagern. Solche Dienste optimieren die Bereitstellung von Videos für Sie. Das Einbetten eines Videos über einen Drittanbieterdienst kann jedoch einen eigenen Effekt auf die Leistung haben, da eingebettete Videoplayer häufig viele zusätzliche Ressourcen wie JavaScript bereitstellen können.

Angesichts dieser Tatsache können Videoeinbettungen von Drittanbietern die Seitenleistung erheblich beeinträchtigen. Laut dem HTTP-Archiv blockieren YouTube-Einbettungen den Hauptthread für mehr als 1, 7 Sekunden für die mittlere Website. Das Blockieren des Hauptthreads über einen längeren Zeitraum stellt ein ernsthaftes Problem mit der Nutzererfahrung dar, das die Interaction to Next Paint (INP) einer Seite beeinträchtigen kann. Sie können eine Manipulation jedoch vornehmen, indem Sie die Einbettung nicht sofort beim ersten Seitenaufbau laden. Stattdessen erstellen Sie einen Platzhalter für die Einbettung, der dann durch die tatsächliche Videoeinbettung ersetzt wird, wenn der Nutzer damit interagiert.

Video demos

Wissen testen

Nächster Schritt: Webschriftarten optimieren

Als Nächstes beschäftigen wir uns mit der Optimierung bestimmter Ressourcentypen. Häufig wird die Optimierung der Schriftarten Ihrer Website übersehen. Sie kann sich aber erheblich auf die Ladegeschwindigkeit Ihrer Website und auf Messwerte wie LCP und Cumulative Layout Shift (CLS) auswirken.