Leistung von Videos

Im vorherigen Modul haben Sie einige Leistungstechniken für Bilder kennengelernt. Bilder sind eine häufig verwendete Ressource im Web, die viel 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 häufig 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 Media-Dateien 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. Ein video.webm könnte beispielsweise ein WebM-Container sein, der einen mit VP9 komprimierten Videostream und einen mit Vorbis komprimierten Audiostream enthält.

Wenn Sie den Unterschied zwischen Containern und Codecs kennen, können Sie Ihre Mediendateien mit deutlich weniger Bandbreite komprimieren. Das führt zu kürzeren Seitenladezeiten und kann auch den Largest Contentful Paint (LCP) einer Seite verbessern. Der LCP ist ein nutzerorientierter Messwert und einer der drei Core Web Vitals.

Eine Möglichkeit, Videodateien zu komprimieren, ist die Verwendung von FFmpeg:

ffmpeg -i input.mov output.webm

Der vorherige Befehl ist zwar sehr einfach, wenn man FFmpeg verwendet, aber er nimmt die Datei input.mov und gibt eine Datei output.webm mit den Standardoptionen von FFmpeg aus. Der vorherige Befehl gibt eine kleinere Videodatei aus, die in allen modernen Browsern funktioniert. Durch Anpassen der Video- oder Audiooptionen, die FFmpeg bietet, lässt sich die Dateigröße eines Videos möglicherweise noch weiter reduzieren. Wenn Sie beispielsweise ein <video>-Element verwenden, um ein GIF zu ersetzen, sollten Sie den Audio-Track entfernen:

ffmpeg -i input.mov -an output.webm

Wenn Sie die Einstellungen noch weiter anpassen möchten, bietet FFmpeg das Flag -crf zum Komprimieren von Videos ohne Verwendung der variablen Bitraten-Codierung. -crf steht für Constant Rate Factor (konstanter Ratenfaktor). Mit dieser Einstellung wird der Grad der Komprimierung angepasst. 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 Constant Rate Factor for Encoding Videos in H.264 und Constant Quality when Encoding Videos in VP9.

Mehrere Formate

Wenn Sie mit Videodateien arbeiten, können Sie mehrere Formate angeben, die als Fallback für Browser 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 Attribut poster

Das Posterbild eines Videos wird mit dem poster-Attribut im <video>-Element hinzugefügt. Es gibt Nutzern einen Hinweis darauf, was im Video zu sehen sein könnte, 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 HTTP Archive enthalten 20% der 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 komplexen Details enthalten. Animierte GIFs verbrauchen oft mehrere Megabyte an Daten, was die Bandbreite, die für wichtigere Ressourcen benötigt wird, erheblich einschränken kann. Animierte Bildformate sollten im Allgemeinen vermieden werden, da <video>-Entsprechungen für diese Art von Medien viel 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 erst heruntergeladen werden, wenn sie sich im sichtbaren Bereich befinden. Das poster-Bild könnte ein Platzhalterbild in 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 Darstellungsbereich verkürzt werden. Wenn Sie ein poster-Bild für autoplay verwenden, sehen Ihre Nutzer ein Bild, das nur kurz angezeigt wird, bis das Video geladen und die Wiedergabe gestartet wird.

Vom Nutzer initiierte Wiedergabe

Im Allgemeinen beginnt der Browser mit dem Herunterladen einer Videodatei, sobald der HTML-Parser das <video>-Element erkennt. 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 mit dem Element interagiert hat.

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

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

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

Sie können die Nutzerfreundlichkeit in diesem Fall verbessern, indem Sie ein poster-Bild hinzufügen. So erhält der Nutzer einen gewissen Kontext zum Inhalt des Videos. Wenn das Vorschaubild Ihr LCP-Element ist, können Sie die Priorität des poster-Bilds mit dem Hinweis <link rel="preload"> und fetchpriority="high" erhöhen:

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

Embeds API

Angesichts der Komplexität, die mit der Optimierung und effizienten Bereitstellung von Videoinhalten einhergeht, 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 Videoeinbettungen von Drittanbietern die Seitenleistung erheblich beeinträchtigen. Laut HTTP Archive blockieren YouTube-Einbettungen den Hauptthread für die durchschnittliche Website für mehr als 1, 7 Sekunden. Wenn der Hauptthread für längere Zeit blockiert wird, ist das ein schwerwiegendes Problem für die Nutzerfreundlichkeit, das sich auf den INP-Wert (Interaction to Next Paint) einer Seite auswirken kann. Sie können jedoch einen Kompromiss eingehen, indem Sie das eingebettete Element nicht sofort beim ersten Laden der Seite laden, sondern stattdessen einen Platzhalter dafür erstellen, der durch das tatsächliche Video-Embed ersetzt wird, wenn der Nutzer damit interagiert.

Video-Demos

Wissen testen

Als Nächstes: Webschriftarten optimieren

Als Nächstes geht es um die Optimierung von Schriftarten. Die Optimierung der Schriftarten Ihrer Website wird oft übersehen, kann aber erhebliche Auswirkungen auf die Gesamtladegeschwindigkeit Ihrer Website und auf Messwerte wie LCP und Cumulative Layout Shift (CLS) haben.