Ladezeit, Interaktivität, visuelle Stabilität – klingt nach trockenem Technik-Stoff. Sind es auch. Aber hinter diesen drei Begriffen stecken Googles Core Web Vitals: die Metriken, mit denen die Suchmaschine seit 2021 offiziell bewertet, wie gut sich deine Website für echte Nutzer anfühlt.

Und das hat direkte Konsequenzen für dein Ranking. Wer hier schlecht abschneidet, verliert Positionen – an Wettbewerber, die technisch sauberer aufgestellt sind. Dieser Artikel erklärt, was die drei Metriken bedeuten, welche Werte Google erwartet und wie du gezielt verbesserst.

Was sind Core Web Vitals?

Core Web Vitals sind drei spezifische Messwerte, die Google nutzt, um die Nutzererfahrung einer Seite zu quantifizieren. Sie sind Teil des sogenannten Page Experience-Signals – einem Bündel aus technischen Faktoren, das Google in den Ranking-Algorithmus einfließen lässt.

Die drei Metriken messen jeweils einen anderen Aspekt der Nutzererfahrung:

  • LCP – wie schnell der Hauptinhalt lädt
  • INP – wie schnell die Seite auf Eingaben reagiert
  • CLS – wie stabil das Layout während des Ladevorgangs bleibt

Jede Metrik hat einen Zielwert, einen Warnbereich und einen Gefahrenbereich. Google unterscheidet dabei drei Ampelfarben: Grün (gut), Gelb (verbesserungsbedürftig), Rot (schlecht).

LCP – Largest Contentful Paint: Wie schnell lädt das Wichtigste?

Der LCP misst, wann das größte sichtbare Element einer Seite vollständig geladen ist. Das kann ein Bild, ein Video-Poster oder ein großer Textblock sein – was auch immer im Sichtbereich des Nutzers am meisten Platz einnimmt.

Zielwert: unter 2,5 Sekunden. Zwischen 2,5 und 4,0 Sekunden liegt der Warnbereich. Alles darüber gilt als schlecht.

Was den LCP am häufigsten verschlechtert:

  • Nicht optimierte Bilder – zu groß, falsches Format (JPEG statt WebP), kein loading="lazy"
  • Langsame Serverantwortzeiten – billiges Hosting rächt sich hier direkt
  • Render-blockierende Ressourcen – CSS oder JavaScript, das das Laden des sichtbaren Bereichs verzögert
  • Keine Preload-Hinweise für kritische Bilder im <head>
Schneller Fix

Binde dein Hauptbild (Hero-Bild) mit <link rel="preload" as="image" href="hero.webp"> im <head> ein. Das sagt dem Browser: „Lade dieses Bild sofort, bevor alles andere." Kombiniert mit dem richtigen Bildformat (WebP statt PNG/JPEG) lässt sich der LCP oft um 1–2 Sekunden verbessern.

INP – Interaction to Next Paint: Reagiert deine Seite schnell genug?

INP steht für Interaction to Next Paint und hat 2024 den älteren FID-Wert (First Input Delay) abgelöst. Er misst die Verzögerung zwischen einer Nutzeraktion – Klick, Tipp, Tastendruck – und dem Moment, in dem der Browser die Antwort sichtbar darstellt.

Zielwert: unter 200 Millisekunden. Zwischen 200 und 500 ms liegt der Warnbereich. Über 500 ms gilt als schlecht.

Was den INP verschlechtert:

  • Zu viel JavaScript, das den Haupt-Thread blockiert
  • Schwere Drittanbieter-Skripte (Chat-Widgets, Tracking-Pixel, Social-Media-Buttons)
  • Animationen, die CPU-intensiv berechnet werden statt auf der GPU zu laufen

Für die meisten statischen Websites – wie die, die ich baue – ist INP selten ein Problem. Das Risiko liegt bei JavaScript-lastigem Code und eingebetteten Drittanbieter-Tools.

CLS – Cumulative Layout Shift: Springt deine Seite beim Laden?

CLS misst die visuelle Stabilität einer Seite. Genauer: wie sehr sich Elemente während des Ladevorgangs verschieben. Wenn du eine Seite aufrufst und plötzlich ein Button woanders sitzt, weil ein Bild ohne feste Größe nachlädt – das ist ein CLS-Problem.

Zielwert: unter 0,1. Zwischen 0,1 und 0,25 liegt der Warnbereich. Alles darüber gilt als schlecht.

Die häufigsten Ursachen:

  • Bilder ohne definierte Breite und Höhe im HTML (width und height Attribute fehlen)
  • Schriften, die erst spät laden und den Text neu umbrechen (FOUT – Flash of Unstyled Text)
  • Dynamisch eingefügte Inhalte (Werbebanner, Cookie-Bannern ohne reservierten Platz)
  • Animationen, die andere Elemente verschieben
Einfache Lösung

Gib jedem <img>-Tag immer width und height Attribute mit – auch wenn du die Größe per CSS steuerst. Der Browser kann dann den Platz reservieren, bevor das Bild lädt, und verschiebt nichts mehr. Diese eine Maßnahme löst den Großteil aller CLS-Probleme.

