Leistung von Videos

Im vorherigen Modul haben Sie einige Methoden zur Leistungsoptimierung kennengelernt Bilder, ein weit verbreiteter Ressourcentyp im Web, der eine ausreichende Bandbreite erhalten, wenn nicht auf ihre Optimierung und Darstellungsbereich berücksichtigt.

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 Optimierungsmöglichkeiten erläutert, ist es wichtig zu verstehen, wie die <video> funktioniert.

Videoquelldateien

Wenn Sie mit Mediendateien arbeiten, wird die Datei, die Sie auf Ihrem Betriebssystem kennen, (.mp4, .webm und weitere) wird als Container bezeichnet. Ein Container enthält einen oder mehr Streams. In den meisten Fällen ist dies der Video- und Audiostream.

Du kannst jeden Stream mit einem Codec komprimieren. Ein video.webm könnte beispielsweise einen WebM-Container mit einem mit VP9 komprimierten Videostream und einem Audio der mit Vorbis komprimiert wurde.

Es ist hilfreich, den Unterschied zwischen Containern und Codecs zu verstehen, können Sie Ihre Mediendateien mit deutlich geringerer Bandbreite komprimieren, Das führt zu einer kürzeren Seitenladezeit und einer besseren den Largest Contentful Paint (LCP) der Seite, ein nutzerorientierter Messwert und einen der drei Core Web Vitals-Werte.

Eine Möglichkeit, Videodateien zu komprimieren, bietet FFmpeg:

ffmpeg -i input.mov output.webm

Der obige Befehl ist zwar so einfach wie bei Verwendung von FFmpeg, verwendet jedoch input.mov-Datei und gibt eine output.webm-Datei mit dem Standard-FFmpeg-Format aus Optionen. Der vorherige Befehl gibt eine kleinere Videodatei aus, die in allen moderne Browser. Das Optimieren der Video- oder Audiooptionen, die FFmpeg bietet könnte können Sie die Dateigröße noch weiter reduzieren. Wenn Sie zum Beispiel Wenn du ein <video>-Element verwendest, um ein GIF zu ersetzen, solltest du den Audiotrack entfernen:

ffmpeg -i input.mov -an output.webm

Für weitere Details bietet FFmpeg das Flag -crf an, wenn Komprimieren von Videos ohne Codierung mit variabler Bitrate -crf steht für Konstanter Ratenfaktor. Mit dieser Einstellung wird der Grad der Dabei wird eine Ganzzahl innerhalb eines bestimmten Bereichs akzeptiert.

Codecs wie H.264 und VP9 unterstützen das Flag -crf, aber seine Verwendung hängt von welchen Codec du verwendest. Weitere Informationen finden Sie unter Konstanter Ratenfaktor für Codierung von Videos in H.264 sowie eine konstante Qualität bei der Codierung von Videos in VP9

Mehrere Formate

Bei Videodateien ist die Angabe mehrerer Formate als Fallback möglich. für Browser, 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 auch als Fallback für ältere Browser. Für die WebM-Version kann der neuere AV1-Codec verwendet werden. der noch nicht so weit verbreitet ist, oder der frühere VP9-Codec, der besser unterstützt als AV1, wird aber normalerweise nicht so komprimiert wie AV1.

Das Attribut poster

Das Posterbild eines Videos wird mit dem Attribut poster auf der <video> hinzugefügt. -Element, das Nutzern vor der Wiedergabe Hinweise auf den Inhalt des Videos gibt eingeleitet:

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

Autoplay

Laut dem HTTP-Archiv enthalten 20% der Videos im Web autoplay. autoplay wird verwendet, wenn ein Video abgespielt werden muss sofort als Videohintergrund oder als Ersatz für Animierte GIFs.

Animierte GIFs können sehr groß sein, insbesondere wenn sie viele Frames mit aufwendige Details zu erkennen. Es ist nicht ungewöhnlich, dass animierte GIFs mehrere Megabyte an Daten, was eine erhebliche Belastung der Bandbreite bedeuten kann, die dann nach wichtigeren Ressourcen. Vermeiden Sie in der Regel animierte Bildformate, da <video>-Äquivalente für diesen Medientyp viel effizienter sind.

