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)
10 Antworten
display:none verhindert nur die Anzeige, aber nicht das Laden der so versteckten Inhalte!
Diese CSS- Anweisung ist also absolut ungeeignet, um Datenvolumen bei mobiler Nutzung zu reduzieren.
Der im Beitrag empfohlene Code wird zumindest ein im video-tag enthaltenes poster laden, ohne es anzuzeigen. Eine völlig unnötige, um nicht zu sagen unsinnige Belastung des Datenvolumens.
Und wenn du den Beitrag gelesen hättest, wüsstest du, dass genau das so im Beitrag steht. Der Code wird mitnichten empfohlen.
Sorry, aber ich lese das auch so. „Das lässt sich leicht über einen Breakpoint realisieren und kann dann so aussehen: …“ Danach kommt kein Hinweis darauf, dass man das vielleicht so nicht machen sollte.
Ihr täuscht euch beide und verwechselt das mit visibility. So ist es:
display: none makes the HTML engine to completely ignore the element and its children. The engine will not ignore elements marked with visibility: hidden, it will do all the calculations to the element and its children, the exception is that the element will not be rendered on the viewport.
Hallo Dieter,
dass du das auch falsch siehst, erschüttert mich.
„display: none makes the HTML engine to completely ignore the element“
Die HTML engine kann nur ignorieren, was vorher vom Server geladen wurde. Und damit wurde Datenvolumen unsinnigerweise verschwendet.
Leider bist du mit deiner Meinung nicht allein. Die Mobilfunkprovider freuen sich, und mobile User ärgern sich.
Dann sieht Google das wohl genauso falsch? https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
Hallo Dieter,
diskutieren wir wirklich über das gleiche Thema?
Wenn CSS display:none eingesetzt wird, dann wird das so ausgezeichnete Element auf dem Ausgabegerät nicht angezeigt.
Es wird aber geladen! Belastet also das Downloadvolumen.
Testen lässt sich diese Aussage ganz einfach mit den Developer Tools z. B. von Google Chrome. Oder mit externen Diensten wie webpagetest.org.
Sonderfall video:
Wenn ein Video-Element mit dem Attribut autoplay eingebunden wird, dann läuft es sogar dann, wenn es mit display:none ausgezeichnet ist.
Ich persönlich halte autoplay zwar für groben Unfug, aber zum Beleg meiner Aussage eignet sich der Unfug immerhin.
Ähnliches gilt für das Attribut poster: Auch das wird zwar nicht angezeigt, wenn es hinter display:none versteckt ist, aber heruntergeladen.
Fazit:
Um Datenvolumen nicht unnötig zu sparen, ist CSS display:none schlicht ungeeignet.
Ich hoffe, ich konnte mich verständlich ausdrücken.
Meiner Meinung nach verwechselst du das mit visibility:hidden. Bei display:none erscheint das Element gar nicht erst im DOM und kann somit nicht geladen werden.
Meine Antwort bezog sich auf eine andere Passage meines Texts. Insofern ist sie falsch. Aber, siehe Antwort zu Mario.
Vielen Dank für den interessanten Artikel. Wenn man Videos einbindet, sollte man einige Dinge beachten. Macht man dabei Fehler, kann das die Ladezeiten der Webseite erheblich beeinträchtigen.
Beste Grüße,
Jakob