Core Web Vitals optimierung: LCP, INP und CLS verbessern

Kurzantwort: Core Web Vitals Optimierung bezeichnet die gezielte Verbesserung von drei Leistungsmetriken, die Google zur Bewertung der Nutzererfahrung einsetzt: Largest Contentful Paint (LCP) misst die Ladegeschwindigkeit, Interaction to Next Paint (INP) die Reaktionsfähigkeit auf Nutzerinteraktionen, und Cumulative Layout Shift (CLS) die visuelle Stabilität. Jede Metrik hat messbare Schwellwerte, die in Google PageSpeed Insights und der Google Search Console sichtbar sind.

Core Web Vitals sind konkrete, messbare Indikatoren dafür, wie schnell eine Website lädt, wie reaktionsschnell sie auf Nutzerinteraktionen reagiert, und wie stabil das Layout während des Ladens bleibt. Google berücksichtigt diese Metriken bei der Bewertung von Websites in der Suche. In diesem Artikel zeige ich dir, wie jede Metrik funktioniert, welche Optimierungen messbare Verbesserungen bringen, und wie du deine Fortschritte mit kostenlosen Tools überwachst.

Was sind Core Web Vitals und warum sind sie wichtig?

Die drei Core Web Vitals im Überblick

Google definiert Core Web Vitals als drei Leistungsmetriken, die die Nutzererfahrung direkt messen:

• Largest Contentful Paint (LCP): Misst, wann das größte geeignete Inhaltselement im sichtbaren Bereich gerendert wird. Dies ist der Punkt, an dem die Seite für den Nutzer als „geladen" wirkt.
• Interaction to Next Paint (INP): Misst die Verzögerung zwischen einer Nutzerinteraktion (Klick, Tippen, Tastendruck) und der visuellen Rückmeldung der Seite. Dies ersetzt die frühere Metrik „First Input Delay" (FID).
• Cumulative Layout Shift (CLS): Erfasst die größte Summe unerwarteter Layoutverschiebungen in einem Sitzungsfenster während des gesamten Seitenbesuchs. Ein hoher CLS-Wert bedeutet, dass sich Inhalte unerwartet verschieben, während der Nutzer sie liest oder mit ihnen interagiert.

Warum Google diese Metriken misst

Google nutzt Core Web Vitals als Ranking-Signal, weil sie direkt mit der Nutzererfahrung korrelieren. Eine schnelle, reaktionsschnelle Website mit stabilen Layouts führt zu niedrigeren Absprüngen und höherer Zufriedenheit.

Für Mittelstandsunternehmen, Praxen und SaaS-Teams bedeutet das: Bessere Core Web Vitals können zu mehr Sichtbarkeit in der Suche führen. Wichtiger noch – sie verbessern die tatsächliche Nutzererfahrung deiner Besucher.

Schwellwerte: Grün, Gelb, Rot

Google teilt die Leistung in drei Kategorien ein:

Die Bewertung erfolgt am 75. Perzentil der Nutzerbesuche, getrennt nach Mobil und Desktop. Der LCP-Grenzwert von 2,5 Sekunden betrifft das Rendern des größten Inhaltselements und ist kein Grenzwert für Interaktivität.

Largest Contentful Paint (LCP): Ladegeschwindigkeit optimieren

LCP misst, wann das größte geeignete Inhaltselement im sichtbaren Bereich gerendert wird. Das kann ein großes Bild, ein Video oder ein Text-Block sein. Die Optimierung konzentriert sich auf vier Bereiche: Serverantwortzeit, Bildoptimierung, Ressourcen-Priorisierung und Render-Blocking-Ressourcen.

Serverantwortzeit reduzieren (TTFB)

Die Time to First Byte (TTFB) ist die Zeit zwischen der Anfrage und dem ersten Byte der Antwort vom Server. Eine langsame TTFB verzögert alles, was danach kommt.

Konkrete Maßnahmen:

• Verwende ein Content Delivery Network (CDN) wie Cloudflare oder Vercel, um Inhalte geografisch näher beim Nutzer zu lagern.
• Optimiere deine Datenbankabfragen – langsame Queries sind oft der Bottleneck.
• Nutze Caching-Strategien: HTTP-Caching für statische Inhalte, Redis oder ähnliche Systeme für häufig abgerufene Daten.

Bei einer Next.js-App mit Supabase-Backend können optimierte Datenbankabfragen und Caching die TTFB senken. Wie groß die Verbesserung im konkreten Projekt ausfällt, muss ein Vorher-Nachher-Vergleich unter vergleichbaren Bedingungen zeigen.

