Videos bremsen die Website aus: so bleibt sie schnell

Ein Video ist der größte Brocken, den eine Website ausliefern kann. Während Texte und Bilder in Kilobyte gerechnet werden, geht es hier um Megabyte, und die verteilen sich auch noch über die gesamte Wiedergabedauer. Wer das nicht steuert, hat eine Startseite, die auf dem Bürorechner gut aussieht und im Mobilfunknetz zur Geduldsprobe wird. Die gute Nachricht: Die wirksamsten Maßnahmen sind einfach und dauern zusammen keinen halben Tag.

Warum Videos die Ladezeit so stark belasten

Beim Aufruf einer Seite lädt der Browser alles, was er für die Darstellung braucht, möglichst gleichzeitig. Steht ein Video im Quelltext, beginnt er je nach Einstellung sofort damit, die Datei oder zumindest deren Anfang zu holen. Diese Daten konkurrieren mit allem anderen um dieselbe Leitung, also mit Schriften, Bildern und Skripten, die für den ersten Eindruck wichtiger sind.

Dazu kommt bei eingebetteten Videos fremder Plattformen ein zweiter Effekt: Der Rahmen bringt nicht nur das Video mit, sondern auch die Oberfläche des Players, deren Skripte und Stile. Das sind oft mehrere hundert Kilobyte an zusätzlichem Code, bevor ein einziges Bild des Films zu sehen ist.

Spürbar wird das nicht am Bürorechner im WLAN, sondern auf dem Mobiltelefon unterwegs. Genau dort landet ein erheblicher Teil der Besucher, und dort entscheidet sich, ob jemand wartet oder zurückgeht.

Vorschaubild statt automatischer Wiedergabe

Die wirksamste Einzelmaßnahme ist ein Vorschaubild, in der Fachsprache Poster genannt. Statt das Video zu laden, zeigt die Seite zunächst ein Standbild mit einem Abspielknopf. Das Bild ist ein paar Dutzend Kilobyte groß, es erscheint sofort, und der Platz im Layout ist von Anfang an reserviert, sodass beim Nachladen nichts mehr springt.

Wählen Sie als Vorschaubild kein zufälliges Einzelbild, sondern eines, das die Aussage des Videos trägt: ein Gesicht, ein fertiges Werkstück, eine erkennbare Szene. Das Bild ist der eigentliche Grund, warum jemand auf den Knopf drückt, und es verdient dieselbe Sorgfalt wie das Titelbild eines Beitrags.

Automatische Wiedergabe kostet dagegen doppelt: Sie lädt Daten, die viele Besucher nie sehen wollen, und sie überrascht Menschen, die gerade lesen. Wenn Sie überhaupt automatisch abspielen, dann ohne Ton, kurz und nur dort, wo die Bewegung wirklich etwas erklärt.

Erst auf Klick laden

Der zweite Schritt folgt aus dem ersten: Wenn ohnehin ein Vorschaubild steht, muss das Video erst bei Bedarf geholt werden. Technisch heißt das, den Rahmen oder die Videodatei erst dann in die Seite zu schreiben, wenn jemand auf den Abspielknopf drückt. Bis dahin besteht das Video aus einem Bild und ein paar Zeilen Code.

Dasselbe Prinzip gilt für Videos weiter unten auf langen Seiten. Was erst nach zwei Bildschirmhöhen kommt, muss nicht beim Seitenaufruf geladen werden. Viele Player bringen diese Verzögerung mit, sonst genügt eine kleine Beobachtung des Sichtbereichs im Browser.

Nebenbei löst dieser Schritt einen zweiten Punkt: Solange nichts nachgeladen wird, entsteht auch keine Verbindung zu einem fremden Server. Warum das wichtig ist, steht in Video einbetten ohne Cookie-Banner.

Dateigröße, Datenrate, Format und Auflösung

Die Dateigröße allein sagt wenig, entscheidend ist die Datenrate, also wie viele Daten je Sekunde Film anfallen. Sie bestimmt, ob eine Verbindung mitkommt. Ein längeres Video mit niedriger Datenrate startet zuverlässiger als ein kurzes mit sehr hoher, auch wenn die Gesamtdatei größer ist.

Für Websites hat sich eine einfache Reihenfolge bewährt: erst die Auflösung auf das begrenzen, was die Anzeigefläche wirklich braucht, dann die Datenrate senken, bis die Qualität sichtbar leidet, und erst danach über modernere Formate nachdenken. Ein Video, das in einer Spalte von etwa 800 Pixeln Breite läuft, braucht keine 4K-Quelle. Die Einzelheiten stehen in Video komprimieren für das Web.

Wenn ein Dienst die Komprimierung nach dem Hochladen selbst übernimmt, nimmt Ihnen das diese Arbeit ab. Bei auvimix passiert das serverseitig, Sie laden die Originaldatei hoch und bekommen eine webtaugliche Fassung zurück.

• Auflösung an die tatsächliche Anzeigefläche anpassen, nicht an die Kamera
• Datenrate schrittweise senken und nach jedem Schritt prüfen
• Tonspur nicht vergessen, sie ist oft unnötig hoch eingestellt
• Eine Fassung für Mobilgeräte anbieten, wenn das Video zentral ist
• Sehr lange Filme in Kapitel oder mehrere Videos aufteilen

Kein Hintergrundvideo in Endlosschleife

Ein stumm laufendes Video hinter der Überschrift der Startseite wirkt im Entwurf beeindruckend und im Alltag teuer. Es lädt bei jedem Seitenaufruf, läuft weiter, während niemand hinsieht, verbraucht auf Mobilgeräten Datenvolumen und Akku und erschwert das Lesen der Schrift darüber.

Wenn Sie Bewegung im Kopfbereich wollen, halten Sie den Clip kurz, lassen Sie ihn einmal laufen und dann auf einem ruhigen Bild stehen bleiben. Eine Endlosschleife zieht die Aufmerksamkeit dauerhaft von dem weg, was daneben steht, und das ist meist Ihr wichtigster Satz.

Die sparsamere Variante ist oft ein sehr gutes Standbild mit einem klaren Abspielknopf daneben. Wer das Video sehen will, startet es, und alle anderen bekommen eine Seite, die sofort da ist.

Was Sie nach dem Einbauen messen

Messen Sie nicht im Büro und nicht direkt nach dem Hochladen, sondern mit einer Verbindung, die gedrosselt ist, und mit geleertem Zwischenspeicher. Die Entwicklerwerkzeuge jedes Browsers können beides. Interessant sind drei Werte: wie lange es bis zum ersten sichtbaren Inhalt dauert, wie viele Daten insgesamt übertragen werden und ob das Layout beim Nachladen springt.

Vergleichen Sie die Seite mit Video und ohne Video. Wenn der Unterschied beim ersten sichtbaren Inhalt gering ist, haben Sie alles richtig gemacht, denn dann wartet das Video, bis es gebraucht wird. Wiederholen Sie die Messung nach jeder Änderung an der Seite, denn ein nachträglich eingebautes Skript kann die Wirkung wieder zunichtemachen.