Ratgeber 11. April 2026

Macht Video deine Website langsamer? Die Wahrheit

Erfahre, wie moderne Videowidgets die Ladezeit beeinflussen und wie du mit asynchronem Laden eine schnelle Website behältst.

Macht Video deine Website langsamer? Die Wahrheit

Die wichtigsten Punkte

  • Ein automatisch abgespieltes Hintergrundvideo mit 4 MB bringt deine Core Web Vitals aus dem Takt und lässt Besucher abspringen, bevor sie deine Überschrift sehen.
  • Ein Videobubble-Widget beeinträchtigt deine Core Web Vitals nicht, wenn das Skript asynchron geladen wird.
  • Schreibe drei Sätze: Wer bist du, wobei hilfst du und was soll der Besucher als Nächstes tun?

Macht Video deine Website langsamer? Die Wahrheit

Nur wenn du es falsch lädst.

Datenillustration zu Video und Website-Ladezeit

Ein automatisch abgespieltes Hintergrundvideo mit 4 MB bringt deine Core Web Vitals aus dem Takt und lässt Besucher abspringen, bevor sie deine Überschrift sehen. Aber ein Videobubble-Widget das asynchron geladen wird, fügt beim ersten Seitenaufruf weniger als 50 KB hinzu und lädt die eigentliche Videodatei meist erst, nachdem die Seite interaktiv ist.

Es kommt auf die technische Umsetzung an.

Die meisten Probleme mit der Ladezeit entstehen durch Videos, die das Rendern blockieren. Wenn der Browser im Kopf deines Dokuments auf ein Video-Tag stößt, hält er alles andere an, um die Datei abzurufen. Ein richtig eingerichtetes Widget verwendet die Attribute async und defer. Dadurch malt der Browser die Seite weiter, während das Skript im Hintergrund lädt. Google PageSpeed Insights stuft das als nicht blockierend ein, sodass dein LCP (Largest Contentful Paint) sauber bleibt.

Echte Zahlen sagen mehr als Theorie.

Auf Websites mit schlanken Videowidgets liegt der mittlere Einfluss auf die Ladezeit am Desktop unter 100 Millisekunden und bei einer mobilen 3G-Verbindung ungefähr bei 150 bis 200 ms. Zum Vergleich: Das ist weniger Zeit, als ein Besucher braucht, um den Cursor zu bewegen. Schwere eingebettete Player von Videoplattformen können 2 bis 3 Sekunden hinzufügen. Daher kommt der schlechte Ruf.

Die Größe deiner Videodatei ist wichtiger als das Widget selbst.

Halte Begrüßungsvideos unter 5 MB und verwende moderne Komprimierungsformate wie WebM mit MP4 als Fallback. Viele Teams filmen in 4K und wundern sich dann, warum ihre mobilen Werte einbrechen. 720p mit 24 fps sieht auf einem Smartphone gut aus und lädt in einem Bruchteil der Zeit.

Beeinflusst das Widget wirklich die PageSpeed-Werte?

Ein Videobubble-Widget beeinträchtigt deine Core Web Vitals nicht, wenn das Skript asynchron geladen wird. Die Sorge entsteht oft, weil missverstanden wird, wie moderne Widgets ihre Dateien abrufen.

Prozessillustration zum asynchronen Laden eines Videowidgets

CompleteGreet wird mit den Attributen async und defer geladen. Der Browser rendert deshalb zuerst deine Seite und ruft das Widget-Skript erst danach im Hintergrund ab, ohne den Hauptthread zu blockieren.

Das Ergebnis: In Standardtests gibt es keine Beeinträchtigung von LCP, FID oder CLS.

Die Google-Empfehlungen zu Web Vitals empfehlen genau dieses Lademuster für Skripte von Drittanbietern, damit das Rendern nicht blockiert wird.

Die Größe der Videodatei bereitet Teams oft unnötig Sorgen. Eine typische Begrüßung ist 2 bis 5 MB groß, aber das Widget lädt sie erst, wenn die Seite interaktiv ist. Das anfängliche Skript ist kleiner als 30 KB. Vergleiche das mit einem einzigen unkomprimierten Hero-Bild.

