Core Web Vitals: Warum Google diese Kennzahlen liebt

Google misst die Qualitaet einer Website nicht mehr nur an Inhalten und Backlinks. Seit 2021 fliessen die Core Web Vitals direkt in das Ranking ein - und ihr Einfluss waechst mit jedem Update. Nach dem Dezember-2025-Update hat Google die Gewichtung der Nutzererfahrung weiter verstaerkt. Wer hier schlecht abschneidet, verliert Sichtbarkeit. Wer gut abschneidet, gewinnt Besucher und Umsatz.

Trotzdem bestehen nur 48 Prozent aller mobilen Seiten alle drei Core Web Vitals. Das heisst: Mehr als die Haelfte aller Websites verschenkt Potenzial. In diesem Artikel erklaere ich, was die drei Metriken bedeuten, warum sie fuer dein Geschaeft relevant sind - und wie du sie verbesserst.

LCP - Largest Contentful Paint

Der LCP misst, wie lange es dauert, bis der groesste sichtbare Inhalt im Viewport geladen ist. Das kann ein Hero-Bild, eine grosse Textblock-Ueberschrift oder ein Video-Thumbnail sein. Googles Schwellenwert: unter 2,5 Sekunden ist gut, ueber 4 Sekunden ist schlecht.

Der LCP ist die Metrik, an der die meisten Websites scheitern. Nur 62 Prozent der mobilen Seiten erreichen einen guten Wert. Typische Ursachen:

• Unkomprimierte Bilder - Ein Hero-Bild mit 2 MB statt 200 KB verzoegert den LCP um Sekunden. Moderne Formate wie WebP oder AVIF reduzieren die Dateigroesse um 50 bis 80 Prozent bei gleicher Qualitaet.
• Render-blockierende Ressourcen - CSS und JavaScript, die im Head geladen werden, blockieren das Rendering der gesamten Seite. Kritisches CSS sollte inline stehen, der Rest asynchron laden.
• Langsame Serverantworten - Wenn der Server 800 Millisekunden fuer die erste Antwort braucht (Time to First Byte), kann der LCP nicht unter 2,5 Sekunden liegen. Statische Seiten oder ein CDN loesen dieses Problem.
• Lazy Loading des LCP-Elements - Ein haeufiger Fehler: Das Hero-Bild wird mit loading="lazy" geladen. Das verzoegert genau das Element, das am schnellsten sichtbar sein sollte. Das LCP-Element sollte immer eager laden.

INP - Interaction to Next Paint

INP hat 2024 den First Input Delay (FID) abgeloest und misst etwas Wichtigeres: die tatsaechliche Reaktionsgeschwindigkeit der gesamten Seite. Nicht nur den ersten Klick, sondern jede Interaktion waehrend des gesamten Besuchs. Googles Schwellenwert: unter 200 Millisekunden.

INP erfasst die Zeitspanne vom Moment des Klicks, Taps oder Tastendrucks bis zum naechsten visuellen Update auf dem Bildschirm. 77 Prozent der mobilen Seiten erreichen hier einen guten Wert - deutlich mehr als beim LCP.

Trotzdem gibt es haeufige Stolperfallen:

• Schwere JavaScript-Frameworks - Jedes Kilobyte JavaScript, das im Main Thread laeuft, blockiert die Interaktivitaet. React mit seinem Virtual DOM oder Angular mit Change Detection koennen den INP erheblich verschlechtern.
• Event-Handler ohne Debouncing - Scroll- und Resize-Events, die bei jeder Ausloesung schwere Berechnungen starten, frieren die Seite ein. Debouncing oder requestAnimationFrame schaffen Abhilfe.
• Third-Party-Scripts - Analytics, Chat-Widgets, Tracking-Pixel: Jedes externe Script konkurriert um CPU-Zeit. Lade sie asynchron und priorisiere deine eigene Interaktionslogik.

CLS - Cumulative Layout Shift

