Videos auf der Website: Ladezeit optimieren mit Format, Hosting und Lazy Loading

Kurze Videos machen juristische Leistungen greifbar und stellen die Menschen hinter der Kanzlei vor. Technisch gehören sie jedoch zu den schwersten Elementen einer Seite. Eine einzige ungünstig eingebundene Datei kann den Seitenaufbau spürbar verzögern, und langsame Seiten führen zu mehr Absprüngen und schwächeren Werten in den Core Web Vitals. Da schnelle Ladezeiten ein zentraler Erfolgsfaktor im SEO für Anwälte sind, sollte jeder, der die Ladezeit der Website trotz Videos optimieren möchte, drei Stellschrauben kennen: die Wahl des Hostings, das Dateiformat und die Art, wie der Browser das Video lädt. Dieser Artikel erklärt alle drei Punkte und zeigt, wie Sie das Ergebnis messen.

Warum Videos die Ladezeit belasten

Videodateien sind um ein Vielfaches größer als Bilder oder Texte. Lädt der Browser ein Video schon beim Seitenaufruf vollständig oder teilweise vor, konkurriert es mit allen anderen Ressourcen um Bandbreite. Das verzögert vor allem den Largest Contentful Paint (LCP), also den Zeitpunkt, an dem das größte sichtbare Element erscheint.

Bei eingebetteten Playern externer Plattformen kommt ein zweiter Effekt hinzu. Der Player bringt eigene Skripte, Stylesheets und Verbindungen zu fremden Servern mit, auch wenn der Besucher das Video nie startet. Diese Skripte belasten den Hauptthread des Browsers und können die Reaktionszeit der Seite (Interaction to Next Paint, INP) verschlechtern. Fehlen zudem feste Maße für den Videobereich, verschiebt sich das Layout beim Nachladen, was den Cumulative Layout Shift (CLS) erhöht.

Hosting-Optionen und ihr Einfluss auf die Performance

Wo ein Video liegt, bestimmt maßgeblich, wie schnell und stabil es ausgeliefert wird. Es gibt drei grundlegende Wege mit jeweils eigenen Stärken.

Auf dem eigenen Webserver

Das direkte Hochladen in das Content-Management-System ist der einfachste Weg. Für sehr kurze Clips, etwa ein stummes Hintergrundvideo im Kopfbereich, kann das genügen. Klassische Webspaces sind aber nicht für Streaming ausgelegt. Sie liefern eine feste Datei aus, die sich nicht an die Verbindung des Besuchers anpasst, und bei vielen gleichzeitigen Abrufen steigt die Serverlast. Für längere Videos ist dieser Weg daher selten die beste Wahl.

Spezialisierte Video-Hosting-Dienste

Video-Hosting-Dienste und Content Delivery Networks speichern Ihre Videos auf verteilten Servern und liefern sie per adaptivem Streaming aus, zum Beispiel über HLS. Dabei wählt der Player automatisch eine Qualitätsstufe, die zur aktuellen Verbindung passt. Das hält die Wiedergabe flüssig und entlastet Ihren eigenen Server. Es gibt Anbieter mit Sitz und Rechenzentren in der EU, etwa Bunny.net. Wer volle Kontrolle wünscht, kann mit der Open-Source-Software PeerTube auch eine eigene Videoplattform auf einem Server in Deutschland betreiben.

Videoplattformen wie YouTube oder Vimeo

Große Plattformen übernehmen Transcodierung und Streaming, binden aber einen vergleichsweise schweren Player mit vielen Skripten ein. Für die Ladezeit ist das nur dann unkritisch, wenn der Player erst nach einem Klick geladen wird. Bei externen Plattformen stellt sich zusätzlich die Frage der Einwilligung. Wie Sie solche Videos technisch mit Opt-in einbinden, erklärt unser Beitrag zum Video-Embedding DSGVO-konform in der Kanzlei.

Formate und Komprimierung richtig wählen

Liegt ein Video auf dem eigenen Server oder einem eigenen Speicher, entscheidet die Datei selbst über die Ladezeit. Komprimieren Sie jedes Video vor dem Upload, zum Beispiel mit dem kostenlosen Open-Source-Werkzeug HandBrake. Wählen Sie eine Auflösung, die zur tatsächlichen Anzeigegröße passt. Ein Video, das auf der Seite nur in halber Bildschirmbreite erscheint, braucht keine 4K-Auflösung.

Als Format mit breiter Unterstützung hat sich MP4 mit dem Codec H.264 bewährt. Modernere Codecs wie VP9 in WebM oder AV1 erreichen bei vergleichbarer Qualität meist kleinere Dateien. Über mehrere <source>-Elemente im <video>-Tag können Sie das moderne Format zuerst anbieten und MP4 als Rückfallebene hinterlegen. Der Browser wählt dann die erste Variante, die er abspielen kann.