Bilder und Medien optimieren

Bilder sind oft der größte Faktor bei LCP. Ein unkomprimiertes Bild kann das Laden um Sekunden verzögern.

Konkrete Maßnahmen:

• Nutze moderne Bildformate wie WebP oder AVIF – sie sind in der Regel deutlich kleiner als JPEG.
• Implementiere Responsive Images mit srcset und sizes, um je nach Gerätebreite das richtige Format zu laden.
• Komprimiere Bilder mit Tools wie ImageOptim oder TinyPNG vor dem Upload.
• Lade das LCP-Bild mit fetchpriority="high" vor anderen Ressourcen.

Render-Blocking JavaScript und CSS vermeiden

JavaScript und CSS, die vor dem Rendering geladen werden müssen, blockieren das Anzeigen der Seite.

Konkrete Maßnahmen:

• Verschiebe nicht-kritisches JavaScript mit defer oder async in den HTML-Tag.
• Nutze Code-Splitting: Lade nur das JavaScript, das für die initiale Seite nötig ist.
• Inline kritisches CSS (die Stile für den sichtbaren Bereich) direkt in den <head>.
• Nutze CSS-in-JS-Bibliotheken wie Emotion oder Styled Components sparsam – sie können das Rendering verlangsamen.

Preload und Prefetch strategisch einsetzen

Mit <link rel="preload"> kannst du wichtige Ressourcen früher laden, ohne sie zu blockieren.

Konkrete Maßnahmen:

• Preload Schriftarten, die für den sichtbaren Bereich nötig sind: <link rel="preload" as="font" href="/font.woff2">.
• Preload das LCP-Bild: <link rel="preload" as="image" href="/hero.webp">.
• Nutze prefetch für Ressourcen, die wahrscheinlich später geladen werden, aber nicht kritisch sind.

Interaction to Next Paint (INP): Reaktionsfähigkeit verbessern

INP misst die Verzögerung zwischen einer Nutzerinteraktion und der visuellen Rückmeldung. Eine Verzögerung von über 500 ms wirkt für den Nutzer wie eine „eingefrorene" Seite.

JavaScript-Blockaden identifizieren und reduzieren

JavaScript, das zu lange läuft, blockiert den Main Thread und verzögert die Reaktion auf Nutzerinteraktionen.

Konkrete Maßnahmen:

• Nutze Chrome DevTools (Performance Tab), um Long Tasks zu identifizieren – Aufgaben, die länger als 50 ms dauern.
• Teile lange Aufgaben mit setTimeout oder requestIdleCallback auf mehrere kleinere Aufgaben auf.
• Nutze Web Workers, um CPU-intensive Aufgaben vom Main Thread auszulagern.

Event-Handler optimieren

Ineffiziente Event-Handler (z. B. bei Scroll oder Input) können INP verschlechtern.

Konkrete Maßnahmen:

• Nutze Debouncing oder Throttling für häufig ausgelöste Events wie scroll oder input.
• Vermeide komplexe DOM-Manipulationen im Event-Handler – nutze stattdessen CSS-Klassen oder State-Updates.
• Nutze passive: true bei Event-Listenern, um dem Browser zu signalisieren, dass du preventDefault() nicht aufrufen wirst.

Drittanbieter-Skripte priorisieren

Analytics, Chat-Widgets und Werbeskripte können den Main Thread blockieren.

Konkrete Maßnahmen:

• Lade Drittanbieter-Skripte mit async oder defer.
• Nutze <script type="module"> für moderne Skripte, die paralleles Laden unterstützen.
• Überlege, ob jedes Skript wirklich nötig ist – jedes zusätzliche Skript erhöht die Wahrscheinlichkeit von INP-Problemen.

Monitoring mit Chrome DevTools

Die Performance Tab in Chrome DevTools zeigt dir genau, welche Aufgaben den Main Thread blockieren.

Konkrete Maßnahmen:

• Öffne DevTools → Performance Tab → Starte eine Aufnahme → Interagiere mit der Seite → Stoppe die Aufnahme.
• Suche nach roten Balken (Long Tasks) und klicke darauf, um zu sehen, welcher Code sie verursacht.
• Nutze DevTools mit aufgezeichneten Interaktionen für INP-Analysen; ein gewöhnlicher Lighthouse-Ladetest liefert mit TBT nur einen Näherungsindikator.