Wie du deine Website jetzt testen kannst

Die gute Nachricht: Du brauchst keine teuren Tools. Diese kostenlosen Werkzeuge zeigen dir genau, wo du stehst – und bilden zusammen mit den SEO-Grundlagen die Basis einer technisch soliden Website:

  • PageSpeed Insights (pagespeed.web.dev): Das offizielle Google-Tool. Es zeigt alle drei Core Web Vitals sowohl als Labor-Messung als auch als echte Felddaten (falls vorhanden). Starte hier.
  • Google Search Console: Unter „Core Web Vitals" siehst du, wie deine Seiten im echten Nutzerverkehr abschneiden – aufgeteilt in Mobile und Desktop. Du bekommst auch Hinweise, welche Seiten problematisch sind.
  • web.dev/measure: Detailliertere Analyse mit Erklärungen und konkreten Verbesserungsvorschlägen, direkt aus der Chrome-Entwicklungsumgebung.
  • Chrome DevTools: Im Lighthouse-Tab kannst du direkt im Browser testen – hilfreich während der Entwicklung, bevor eine Seite live geht.

Wichtig: Teste immer auf Mobile und Desktop separat. Google indexiert primär die Mobile-Version deiner Seite. Wenn deine Mobilansicht schlechte Werte liefert, schadet das deinem Ranking – unabhängig davon, wie schnell die Desktop-Version ist.

Die häufigsten Probleme und wie du sie behebst

In der Praxis sehe ich bei Website-Audits immer wieder dieselben Fehler. Hier die häufigsten – und wie du sie löst:

  1. Bilder im falschen Format: Wandle PNG und JPEG in WebP um. Moderne Browser unterstützen WebP, und die Dateigröße sinkt oft um 30–50 % bei gleicher Qualität. Tool: squoosh.app (kostenlos, im Browser).
  2. Kein Lazy Loading für Bilder unterhalb des Sichtbereichs: Füge loading="lazy" zu allen Bildern hinzu, die nicht sofort sichtbar sind. Das verzögert deren Ladevorgang, bis der Nutzer hinscrollt.
  3. Nicht optimierte Schriften: Binde Webfonts mit font-display: swap ein und preloade die WOFF2-Datei im <head>. So verhindert du sowohl lange Wartezeiten als auch Layout-Verschiebungen durch spät ladende Schriften.
  4. Zu viele ungenutzte JavaScript-Dateien: Jede JS-Datei, die geladen wird, blockiert potenziell den Browser. Prüfe, welche Skripte du wirklich brauchst – und entferne alles, was du nicht aktiv nutzt.
  5. Kein Browser-Caching: Statische Ressourcen (CSS, JS, Bilder) sollten mit langen Cache-Zeiten ausgeliefert werden. Beim ersten Besuch lädt der Browser sie, beim zweiten Besuch liegen sie bereits lokal vor.

Du musst nicht alle Punkte auf einmal angehen. Fang mit dem an, was PageSpeed Insights als dringlichstes Problem markiert. Häufig steckt 80 % des Gewinns in 20 % der Maßnahmen – meist sind es die Bilder.

Fazit: Kleine technische Maßnahmen, große Wirkung

Core Web Vitals klingen technisch – aber die wichtigsten Verbesserungen sind in der Praxis einfach und schnell umsetzbar: Bilder komprimieren, Dimensionen angeben, kritische Ressourcen vorladen. Das allein löst die häufigsten Probleme.

Wenn du wissen möchtest, wie deine Website bei LCP, INP und CLS abschneidet und wo konkret die größten Stellschrauben liegen: Im kostenlosen Website-Check schaue ich mir das für dich an.

Häufige Fragen

Wie kann ich meine Core Web Vitals kostenlos testen?
Das offizielle Google-Tool PageSpeed Insights (pagespeed.web.dev) ist kostenlos und zeigt alle drei Core Web Vitals sowohl für Mobile als auch Desktop. Es liefert außerdem konkrete Hinweise, was verbessert werden kann. Starte dort – das reicht für den Anfang vollständig aus.
Wie stark beeinflussen Core Web Vitals das Google-Ranking?
Core Web Vitals sind offiziell Teil des Page Experience-Signals in Googles Ranking-Algorithmus. Sie sind kein Hauptfaktor wie Relevanz und Backlinks, aber ein messbarer Tiebreaker: Bei inhaltlich gleichwertigen Seiten gewinnt die technisch bessere. Zudem verbessern gute Werte direkt die Absprungrate – was das Ranking indirekt weiter stärkt.
Welche Core Web Vital ist am wichtigsten?
LCP (Largest Contentful Paint) hat den stärksten direkten Einfluss auf die wahrgenommene Ladegeschwindigkeit und ist gleichzeitig am einfachsten zu verbessern. In der Praxis steckt bei den meisten Websites der größte Gewinn in der LCP-Optimierung – meistens durch Bildkomprimierung und Preloading des Hero-Bildes.
Patrick Schmidt – Webdesigner aus Erfurt

Autor

Patrick Schmidt

Webdesigner aus Erfurt.