So optimieren und komprimieren Sie Videos für Ihre Website

Das Wichtigste in Kürze

• Exportieren Sie MP4 (H.264/AAC) mit 1080p oder weniger und Fast Start; WebM optional zusätzlich.

• Streamen Sie alles, was länger als ein bis zwei Minuten ist, von einer Plattform oder einem CDN.

• Nutzen Sie Poster, preload="metadata" und Lazy Loading unterhalb des sichtbaren Bereichs.

• Reservieren Sie Platz, um Layoutverschiebungen zu vermeiden; laden Sie Player-Skripte nur bei Bedarf.

• Fügen Sie strukturierte VideoObject-Daten hinzu, damit Suchmaschinen Ihre Videos verstehen.

Format und Codec

MP4 mit H.264-Video und AAC-Audio läuft in jedem modernen Browser. WebM (VP9/AV1) ist kleiner; bieten Sie es bei Bedarf als zusätzliche <source> an.

Größe und Bitrate

Vor dem Hochladen komprimieren

Kostenlose Tools wie HandBrake oder ffmpeg können die Dateigröße drastisch senken. Entfernen Sie bei Hintergrundschleifen die Audiospur.

Video per Lazy Loading laden

Nutzen Sie preload="metadata" oder none, ein Poster-Bild und laden Sie Player erst, wenn sie in den sichtbaren Bereich scrollen. Elfsight Video Gallery nutzt standardmäßig Lazy Loading.

Video-Schema hinzufügen

Helfen Sie Suchmaschinen, Ihre Videos zu verstehen, mit strukturierten VideoObject-Daten – erzeugen Sie sie mit unserem Video-Schema-Generator.

Rezepte für webtauglichen Export

# General web MP4: H.264 + AAC, fast start
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k -movflags +faststart out.mp4

# Downscale to 720p
ffmpeg -i input.mp4 -vf "scale=-2:720" -c:v libx264 -crf 24 -c:a copy out-720p.mp4

# Remove audio (for loops)
ffmpeg -i input.mp4 -an -c:v copy silent.mp4

+faststart verschiebt den Index an den Anfang der Datei, sodass die Wiedergabe beginnt, bevor der Download abgeschlossen ist.

Progressiver Download vs. Streaming

Ein einzelnes MP4 wird progressiv heruntergeladen: Der Browser holt eine Datei in einer Qualität. Das ist für Clips unter ein bis zwei Minuten in Ordnung. Längere Videos sollten mit adaptiven Formaten wie HLS gestreamt werden: Das Video wird in kleine Abschnitte in mehreren Qualitätsstufen zerlegt, und der Player wechselt je nach Verbindung des Zuschauers. YouTube, Vimeo und Video-CDNs übernehmen das für Sie.

Video und Core Web Vitals

WordPress-Tipps

• Laden Sie keine langen Videos in die Mediathek hoch – nutzen Sie YouTube, Vimeo oder ein Video-CDN.

• Achten Sie darauf, dass Ihr Lazy-Load-Plugin auch iFrames behandelt.

• Ein Video-Preloader-Plugin brauchen Sie selten; ein Poster und Lazy Loading genügen.

• Prüfen Sie, dass Caching- oder Optimierungs-Plugins die Skripte, die Ihr Videoplayer braucht, nicht verzögern.

Optimierungs-Checkliste

1. 1.

   Richtiges Format

   MP4 (H.264/AAC), optional WebM.

2. 2.

   Richtige Größe

   1080p oder weniger, komprimiert, Fast Start.

3. 3.

   Richtige Auslieferung

   Lange Videos von einer Plattform oder einem CDN streamen.

4. 4.

   Richtiges Laden

   Poster, preload="metadata", Lazy Loading unterhalb des sichtbaren Bereichs.

5. 5.

   Keine Layoutverschiebung

   Platz mit aspect-ratio reservieren.

6. 6.

   Strukturierte Daten

   VideoObject-Markup hinzufügen, damit Suchmaschinen das Video verstehen.