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.
<ph type="x-smartling-placeholder">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.
<ph type="x-smartling-placeholder">Video demos
Wissen testen
Die Reihenfolge der <source>-Elemente innerhalb einer
Übergeordnetes <video>-Element bestimmt nicht,
welche Videoressource heruntergeladen wird.
Das Attribut poster des <video>-Elements
gilt als LCP-Kandidat.
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).