Cumulative Layout Shift (CLS): Visuelle Stabilität sichern

CLS erfasst die größte Summe unerwarteter Layoutverschiebungen in einem Sitzungsfenster während des gesamten Seitenbesuchs. Ein hoher CLS-Wert ist besonders ärgerlich, wenn der Nutzer gerade einen Link oder Button anklicken möchte und dieser plötzlich verrutscht.

Bildabmessungen und Aspect Ratio festlegen

Wenn Bilder ohne festgelegte Breite und Höhe geladen werden, reserviert der Browser keinen Platz – das Bild „schiebt" andere Inhalte zur Seite.

Konkrete Maßnahmen:

• Setze width und height auf Bilder oder nutze das aspect-ratio CSS-Property.
• Beispiel: <img src="photo.jpg" width="800" height="600" alt="..."> oder img { aspect-ratio: 16 / 9; }.
• Nutze <picture> für responsive Bilder mit fester Aspect Ratio.

Schriftarten-Swaps minimieren

Wenn eine benutzerdefinierte Schriftart später als die System-Schriftart lädt, wechselt der Browser die Schriftart – das ändert die Größe des Texts und verursacht Layout Shifts.

Konkrete Maßnahmen:

• Nutze font-display: swap oder font-display: optional im @font-face.
• Preload kritische Schriftarten: <link rel="preload" as="font" href="/font.woff2" type="font/woff2">.
• Nutze Variable Fonts, um mehrere Schriftgewichte in einer Datei zu laden.

Dynamische Inhalte reservieren

Wenn Inhalte nach dem Laden eingefügt werden (z. B. Ads, Benachrichtigungen), verschieben sie bestehende Inhalte.

Konkrete Maßnahmen:

• Reserviere Platz für Ads oder dynamische Inhalte mit einem <div> mit fester Höhe.
• Nutze min-height oder aspect-ratio, um Platz zu reservieren, bevor der Inhalt geladen ist.
• Vermeide, Inhalte am Anfang der Seite einzufügen – nutze stattdessen Bereiche am Ende oder in Sidebars.

Animationen und Übergänge kontrollieren

Animationen, die transform oder opacity ändern, verursachen keinen Layout Shift. Animationen, die width, height oder position ändern, schon.

Konkrete Maßnahmen:

• Nutze transform und opacity für Animationen statt width oder height.
• Nutze CSS transition statt JavaScript-basierte Animationen, um Jank zu vermeiden.
• Teste Animationen mit DevTools → Rendering Tab → Paint Flashing, um zu sehen, welche Animationen Repaints verursachen.

Tools und Monitoring: Messen, was zählt

Du kannst Core Web Vitals nur optimieren, wenn du sie messen kannst. Hier sind die wichtigsten kostenlosen Tools:

Google PageSpeed Insights und Lighthouse

Google PageSpeed Insights ist das Standard-Tool für Core Web Vitals. Es zeigt dir:

• Feldaten (Real User Monitoring) – echte Nutzerdaten der letzten 28 Tage.
• Labordaten (Lighthouse) – Messungen in einer kontrollierten Umgebung.

Lighthouse ist auch in Chrome DevTools eingebaut (F12 → Lighthouse Tab).

Google Search Console für Feldaten

Die Google Search Console zeigt dir einen Core Web Vitals Report mit echten Nutzerdaten für deine Website. Dies ist die zuverlässigste Quelle, da sie Daten von echten Besuchern nutzt, nicht von synthetischen Tests. Die CrUX-Feldaten bilden ein rollierendes 28-Tage-Fenster ab und benötigen ausreichend Nutzerstichproben.

Real User Monitoring (RUM) einrichten

Für kontinuierliches Monitoring kannst du Web Vitals direkt in deinen Code integrieren. Das Google-Paket web-vitals stellt eine einfache API bereit:

import { onCLS, onINP, onFCP, onLCP, onTTFB } from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onFCP(console.log);
onLCP(console.log);
onTTFB(console.log);

Diese Daten kannst du an Google Analytics 4 oder einen eigenen Server senden. Vercel Speed Insights erfasst Metriken über das zugehörige SDK.

Automatisiertes Monitoring und Alerts

Für kontinuierliche Überwachung kannst du:

• Vercel Speed Insights (für Vercel-Deployments) nutzen.
• Google Analytics 4 mit Web Vitals konfigurieren.
• Einen eigenen Monitoring-Service aufbauen, der Alerts sendet, wenn Metriken unter Schwellwerte fallen.

