Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Design » Performance: Einfache Tipps zur Video-Optimierung auf Websites

Performance: Einfache Tipps zur Video-Optimierung auf Websites

Artikel weiterempfehlen

  • Aktualisiert am 27. August 2018
  • 10 Kommentare
  • Dieter Petereit von Dieter Petereit
Lesedauer: 4 Minuten

Inhaltsverzeichnis

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.

chart Performance: Einfache Tipps zur Video-Optimierung auf Websites
Quelle: HTTParchive

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.

popcorn 1433327 1280 Performance: Einfache Tipps zur Video-Optimierung auf Websites
So solltest du Videos auf Websites nie definieren. (Foto: Pixabay)

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.

coverrs Performance: Einfache Tipps zur Video-Optimierung auf Websites
Coverrs bietet kostenlose Videos, falls du es doch nicht lassen kannst. (Screenshot: Dr. Web)

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)

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Lust auf mehr?

  • Michael Dobler Michael Dobler
  • 20. März 2023
The Empire Strikes Back. Further.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.
  • Design
  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign

10 Antworten

  1. Jakob sagt:
    14. August 2017 um 14:24 Uhr

    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

    Antworten
  2. Fritz Weisshart sagt:
    9. August 2017 um 10:15 Uhr

    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.

    Antworten
    1. Dieter Petereit sagt:
      9. August 2017 um 11:55 Uhr

      Und wenn du den Beitrag gelesen hättest, wüsstest du, dass genau das so im Beitrag steht. Der Code wird mitnichten empfohlen.

    2. Mario sagt:
      9. August 2017 um 12:23 Uhr

      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.

    3. Dieter Petereit sagt:
      9. August 2017 um 12:50 Uhr

      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.

    4. Fritz Weisshart sagt:
      9. August 2017 um 12:55 Uhr

      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.

    5. Dieter Petereit sagt:
      9. August 2017 um 13:22 Uhr

      Dann sieht Google das wohl genauso falsch? https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

    6. Fritz Weisshart sagt:
      9. August 2017 um 16:10 Uhr

      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.

    7. Dieter Petereit sagt:
      12. August 2017 um 21:07 Uhr

      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.

    8. Dieter Petereit sagt:
      9. August 2017 um 12:51 Uhr

      Meine Antwort bezog sich auf eine andere Passage meines Texts. Insofern ist sie falsch. Aber, siehe Antwort zu Mario.

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