Mobile Werte sind wichtiger als Desktop-Werte. Dasselbe Widget, das am Desktop 95 Punkte erreicht, kann bei einer gedrosselten 4G-Verbindung auf 75 fallen. Teste beides, bevor du veröffentlichst.

Ein kleiner Stolperstein: Manche Plattformen fügen Skripte standardmäßig in den Kopf ein. Verschiebe den CompleteGreet-Code direkt vor das schließende body-Tag. Dadurch pausiert der Parser beim ersten Rendern nicht am Skript.

Infografik zum Vergleich der Ladezeiten mit und ohne CompleteGreet-Videowidget. Sie zeigt, dass asynchrones Laden die Website nicht ausbremst.
#cg-ig-E5 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
position: relative;
overflow: hidden;
}
#cg-ig-E5::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #3D5ACE;
}
#cg-ig-E5 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 8px 0 20px 0;
text-align: center;
line-height: 1.3;
}
#cg-ig-E5 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
text-align: center;
margin-bottom: 24px;
}
#cg-ig-E5 .cg-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
#cg-ig-E5 .cg-scenario {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 16px;
}
#cg-ig-E5 .cg-scenario-label {
font-size: 12px;
font-weight: 600;
color: #4a4a68;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
text-align: center;
}
#cg-ig-E5 .cg-timeline {
display: flex;
flex-direction: column;
gap: 8px;
}
#cg-ig-E5 .cg-timeline-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
#cg-ig-E5 .cg-bar {
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
padding-left: 8px;
font-size: 11px;
font-weight: 600;
color: #ffffff;
}
#cg-ig-E5 .cg-bar-html {
background: #3D5ACE;
width: 40%;
}
#cg-ig-E5 .cg-bar-css {
background: #5a7ae0;
width: 30%;
}
#cg-ig-E5 .cg-bar-js {
background: #7a9af0;
width: 25%;
}
#cg-ig-E5 .cg-bar-widget {
background: #E48333;
width: 20%;
margin-left: auto;
}
#cg-ig-E5 .cg-bar-async {
background: repeating-linear-gradient(45deg, #E48333, #E48333 4px, #f0954a 4px, #f0954a 8px);
width: 20%;
margin-left: auto;
opacity: 0.8;
}
#cg-ig-E5 .cg-time-label {
font-size: 11px;
color: #7a7a96;
min-width: 45px;
}
#cg-ig-E5 .cg-result-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 8px;
padding: 12px 16px;
text-align: center;
margin-top: 12px;
}
#cg-ig-E5 .cg-result-text {
font-size: 13px;
color: #4a4a68;
font-weight: 600;
}
#cg-ig-E5 .cg-result-highlight {
color: #3D5ACE;
}
#cg-ig-E5 .cg-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}
#cg-ig-E5 .cg-feature {
text-align: center;
padding: 12px 8px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #e2e2ea;
}
#cg-ig-E5 .cg-feature-icon {
width: 32px;
height: 32px;
background: #3D5ACE;
border-radius: 50%;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
#cg-ig-E5 .cg-feature-label {
font-size: 12px;
color: #4a4a68;
font-weight: 600;
line-height: 1.3;
}
#cg-ig-E5 .cg-cta {
text-align: center;
margin-top: 16px;
}
#cg-ig-E5 .cg-cta-link {
display: inline-block;
font-size: 14px;
color: #3D5ACE;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: background 0.2s;
}
#cg-ig-E5 .cg-cta-link:hover {
background: rgba(61, 90, 206, 0.08);
}
#cg-ig-E5 .cg-source {
font-size: 11px;
color: #7a7a96;
text-align: center;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-E5 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-E5 {
padding: 16px;
}
#cg-ig-E5 .cg-title {
font-size: 18px;
}
#cg-ig-E5 .cg-comparison {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-features {
grid-template-columns: 1fr;
}
#cg-ig-E5 .cg-bar {
font-size: 10px;
}
}

So lädt CompleteGreet: Keine Beeinträchtigung der Ladezeit

Beim asynchronen Laden wird zuerst deine Seite angezeigt, danach folgt das Videowidget

Ohne Videowidget
0,3 s

HTML

0,6 s

CSS

0,9 s

JS

Seite bereit: 0,9 s

Mit CompleteGreet
0,3 s

HTML

0,6 s

CSS

0,9 s

JS

1,2 s

Widget

Seite bereit: 0,9 s

