Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 27. August 2018

Performance: Einfache Tipps zur Video-Optimierung auf Websites

Video auf Websites ist inzwi­schen ein gän­gi­ges Element, das viel­fach sogar zu rei­nen Design-Zwecken ein­ge­setzt wird. Und es ist ein Faktor, den du aus Performance-Gründen drin­gend opti­mie­ren soll­test.

Zuviel Eye Candy: Wenn die Website immer dicker wird

Wir beschwe­ren uns über Ladezeiten. Besucher ver­schwin­den nach weni­gen Sekunden ohne Bildaufbau auf Nimmerwiedersehen. Wir dis­ku­tie­ren, wie wir noch das letz­te Quäntchen Luft aus unse­rem Bildmaterial pres­sen kön­nen. Und dann gehen wir her und bau­en ein Video in den Header-Bereich unse­rer Website oder gleich als voll­flä­chi­gen Hintergrund ein. Hero-Video ist einer der neus­ten Schreie im Design-Panoptikum.

Aber nicht nur als weit­ge­hend nutz­lo­ses Hintergrund-Element ver­schwen­den Videos Bandbreite. Auch bei Tutorials oder Image-Filmchen lohnt es sich, ein paar Tipps zu beher­zi­gen, um den Anstieg der Ladezeit dei­ner Website wenigs­tens im Zaume zu hal­ten. Denn, dass die durch­schnitt­li­che Site immer schwe­rer wird, ist ja kein Geheimnis. Laut HTTPArchive liegt deren Gewicht inzwi­schen bei 3.061kb, wäh­rend der Wert noch vor einem Jahr bei einem guten hal­ben Megabyte nied­ri­ger lag. Ein wei­te­res Jahr zuvor lag er um noch­mal ein hal­bes MB nied­ri­ger. Seit Mitte 2018 scheint sich der Trend indes umzu­keh­ren. Mit einer Transfer Size von um die 2.800kb liegt der Wert aktu­ell um gemit­tel­te 10 Prozent unter denen des Vorjahres. Dabei ent­wi­ckelt sich beson­ders die Inanspruchnahme im mobi­len Web über­pro­por­tio­nal rück­läu­fig.

Quelle: HTTParchive

Da Bildkompression immer gän­gi­ger und bes­ser wird, sowie in Designs gene­rell stär­ker auf weni­ger, aber aus­sa­ge­kräf­ti­ge­re Bilder gesetzt wird, liegt es nahe, das Gewichtswachstum der stei­gen­den Verwendung von Video in die Schuhe zu schie­ben. So bestä­tigt das HTTP Archive denn auch, dass das durch­schnitt­li­che Video-Gewicht inner­halb der letz­ten zwei Jahre von 204Kb auf 729Kb gestie­gen ist.

Optimierung bedeu­tet heut­zu­ta­ge nicht mehr nur die Optmierung von Code, Requests und Bildern, son­dern auch und ins­be­son­de­re die Optimierung von Videos. Web-Entwicklerin Estelle Weyl hat daher ein paar Tipps bereit­ge­stellt, die hel­fen kön­nen, dei­ne Website einer bilan­zier­ten Diät zuzu­füh­ren.

Verzicht ist die beste Optimierung

Für mich muss es kein Hero-Video geben. Ich kann mir auch kaum Anwendungsfälle vor­stel­len, in denen das zwin­gend anders wäre. Generell bin ich bei Video sehr skep­tisch, denn viel­fach wird das Medium nur benutzt, weil es gera­de in ist. Zu häu­fig muss ich fest­stel­len, dass in Videos meist nicht mehr ver­mit­telt wird, als im beglei­ten­den Text schon dar­ge­stellt war. Schlimmer noch, viel­fach wer­den Videos im Stile des alten Schreckgespents Powerpoint nur ver­wen­det, um Textinhalte beweg­ter dar­stel­len zu kön­nen. Mit einem Wort: Nutzlos.

Lass also im Zweifel das Video doch ein­fach weg.

Estelle Weyl schlägt vor, bei Hero-Videos wenigs­tens dafür zu sor­gen, dass die­se nicht auf klei­nen Bildschirmen gela­den wer­den. Das lässt sich leicht über einen Breakpoint rea­li­sie­ren und kann dann so aus­se­hen:

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

Nur optimierte Videos dürfen ins Web

Es ver­hält sich ana­log zu Bildern. Auch hier lässt du nicht dei­ne unkom­pri­mier­te Kameraaufnahme auf dei­ne Netzbesucher los. Mit Blick auf dei­ne Videos ist es noch weit wich­ti­ger, das nicht zu tun, denn die­se sind um ein Vielfaches grö­ßer.

So soll­test du Videos auf Websites nie defi­nie­ren. (Foto: Pixabay)

Es gilt also, Videos stets zu kom­pri­mie­ren. Dafür steht dir mit FFmpeg ein fle­xi­bles Werkzeug zur Verfügung, das auch Entwickler-Tools an Bord hat und es dir erlaubt, so ziem­lich jedes Format in jedes ande­re zu kon­ver­tie­ren, dabei zu kom­pri­mie­ren, Tonspuren zu erset­zen oder zu ent­neh­men und vie­les mehr.

Das von dir zur Videoproduktion ein­ge­setz­te Tool soll­te aller­dings selbst schon in der Lage sein, die größ­ten Bandbreitenkatastrophen zu ver­hin­dern. Zur Optimierung gehört eben­so die Speicherung in diver­sen Formaten. Immerhin wei­sen man­che Formate, etwa WebM, weit­aus klei­ne­re Dateigrößen auf als ande­re bei glei­cher Qualität. Leider ver­steht nicht jeder Browser jedes Format.