Bei Hintergrundvideos lohnt es sich, die Tonspur vollständig zu entfernen und die Laufzeit auf wenige Sekunden zu kürzen. Ein kurzer Clip in Schleife ist deutlich leichter als ein langes Video, das einmal durchläuft.

Lazy Loading und Vorschaubilder einsetzen

Der wirksamste Hebel ist, Videos erst dann zu laden, wenn sie gebraucht werden. Für eigene Videos im <video>-Tag setzen Sie dazu das Attribut preload="none" oder preload="metadata". Der Browser lädt dann keine oder nur wenige Daten vor. Mit dem Attribut poster zeigen Sie bis zum Start ein komprimiertes Vorschaubild.

Für eingebettete Player in einem iFrame unterstützen aktuelle Browser das Attribut loading="lazy". Das iFrame wird dann erst angefordert, wenn der Besucher in die Nähe des Videos scrollt. Noch weiter geht das sogenannte Fassaden-Prinzip: Anstelle des Players steht zunächst nur ein lokal gespeichertes Vorschaubild mit Play-Symbol. Erst ein Klick lädt den eigentlichen Player. So belastet ein Video, das niemand startet, die Ladezeit praktisch nicht.

Verzichten Sie im sichtbaren Bereich auf Autoplay mit Ton. Wenn ein Video automatisch starten soll, etwa im Hintergrund, sollte es stumm, kurz und stark komprimiert sein.

Layout stabil halten und Ergebnisse messen

Ein stabiles Layout ohne nachträgliche Verschiebungen ist ein wichtiges Qualitätsmerkmal beim modernen Webdesign für Anwälte. Damit sich die Seite beim Laden des Videos nicht verschiebt, reservieren Sie den Platz im Voraus. Vergeben Sie feste Werte für width und height oder nutzen Sie die CSS-Eigenschaft aspect-ratio, zum Beispiel mit dem Wert 16 / 9. Der Browser hält den Bereich dann frei, bevor das Video geladen ist.

Prüfen Sie jede Änderung mit Messwerkzeugen. Google PageSpeed Insights und Lighthouse in den Entwicklertools des Browsers zeigen LCP, CLS und weitere Kennzahlen sowie konkrete Hinweise zu großen Dateien und blockierenden Skripten. Messen Sie vor und nach der Optimierung, und testen Sie auch die mobile Ansicht, da dort Bandbreite und Rechenleistung oft geringer sind.

Weniger ist oft schneller: Welche Videos sich lohnen

Zur Ladezeitoptimierung gehört auch die Frage, wo ein Video wirklich hilft. Nicht jede Unterseite braucht Bewegtbild. Auf der Startseite genügt meist ein kurzes Einstiegsvideo, auf Leistungsseiten ein knapper Erklärfilm. Untertitel sind sinnvoll, da viele Besucher Videos ohne Ton ansehen. Jedes Video sollte ein klares Ziel haben, etwa einen Ablauf zu erklären oder den Weg zur Kontaktaufnahme zu ebnen. Ein Video weniger auf einer Seite ist oft die einfachste Optimierung.

Häufige Fragen zu Videos und Ladezeit

Warum ruckeln Videos, die direkt auf dem Webserver liegen?

Ein klassischer Webserver liefert eine feste Datei aus und passt die Qualität nicht an die Verbindung des Besuchers an. Video-Hosting-Dienste nutzen dagegen adaptives Streaming und wählen automatisch eine passende Qualitätsstufe.

Welches Videoformat ist für Websites am besten geeignet?

MP4 mit H.264 wird von nahezu allen Browsern unterstützt. Modernere Codecs wie VP9 oder AV1 erzeugen meist kleinere Dateien. Am besten bieten Sie das moderne Format zuerst an und hinterlegen MP4 als Rückfallebene.

Funktioniert loading="lazy" auch für das video-Tag?

Nein, das Attribut loading="lazy" gilt für Bilder und iFrames. Für das video-Tag steuern Sie das Vorladen über das Attribut preload, zum Beispiel mit dem Wert none, und zeigen über das Attribut poster ein Vorschaubild.

Wie verhindere ich, dass Videos das Layout verschieben?

Reservieren Sie den Platz für das Video im Voraus, entweder mit festen Werten für Breite und Höhe oder mit der CSS-Eigenschaft aspect-ratio. Der Browser hält den Bereich dann frei, während das Video lädt.

Mit welchen Werkzeugen messe ich die Auswirkung von Videos auf die Ladezeit?

Google PageSpeed Insights und Lighthouse zeigen Kennzahlen wie LCP und CLS sowie Hinweise auf große Dateien und blockierende Skripte. Messen Sie vor und nach jeder Änderung und prüfen Sie auch die mobile Ansicht.