Asynchrones Laden

⏱️
nicht blockierend

🎯
Skript verzögert laden

Quelle: Best Practices für Web-Performance. Die Attribute async und defer verhindern blockierendes Rendern (MDN Web Docs).

Die vollständige Aufschlüsselung steht in der statischen Übersicht oben.

So richtest du deine erste Videovorstellung in weniger als fünf Minuten ein

Beginne mit dem Skript. Schreibe drei Sätze: Wer bist du, wobei hilfst du und was soll der Besucher als Nächstes tun? Viele Menschen reden zu viel, weil sie den letzten Satz noch nicht geplant haben. Bleib unter 20 Sekunden.

Nimm dich mit dem Smartphone im Hochformat auf. Natürliches Licht vom Fenster schafft mehr Vertrauen als ein Ringlicht. Schau in die Kamera und nicht auf dein eigenes Gesicht im Display. Dieser kleine Unterschied lässt dich wirken, als würdest du Blickkontakt halten.

Lade die Datei hoch und füge den Einbettungscode in den Kopf deiner Website ein. Ein Videobubble-Widget sollte innerhalb weniger Sekunden unten rechts erscheinen. Wenn es nicht angezeigt wird, prüfe, ob dein CMS Skript-Tags im Kopf zulässt. Shopify und WordPress erlauben das standardmäßig.

Der Platz ist wichtiger, als viele Teams denken.

Seiten mit hoher Kaufabsicht erzielen die besten Ergebnisse. Preis-, Kontakt- und Checkout-Seiten erhalten oft die meiste Aufmerksamkeit, weil Besucher dort bereits über eine Entscheidung nachdenken. Startseiten haben meist eine niedrigere Klickrate, aber mehr Besucher insgesamt. Beginne mit einer Seite und nicht gleich mit der ganzen Website.

Miss zwei Zahlen: Wiedergaberate und abgeschlossene Formulare. Die Wiedergaberate zeigt, ob Vorschaubild und Platzierung funktionieren. Die Formularquote zeigt, ob die Botschaft ankommt. Ignoriere die reine Zahl der Aufrufe, sie ist eine Eitelkeitsmetrik. Wenn 10 % der Besucher ein Video abspielen und 40 % davon konvertieren, ist das besser als ein viraler Clip, nach dem niemand handelt.

Die meisten Teams sehen nach ungefähr 500 eindeutigen Besuchern aussagekräftige Daten. Bei einer kleinen Website dauert das meist eine Woche. Überarbeite das Skript, wenn die Wiedergaberate unter 5 % liegt oder Menschen das Video abspielen, aber nicht konvertieren. Kleine Änderungen am ersten Satz bewegen oft mehr als eine aufwendigere Produktion.

Website-Betreiber zögern oft, Videoelemente einzubauen, weil sie langsame Ladezeiten und eine schlechte Nutzererfahrung befürchten.

Die folgenden Daten zeigen genau, wie moderne Videoumsetzungen mit Core Web Vitals und realen Messwerten für die Ladezeit zusammenspielen.

CompleteGreet lädt über asynchron eingefügte und verzögert ausgeführte Skripte. Der Browser rendert die vollständige Seite, bevor er die Ressourcen des Videowidgets abruft. So bleibt das Widget vom kritischen Renderpfad getrennt und beeinflusst weder Largest Contentful Paint noch First Input Delay oder Cumulative Layout Shift.

Die technische Schwelle verstehen

Herkömmliche Videoeinbettungen blockieren beim ersten Laden häufig den Hauptthread und fügen wichtigen Messwerten Hunderte Millisekunden hinzu. Nicht blockierende Umsetzungen fügen Inhalte dagegen erst ein, wenn das Document Object Model interaktiv ist. So bleiben Reaktionszeiten unter 100 Millisekunden möglich.

Die Plattform verarbeitet einen durchschnittlichen Anstieg des Anfragevolumens um 53 Prozent, ohne Serverlast oder Bandbreite über einen einzigen schlanken JavaScript-Aufruf hinaus zu erhöhen. Möglich wird das durch verzögertes Laden: Der eigentliche Videostream wird erst abgerufen, wenn der Besucher mit dem Widget interagiert.