Optimierungs-Checkliste: Schritt für Schritt

LCP-Optimierungen (Priorität 1–3)

INP-Optimierungen (Priorität 1–3)

CLS-Optimierungen (Priorität 1–3)

Verifikation und Messung

Nutze diese Schritte, um deine Optimierungen zu validieren:

1. Öffne Google PageSpeed Insights und prüfe deine Website für Desktop und Mobile.
2. Prüfe den Core Web Vitals Report in der Google Search Console – beachte das rollierende 28-Tage-Fenster und die nötige Stichprobengröße.
3. Führe einen Chrome DevTools Lighthouse Report durch (F12 → Lighthouse Tab).
4. Dokumentiere Vor- und Nachher-Werte (Screenshots, Metriken).
5. Richte Monitoring-Tools ein (Analytics, eigener RUM-Service).
6. Informiere dein Team über Optimierungen und neue Best Practices.

Häufige Fehler und wie man sie vermeidet

Zu viel Zeit auf niedrig-priorisierte Metriken verschwenden

Viele Entwickler optimieren CLS auf 0,05, während LCP noch bei 4 Sekunden liegt. Das ist eine Fehlpriorisierung.

Gegenmaßnahme: Nutze die Checkliste oben. Optimiere nach Priorität, nicht nach Spaßfaktor. LCP und INP haben in der Regel größere Auswirkungen auf die Nutzererfahrung als CLS.

Feldaten vs. Labordaten verwechseln

PageSpeed Insights zeigt dir zwei Werte: Feldaten (echte Nutzer) und Labordaten (Lighthouse). Feldaten sind zuverlässiger, aber Labordaten sind schneller zu testen.

Gegenmaßnahme: Nutze Labordaten zum Entwickeln und Testen. Nutze Feldaten (Google Search Console) zur Validierung. CrUX-Feldaten zeigen ein rollierendes 28-Tage-Fenster; entscheidend ist außerdem eine ausreichende Stichprobe.

Drittanbieter-Skripte unterschätzen

Ein einzelnes Analytics- oder Chat-Widget kann INP um 200+ ms verschlechtern.

Gegenmaßnahme: Lade Drittanbieter-Skripte mit async oder defer. Nutze DevTools Network Tab, um zu sehen, welche Skripte am längsten laden. Überlege, ob jedes Skript wirklich nötig ist.

Monitoring nach Launch vergessen

Viele Teams optimieren vor dem Launch, vergessen dann aber, die Metriken zu überwachen. Neue Features oder Drittanbieter-Skripte können Core Web Vitals später verschlechtern.

Gegenmaßnahme: Richte automatisiertes Monitoring ein (Google Analytics 4, Vercel Speed Insights oder eigener RUM-Service). Prüfe monatlich die Google Search Console. Setze Alerts für Rückgänge.

FAQ

Was ist der Unterschied zwischen LCP, INP und CLS?

LCP (Largest Contentful Paint) misst die Ladegeschwindigkeit – wann das größte geeignete Inhaltselement im sichtbaren Bereich gerendert wird. INP (Interaction to Next Paint) misst die Reaktionsfähigkeit auf Nutzerklicks und Eingaben. CLS (Cumulative Layout Shift) misst die visuelle Stabilität – unerwartete Layoutverschiebungen über den gesamten Seitenbesuch. Alle drei zusammen beschreiben die Nutzererfahrung.

Welche Schwellwerte gelten für 'gut' bei Core Web Vitals?

Google definiert „gut" als: LCP ≤ 2,5 Sekunden, INP ≤ 200 Millisekunden, CLS ≤ 0,1. Diese Werte basieren auf realen Nutzererfahrungen. Werte darüber sind „verbesserungsbedürftig" (gelb) oder „schlecht" (rot).

Wie messe ich Core Web Vitals für meine Website?

Nutze Google PageSpeed Insights für einen schnellen Überblick oder die Google Search Console für echte Nutzerdaten. Chrome DevTools (F12 → Lighthouse) zeigt dir Labordaten. Für kontinuierliches Monitoring nutze Google Analytics 4 oder Vercel Speed Insights.

Kann ich Core Web Vitals auch ohne technische Kenntnisse verbessern?

Teilweise: Bildoptimierung, Schriftarten-Preloading und Platzreservierung für Ads können auch mit Website-Buildern konfiguriert werden. JavaScript-Optimierungen und Long-Task-Splitting erfordern aber Entwickler-Kenntnisse.