Core Web Vitals erklärt – Was sie sind und wie sie dein Google-Ranking beeinflussen

„Deine Website ist zu langsam“, diesen Satz hört man oft, wenn die Google-Rankings einbrechen. Aber was genau bedeutet das? Und was kann man dagegen tun?

Core Web Vitals sind die Antwort von Google auf diese Frage. Es sind drei messbare Werte, die beschreiben, wie sich eine Website für den Nutzer anfühlt: beim Laden, beim Interagieren und beim Lesen. Seit 2021 sind sie offizieller Google-Rankingfaktor.

‍

Was sind Core Web Vitals?

Google misst die Nutzererfahrung auf Websites anhand von drei Kernmetriken:

LCP – Largest Contentful Paint

Wann wird das größte sichtbare Element der Seite geladen? Das ist meistens ein Headerbild, ein Hero-Video oder eine große Überschrift. Ein guter LCP-Wert liegt unter 2,5 Sekunden.

INP – Interaction to Next Paint

Wie schnell reagiert die Seite auf eine Nutzereingabe, zum Beispiel einen Klick auf einen Button oder das Öffnen eines Menüs? INP hat 2024 FID abgelöst und ist anspruchsvoller. Ein guter Wert liegt unter 200 Millisekunden.

CLS – Cumulative Layout Shift

Wie stark verschiebt sich das Layout während des Ladevorgangs? Wenn Bilder ohne definierte Größe eingebunden werden und beim Laden Texte verschieben, steigt der CLS-Wert. Ein guter Wert liegt unter 0,1.

‍

Warum Core Web Vitals für SEO wichtig sind

Google hat klar kommuniziert: Seiten mit besseren Core Web Vitals haben einen Ranking-Vorteil gegenüber Seiten mit schlechten Werten, bei sonst vergleichbaren Inhalten. Bei gleichwertigen Inhalten gibt Performance den Ausschlag.

Dazu kommt der direkte Effekt auf die Nutzer: Langsame Seiten haben höhere Absprungraten. Layouts, die beim Laden springen, erzeugen Frustration. Schlechte Performance kostet Vertrauen und Conversions.

Wer seine SEO-Strategie ernst nimmt, sollte Core Web Vitals von Anfang an auf dem Schirm haben. Weitere Optimierungsmaßnahmen für Webflow findest du in meinem Artikel Webflow SEO – 12 Maßnahmen.

‍

Wie du Core Web Vitals misst

Die wichtigsten Tools:

• Google PageSpeed Insights (pagespeed.web.dev): Gibt Laborwerte und wenn genügend Felddaten vorhanden – echte Nutzerdaten. Kostenlos, direkt von Google.
• Google Search Console: Unter „Nutzererfahrung“ zeigt die Search Console, wie deine Seiten für echte Nutzer abschneiden – aufgeteilt nach Mobile und Desktop.
• Lighthouse in Chrome DevTools: Direkt im Browser ausführen (F12 → Lighthouse). Gut für schnelle lokale Tests während der Entwicklung.
• WebPageTest.org: Detailliertere Analysen, verschiedene Teststandorte möglich.

Wichtig: Immer auf Mobile testen, nicht nur auf Desktop. Google verwendet primär Mobile-Daten für das Ranking.

‍

‍

Die häufigsten Probleme und wie du sie in Webflow löst

Problem 01: Zu großes Headerbild → LCP steigt

Das häufigste Problem. Ein unkomprimiertes JPEG mit 4 MB als Hero-Bild lässt den LCP-Wert explodieren.

Lösung in Webflow: Webflow konvertiert hochgeladene Bilder automatisch in WebP. Trotzdem: Bilder vor dem Upload auf maximale Displaybreite skalieren und mit Tools wie TinyPNG oder Squoosh komprimieren. Für Hero-Bilder Lazy Loading deaktivieren und stattdessen das Bild mit hoher Priorität laden lassen. (eager)

Problem 02: Webfonts blockieren den Render → LCP steigt

Externe Fonts (auch Google Fonts) werden vom Browser erst geladen, dann gerendert. Das verzögert sichtbare Inhalte und ist zusätzlich ein DSGVO-Thema.
Lösung: Fonts lokal hosten und mit font-display: swap einbinden. Mehr dazu in meinem Artikel zur DSGVO-konformen Website.

Problem 03: Schwere JavaScript-Blöcke → INP leidet

Drittanbieter-Scripts (Analytics, Chatbots, Consent-Tools) werden oft im Head geladen und blockieren den Main Thread des Browsers. Lösung: Scripts so spät wie möglich laden,. per defer oder async Attribut. In Webflow können Scripts über die Custom Code-Einstellungen im Footer platziert werden statt im Head.

Problem 04: Bilder ohne definierte Dimensionen → CLS steigt

Wenn ein Bild keine feste Breite und Höhe hat, reserviert der Browser keinen Platz dafür. Sobald das Bild lädt, verschiebt sich der Text. Lösung in Webflow: Für alle Bilder im Designer Breite und Höhe definieren. Bei CMS-Bildern feste Aspect Ratios über CSS setzen.

Problem 05: Zu viele Animations-Skripte → INP und LCP

Zu viele oder zu komplexe Interaktionen können die Rendering-Performance verschlechtern, besonders auf mobilen Geräten. Lösung: CSS-Animationen bevorzugen statt JavaScript-basierter Webflow Interactions, wo möglich. Animationen auf schwachen Geräten mit prefers-reduced-motion Media Query reduzieren.

‍

Was ist ein gutes Ergebnis?

Google teilt Ergebnisse in drei Kategorien:

• Gut: LCP unter 2,5s | INP unter 200ms | CLS unter 0,1
• Verbesserungsbedarf: LCP 2,5–4s | INP 200–500ms | CLS 0,1–0,25
• Schlecht: LCP über 4s | INP über 500ms | CLS über 0,25

Ziel ist, alle drei Werte in den grünen Bereich zu bringen, sowohl auf Mobile als auch auf Desktop.

‍

Webflow und Core Web Vitals

Webflow hat strukturell gute Voraussetzungen: sauberer Code ohne Plugin-Overhead, automatisches WebP-Rendering, globales Fastly CDN und HTTPS inklusive. Gut aufgebaute Webflow-Sites erreichen regelmäßig Lighthouse-Scores über 90.

Das bedeutet aber nicht, dass es automatisch passiert. Unkomprimierte Bilder, zu viele Drittanbieter-Scripts und übermäßige Animations-Komplexität können auch auf Webflow zu schlechten Vitals führen. Als Webflow Freelancer achte ich bei jedem Projekt von Anfang an auf Performance.

‍

Fazit

Core Web Vitals sind kein technisches Nischenthema für Entwickler. Sie sind ein direkter Rankingfaktor und ein Qualitätsmerkmal für jede professionelle Website. Die meisten Probleme sind behebbar, mit den richtigen Maßnahmen lassen sich auch Seiten mit schlechten Ausgangswerten deutlich verbessern.

Du willst wissen, wie deine Website bei den Core Web Vitals abschneidet? Ich schaue mir das gerne mit dir an.

→ Kostenlose Analyse anfragen