Die Daten bestätigen, dass Videowidgets Websites nicht automatisch langsamer machen, wenn sie nicht blockierend aufgebaut sind. Websites mit verzögertem Laden erreichen dieselben Geschwindigkeitswerte wie die Ausgangsmessung und erfassen dabei deutlich mehr Anfragen.

CompleteGreet kostet im Build-Tarif 2.388 DKK pro Jahr und fügt beim ersten Seitenaufruf null Millisekunden hinzu.

Häufige Fragen

Beeinträchtigt ein Videowidget meine Core Web Vitals?

Ein korrekt eingebundenes Videowidget verschlechtert LCP, FID oder CLS nicht. Die Attribute async und defer lassen den Browser die Seite rendern, während das Video parallel lädt, und verhindern, dass der Parser blockiert. Der Hauptthread bleibt beim ersten Rendern frei. Layoutverschiebungen werden vermieden, weil das Skript erst ausgeführt wird, wenn sich das DOM stabilisiert hat. Tools wie PageSpeed Insights bestätigen, dass diese Werte innerhalb der Google-Grenzen bleiben.

Wie groß ist eine typische Videovorstellung im Vergleich zu einer YouTube-Einbettung?

Eine komprimierte Videovorstellung von 30 Sekunden ist ungefähr 2 bis 5 MB groß. Eine YouTube-Einbettung lädt zusätzliche Skripte, Tracking-Pixel und Player-Dateien. Das bringt 500 KB bis 2 MB an Overhead mit, bevor das Video überhaupt startet. Selbst gehostete Widgets mit optimierten MP4-Dateien und H.264-Codec starten schneller und erzeugen weniger Anfragen an Drittanbieter als Einbettungen per iFrame.

Verlangsamt eine Videobubble meine Website auf Mobilgeräten?

Videobubbles laden auf Mobilgeräten effizient, wenn sie verzögert geladen werden und eine adaptive Bitrate verwenden. Das Skript lädt asynchron und blockiert das erste Rendern nicht. Das Video beginnt erst nach einer Interaktion oder wenn das Widget in den sichtbaren Bereich kommt. Nutzer mit 3G oder 4G erleben ähnlich schnelle Seiten wie Besucher am Desktop.

Hilft Videoinhalt meinem Google-Ranking oder schadet er ihm?

Video kann das Engagement verbessern, wenn es mit Blick auf die Ladezeit umgesetzt wird. Es ist aber kein schneller Weg zu besseren Rankings. Der SEO-Nutzen entsteht durch eine gehaltvollere Seite, bessere Interaktion, klare Videodaten und kurze Ladezeiten. Entscheidend ist, die Dateien zu komprimieren und asynchron zu laden.

Wie prüfe ich am schnellsten, ob mein Videowidget die Ladezeit beeinflusst?

Teste deine URL mit Google PageSpeed Insights oder Lighthouse in den Chrome-Entwicklertools. Achte besonders auf LCP unter 2,5 Sekunden, FID unter 100 Millisekunden und CLS unter 0,1. Die Tools markieren blockierende Ressourcen und zeigen, wie viel die Skripte von Drittanbietern zur Ladezeit beitragen. Teste sowohl mobile als auch Desktop-Verbindungen.

Kann ich mehrere Videowidgets auf einer Seite verwenden, ohne die Leistung zu zerstören?

Mehrere Widgets funktionieren gut, wenn sie einen gemeinsamen Skript-Loader nutzen und verzögert initialisiert werden. Jedes weitere Widget fügt nur die Größe seiner Videodatei hinzu, nicht ein weiteres Skript. Eine Seite mit drei Begrüßungsvideos von jeweils 3 MB lädt das JavaScript einmal und ruft die einzelnen Videos bei Bedarf ab. Für die beste Erfahrung solltest du die gesamte Videomenge unter 15 MB halten.

Warum sinkt mein PageSpeed-Wert, sobald ich überhaupt ein Video hinzufüge?

Der Rückgang entsteht meist durch synchrones Laden oder zu große Dateien, nicht durch Video an sich. Wechsle zu asynchronem Laden, komprimiere Videos auf unter 5 MB und verwende verzögertes Laden, damit Dateien nur bei Bedarf abgerufen werden. Die meisten Geschwindigkeitseinbußen verschwinden, sobald das Laden nicht mehr blockiert.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.