Wenn du dei­ne Videos dann kom­pri­miert und in ver­schie­de­nen Formaten gespei­chert hast, soll­test du dar­auf ach­ten, in wel­cher Reihenfolge du sie in den Source Code dei­ner Website ein­trägst. Da HTML von oben nach unten abge­ar­bei­tet wird, emp­fiehlt Estelle Weyl das jeweils leich­tes­te Format, respek­ti­ve die kleins­te Datei stets an ers­te Stelle zu set­zen. Der Benutzerbrowser stellt näm­lich stets das ers­te Video dar, dass er inter­pre­tie­ren kann. Könnte er nun das leich­te­re, wäh­rend er aber auch das schwe­re­re kann, und käme das schwe­re­re nun aber in der Reihenfolge vor dem leich­te­ren – du weißt, was pas­siert.

<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 dei­nem Video qua­li­ta­tiv nichts mehr übrig bleibt, lass es lie­ber gleich ganz weg.

Coverrs bie­tet kos­ten­lo­se Videos, falls du es doch nicht las­sen kannst. (Screenshot: Dr. Web)

Setzt du ein Video nur als Hero ein, wirst du ver­mut­lich nicht wol­len, dass des­sen Audiospur abge­spielt wird. Sicherlich kannst du das mit einem ein­fa­chen Parameter ver­hin­dern:

<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 vor­han­den, wird gela­den und ver­schwen­det Bandbreite. Deshalb soll­test du die Audiospur vor der Verwendung als Hero gleich ganz ent­fer­nen. Dazu dient wie­der­um FFmpeg oder dein favo­ri­sier­ter Video-Editor.

[via Standardista]

(Letztes Update: 23.08.2018)

 

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

10 Kommentare

  1. Vielen Dank für den inter­es­san­ten Artikel. Wenn man Videos ein­bin­det, soll­te man eini­ge Dinge beach­ten. Macht man dabei Fehler, kann das die Ladezeiten der Webseite erheb­lich beein­träch­ti­gen.
    Beste Grüße,
    Jakob

  2. display:none ver­hin­dert nur die Anzeige, aber nicht das Laden der so ver­steck­ten Inhalte!
    Diese CSS- Anweisung ist also abso­lut unge­eig­net, um Datenvolumen bei mobi­ler Nutzung zu redu­zie­ren.
    Der im Beitrag emp­foh­le­ne Code wird zumin­dest ein im video-tag ent­hal­te­nes pos­ter laden, ohne es anzu­zei­gen. Eine völ­lig unnö­ti­ge, um nicht zu sagen unsin­ni­ge Belastung des Datenvolumens.

    • Und wenn du den Beitrag gele­sen hät­test, wüss­test du, dass genau das so im Beitrag steht. Der Code wird mit­nich­ten emp­foh­len.

      • Sorry, aber ich lese das auch so. „Das lässt sich leicht über einen Breakpoint rea­li­sie­ren und kann dann so aus­se­hen: …“ Danach kommt kein Hinweis dar­auf, dass man das viel­leicht so nicht machen soll­te.

      • Ihr täuscht euch bei­de und ver­wech­selt das mit visi­bi­li­ty. So ist es:

        dis­play: none makes the HTML engi­ne to com­ple­te­ly igno­re the ele­ment and its child­ren. The engi­ne will not igno­re ele­ments mar­ked with visi­bi­li­ty: hid­den, it will do all the cal­cu­la­ti­ons to the ele­ment and its child­ren, the excep­ti­on is that the ele­ment will not be ren­de­red on the view­port.

      • Hallo Dieter,
        dass du das auch falsch siehst, erschüt­tert mich.
        „dis­play: none makes the HTML engi­ne to com­ple­te­ly igno­re the ele­ment“
        Die HTML engi­ne kann nur igno­rie­ren, was vor­her vom Server gela­den wur­de. Und damit wur­de Datenvolumen unsin­ni­ger­wei­se ver­schwen­det.
        Leider bist du mit dei­ner Meinung nicht allein. Die Mobilfunkprovider freu­en sich, und mobi­le User ärgern sich.

      • Hallo Dieter,

        dis­ku­tie­ren wir wirk­lich über das glei­che Thema?

        Wenn CSS display:none ein­ge­setzt wird, dann wird das so aus­ge­zeich­ne­te Element auf dem Ausgabegerät nicht ange­zeigt.
        Es wird aber gela­den! Belastet also das Downloadvolumen.
        Testen lässt sich die­se Aussage ganz ein­fach mit den Developer Tools z. B. von Google Chrome. Oder mit exter­nen Diensten wie webpagetest.org.

        Sonderfall video:
        Wenn ein Video-Element mit dem Attribut auto­play ein­ge­bun­den wird, dann läuft es sogar dann, wenn es mit display:none aus­ge­zeich­net ist.
        Ich per­sön­lich hal­te auto­play zwar für gro­ben Unfug, aber zum Beleg mei­ner Aussage eig­net sich der Unfug immer­hin.
        Ähnliches gilt für das Attribut pos­ter: Auch das wird zwar nicht ange­zeigt, wenn es hin­ter display:none ver­steckt ist, aber her­un­ter­ge­la­den.

        Fazit:
        Um Datenvolumen nicht unnö­tig zu spa­ren, ist CSS display:none schlicht unge­eig­net.

        Ich hof­fe, ich konn­te mich ver­ständ­lich aus­drü­cken.

      • Meiner Meinung nach ver­wech­selst du das mit visibility:hidden. Bei display:none erscheint das Element gar nicht erst im DOM und kann somit nicht gela­den wer­den.

    • Meine Antwort bezog sich auf eine ande­re Passage mei­nes Texts. Insofern ist sie falsch. Aber, sie­he Antwort zu Mario.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.