Wenn auf Ihrer Website die automatische Wiedergabe von Videos erforderlich ist, können Sie die Funktion autoplay-Attribut direkt für das <video>-Element:

<!-- 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>

Indem Sie das Attribut poster mit der Intersection Observer API kombinieren, können Sie Konfiguriere deine Seite so, dass Videos nur dann heruntergeladen werden, wenn sie sich im Darstellungsbereich befinden. Das Bild poster könnte ein Bildplatzhalter von geringer Qualität sein, z. B. das erste Frame des Videos. Sobald das Video im Darstellungsbereich erscheint, startet der Browser wenn das Video heruntergeladen wird. Dies könnte die Ladezeiten für Inhalte im ersten Darstellungsbereichs. Wenn Sie ein poster-Image für autoplay verwenden, erhalten Ihre Nutzer ein Bild, das nur kurz angezeigt wird, bis das Video vollständig wiedergegeben wurde. geladen wird und die Wiedergabe beginnt.

Vom Nutzer initiierte Wiedergabe

Im Allgemeinen beginnt der Browser mit dem Herunterladen einer Videodatei, sobald der HTML- der Parser das <video>-Element erkennt. Wenn du <video>-Elemente hast, bei denen der der Nutzer die Wiedergabe startet, möchten Sie wahrscheinlich nicht, dass der Download des Videos beginnt. bis der Nutzer damit interagiert hat.

Mit der <video> kannst du festlegen, was für Videoressourcen heruntergeladen wird. des preload-Attributs:

• Mit der Einstellung preload="none" wird dem Browser mitgeteilt, dass kein Videoinhalt sollte vorab geladen werden.
• Mit der Einstellung preload="metadata" werden nur Videometadaten abgerufen, z. B. die die Dauer und möglicherweise andere flüchtige Informationen.

Die Einstellung preload="none" ist wahrscheinlich am sinnvollsten beim Laden Videos, für die Nutzer die Wiedergabe starten müssen.

In diesem Fall können Sie die Nutzerfreundlichkeit verbessern, indem Sie ein poster-Bild hinzufügen. Dadurch erhält der Nutzer mehr Kontext zum Inhalt des Videos. Wenn außerdem wenn das Posterbild dein LCP-Element ist, kannst du für das Bild poster Priorität mithilfe des Hinweis <link rel="preload"> in Kombination 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, das Problem auf spezielle Videodienste wie wie YouTube oder Vimeo. Solche Dienste optimieren die Bereitstellung von Videos für Sie, Das Einbetten eines Videos von einem Drittanbieterdienst kann eine eigene Auswirkung auf da die eingebetteten Videoplayer oft viele zusätzliche etwa JavaScript.

Angesichts dieser Tatsache können Einbettungen von Drittanbieter-Videos erhebliche Auswirkungen auf die die Leistung. Laut dem HTTP-Archiv blockieren YouTube-Einbettungen den Hauptthread für mehr als 1,7 Sekunden für die durchschnittliche Website. Hauptthread blockieren für zu lange dauert, stellt ein ernsthaftes Problem mit der Nutzererfahrung dar, das Interaction to Next Paint (INP) der Seite. Sie können jedoch einen Kompromiss finden, indem die Einbettung nicht sofort beim ersten Seitenaufbau geladen wird, sondern Du kannst einen Platzhalter für die Einbettung erstellen, der dann durch die eigentliche Videoeinbettung ersetzt wird. wenn die Nutzenden damit interagieren.

Video demos

Wissen testen

Nächster Schritt: Webschriftarten optimieren

Als Nächstes werden Schriftarten behandelt. Das Optimieren der Schriftarten Ihrer Website wird oft übersehen, kann aber großen Einfluss auf die Gesamtladegeschwindigkeit Ihrer Website haben. als LCP und Cumulative Layout Shift (CLS).