CLS misst die visuelle Stabilitaet einer Seite. Jedes Mal, wenn sich ein Element unerwartet verschiebt - weil ein Bild ohne definierte Groesse nachlaedt, eine Werbeanzeige eingeblendet wird oder eine Schrift nachgeladen wird - zaehlt das als Layout Shift. Googles Schwellenwert: unter 0,1.

Du kennst das: Du willst auf einen Button klicken, und im letzten Moment rutscht er nach unten, weil darueber eine Anzeige erscheint. Genau das misst CLS. Die haeufigsten Verursacher:

• Bilder und Videos ohne Dimensionen - Ohne width und height im HTML weiss der Browser nicht, wie viel Platz er reservieren soll. Sobald das Bild laedt, verschiebt sich alles darunter.
• Dynamisch eingefuegte Inhalte - Cookie-Banner, Newsletter-Popups oder nachgeladene Ads, die bestehenden Content verschieben statt ihn zu ueberlagern.
• Web-Font-Rendering - Wenn die Seite erst mit einer Fallback-Schrift rendert und dann zur Custom-Font wechselt, koennen sich Textbloecke verschieben. font-display: swap in Kombination mit passenden Fallback-Metriken verhindert das.

Der Einfluss auf dein Geschaeft

Core Web Vitals sind kein reines SEO-Thema. Sie haben direkten Einfluss auf deinen Umsatz. E-Commerce-Seiten, die alle drei Schwellenwerte einhalten, haben eine um 24 Prozent hoehere Conversion Rate als Seiten, die das nicht schaffen.

Die Rechnung ist simpel: Eine Sekunde laengere Ladezeit kostet dich rund 7 Prozent Conversions. Fuer einen Online-Shop mit 100.000 Euro Monatsumsatz sind das 7.000 Euro - jeden Monat. Umgekehrt hat eine Verbesserung der Ladezeit um nur 0,1 Sekunden eine messbare Umsatzsteigerung zur Folge.

Dazu kommt der indirekte Effekt ueber das Ranking: Bessere Core Web Vitals fuehren zu besseren Positionen in den Suchergebnissen, was zu mehr organischem Traffic fuehrt, was zu mehr Conversions fuehrt. Ein positiver Kreislauf.

So misst du deine Core Web Vitals

Du brauchst kein teures Tool. Google stellt alles kostenlos bereit:

• PageSpeed Insights - Gibt dir Lab-Daten und, falls vorhanden, Feld-Daten aus dem Chrome User Experience Report. Die Feld-Daten zeigen, wie echte Nutzer deine Seite erleben.
• Google Search Console - Der Bericht Core Web Vitals zeigt dir, welche Seiten gut, verbesserungswuerdig oder schlecht abschneiden. Gruppiert nach Problem, damit du gezielt optimieren kannst.
• Chrome DevTools - Der Performance-Tab zeigt dir exakt, was den Main Thread blockiert. Unverzichtbar fuer INP-Debugging.
• Web Vitals Extension - Eine Chrome-Erweiterung, die LCP, INP und CLS in Echtzeit anzeigt, waehrend du die Seite nutzt.

Drei Quick Wins, die sofort wirken

Du musst nicht alles auf einmal umbauen. Diese drei Massnahmen bringen den groessten Effekt mit dem geringsten Aufwand:

• Bilder optimieren - Konvertiere alle Bilder zu WebP, definiere Breite und Hoehe im HTML, und setze loading="eager" fuer das LCP-Element. Das verbessert LCP und CLS gleichzeitig.
• JavaScript aufraumen - Entferne ungenutztes JavaScript, lade Third-Party-Scripts mit async oder defer, und pruefe, ob du wirklich jedes Analytics-Tool brauchst. Das verbessert INP.
• Schriften vorausladen - Nutze link rel="preload" fuer deine Web-Fonts und setze font-display: swap. Das verhindert Layout Shifts durch Schriftwechsel und beschleunigt das Rendering.

Diese drei Schritte allein koennen den Unterschied zwischen "schlecht" und "gut" bei den Core Web Vitals ausmachen. Und sie kosten kein Budget - nur eine Stunde Arbeit.