Performance: Einfache Tipps zur Video-Optimierung auf Websites

Video auf Websites ist inzwischen ein gängiges Element, das vielfach sogar zu reinen Design-Zwecken eingesetzt wird. Und es ist ein Faktor, den du aus Performance-Gründen dringend optimieren solltest.

Zuviel Eye Candy: Wenn die Website immer dicker wird

Wir beschweren uns über Ladezeiten. Besucher verschwinden nach wenigen Sekunden ohne Bildaufbau auf Nimmerwiedersehen. Wir diskutieren, wie wir noch das letzte Quäntchen Luft aus unserem Bildmaterial pressen können. Und dann gehen wir her und bauen ein Video in den Header-Bereich unserer Website oder gleich als vollflächigen Hintergrund ein. Hero-Video ist einer der neusten Schreie im Design-Panoptikum.

Aber nicht nur als weitgehend nutzloses Hintergrund-Element verschwenden Videos Bandbreite. Auch bei Tutorials oder Image-Filmchen lohnt es sich, ein paar Tipps zu beherzigen, um den Anstieg der Ladezeit deiner Website wenigstens im Zaume zu halten. Denn, dass die durchschnittliche Site immer schwerer wird, ist ja kein Geheimnis. Laut HTTPArchive liegt deren Gewicht inzwischen bei 3.061kb, während der Wert noch vor einem Jahr bei einem guten halben Megabyte niedriger lag. Ein weiteres Jahr zuvor lag er um nochmal ein halbes MB niedriger. Seit Mitte 2018 scheint sich der Trend indes umzukehren. Mit einer Transfer Size von um die 2.800kb liegt der Wert aktuell um gemittelte 10 Prozent unter denen des Vorjahres. Dabei entwickelt sich besonders die Inanspruchnahme im mobilen Web überproportional rückläufig.

Da Bildkompression immer gängiger und besser wird, sowie in Designs generell stärker auf weniger, aber aussagekräftigere Bilder gesetzt wird, liegt es nahe, das Gewichtswachstum der steigenden Verwendung von Video in die Schuhe zu schieben. So bestätigt das HTTP Archive denn auch, dass das durchschnittliche Video-Gewicht innerhalb der letzten zwei Jahre von 204Kb auf 729Kb gestiegen ist.

Optimierung bedeutet heutzutage nicht mehr nur die Optmierung von Code, Requests und Bildern, sondern auch und insbesondere die Optimierung von Videos. Web-Entwicklerin Estelle Weyl hat daher ein paar Tipps bereitgestellt, die helfen können, deine Website einer bilanzierten Diät zuzuführen.

Verzicht ist die beste Optimierung

Für mich muss es kein Hero-Video geben. Ich kann mir auch kaum Anwendungsfälle vorstellen, in denen das zwingend anders wäre. Generell bin ich bei Video sehr skeptisch, denn vielfach wird das Medium nur benutzt, weil es gerade in ist. Zu häufig muss ich feststellen, dass in Videos meist nicht mehr vermittelt wird, als im begleitenden Text schon dargestellt war. Schlimmer noch, vielfach werden Videos im Stile des alten Schreckgespents Powerpoint nur verwendet, um Textinhalte bewegter darstellen zu können. Mit einem Wort: Nutzlos.

Lass also im Zweifel das Video doch einfach weg.
Estelle Weyl schlägt vor, bei Hero-Videos wenigstens dafür zu sorgen, dass diese nicht auf kleinen Bildschirmen geladen werden. Das lässt sich leicht über einen Breakpoint realisieren und kann dann so aussehen:

@media screen and (max-width: 650px) {
  #hero-video {
      display: none;
   }
}

Nur optimierte Videos dürfen ins Web

Es verhält sich analog zu Bildern. Auch hier lässt du nicht deine unkomprimierte Kameraaufnahme auf deine Netzbesucher los. Mit Blick auf deine Videos ist es noch weit wichtiger, das nicht zu tun, denn diese sind um ein Vielfaches größer.

Es gilt also, Videos stets zu komprimieren. Dafür steht dir mit FFmpeg ein flexibles Werkzeug zur Verfügung, das auch Entwickler-Tools an Bord hat und es dir erlaubt, so ziemlich jedes Format in jedes andere zu konvertieren, dabei zu komprimieren, Tonspuren zu ersetzen oder zu entnehmen und vieles mehr.

Das von dir zur Videoproduktion eingesetzte Tool sollte allerdings selbst schon in der Lage sein, die größten Bandbreitenkatastrophen zu verhindern. Zur Optimierung gehört ebenso die Speicherung in diversen Formaten. Immerhin weisen manche Formate, etwa WebM, weitaus kleinere Dateigrößen auf als andere bei gleicher Qualität. Leider versteht nicht jeder Browser jedes Format.

Wenn du deine Videos dann komprimiert und in verschiedenen Formaten gespeichert hast, solltest du darauf achten, in welcher Reihenfolge du sie in den Source Code deiner Website einträgst. Da HTML von oben nach unten abgearbeitet wird, empfiehlt Estelle Weyl das jeweils leichteste Format, respektive die kleinste Datei stets an erste Stelle zu setzen. Der Benutzerbrowser stellt nämlich stets das erste Video dar, dass er interpretieren kann. Könnte er nun das leichtere, während er aber auch das schwerere kann, und käme das schwerere nun aber in der Reihenfolge vor dem leichteren – du weißt, was passiert.

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
  <!-- Ogg/Theora: 13 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>

Wie bei der Bildoptimierung gilt auch hier: Übertreib es nicht. Wenn von deinem Video qualitativ nichts mehr übrig bleibt, lass es lieber gleich ganz weg.

Setzt du ein Video nur als Hero ein, wirst du vermutlich nicht wollen, dass dessen Audiospur abgespielt wird. Sicherlich kannst du das mit einem einfachen Parameter verhindern:

<video autoplay="" loop="" muted="true" id="hero-video">
  <source src="banner_video.webm"
          type='video/webm; codecs="vp8, vorbis"'>
  <source src="web_banner.mp4" type="video/mp4">
</video>

Die Audiospur ist aber immer noch im Video vorhanden, wird geladen und verschwendet Bandbreite. Deshalb solltest du die Audiospur vor der Verwendung als Hero gleich ganz entfernen. Dazu dient wiederum FFmpeg oder dein favorisierter Video-Editor.

[via Standardista]

(Letztes Update: 23.08.2018)