Core Web Vitals Optimierung: Praktische Schritte für LCP, INP und CLS

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 der größte sichtbare Inhalt (Text, Bild, Video) vollständig geladen ist. 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): Misst unerwartete Layoutverschiebungen während des Ladens. 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:

| Metrik | Gut (Grün) | Verbesserungsbedürftig (Gelb) | Schlecht (Rot) | |--------|-----------|-------------------------------|----------------| | LCP | ≤ 2,5 s | 2,5 s – 4,0 s | > 4,0 s | | INP | ≤ 200 ms | 200 ms – 500 ms | > 500 ms | | CLS | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |

Diese Schwellwerte basieren auf realen Nutzererfahrungen: Nutzer erwarten, dass eine Seite in unter 2,5 Sekunden interaktiv wird, dass ihre Klicks sofort beantwortet werden, und dass sich Inhalte nicht unerwartet verschieben.

Largest Contentful Paint (LCP): Ladegeschwindigkeit optimieren

LCP misst, wann der größte sichtbare Inhalt vollständig geladen ist. 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 einem Projekt mit einer Next.js-App und Supabase-Backend konnte ich die TTFB von etwa 800 ms auf 200 ms reduzieren, indem ich Datenbankabfragen optimiert und Edge Caching aktiviert habe. Die Verbesserung war in PageSpeed Insights unmittelbar sichtbar.

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 Lighthouse (auch in DevTools) für automatisierte INP-Analysen.

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

CLS misst unerwartete Layoutverschiebungen während des Ladens. 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. Feldaten benötigen mindestens 28 Tage Sammlung, um aussagekräftig zu sein.

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:

```javascript import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log); getFID(console.log); getFCP(console.log); getLCP(console.log); getTTFB(console.log); ```

Diese Daten kannst du an einen Analytics-Service senden (z. B. Vercel Analytics, Google Analytics 4 oder einen eigenen Server).

Automatisiertes Monitoring und Alerts

• Für kontinuierliche Überwachung kannst du:
• Vercel Analytics (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)

| Priorität | Maßnahme | Tool zur Verifikation | |-----------|----------|----------------------| | 1 | TTFB messen und Datenbank-Queries optimieren | PageSpeed Insights, DevTools Network Tab | | 1 | LCP-Bild mit `fetchpriority="high"` preloaden | Lighthouse, PageSpeed Insights | | 2 | Bilder in WebP/AVIF konvertieren und komprimieren | ImageOptim, TinyPNG | | 2 | Nicht-kritisches CSS und JavaScript mit `defer` verschieben | Lighthouse Coverage Tab | | 3 | CDN aktivieren (Cloudflare, Vercel, AWS CloudFront) | PageSpeed Insights TTFB | | 3 | Kritisches CSS inline in `<head>` verschieben | Lighthouse, DevTools Coverage Tab |

INP-Optimierungen (Priorität 1–3)

| Priorität | Maßnahme | Tool zur Verifikation | |-----------|----------|----------------------| | 1 | Long Tasks in DevTools Performance Tab identifizieren | Chrome DevTools Performance Tab | | 1 | Lange JavaScript-Aufgaben mit `setTimeout` aufteilen | DevTools Performance, Lighthouse | | 2 | Event-Handler mit Debouncing/Throttling optimieren | DevTools Performance Tab | | 2 | Drittanbieter-Skripte mit `async` oder `defer` laden | PageSpeed Insights, DevTools Network Tab | | 3 | Web Workers für CPU-intensive Aufgaben nutzen | DevTools Performance Tab | | 3 | `passive: true` bei Event-Listenern setzen | DevTools Console (Warnings prüfen) |

CLS-Optimierungen (Priorität 1–3)

| Priorität | Maßnahme | Tool zur Verifikation | |-----------|----------|----------------------| | 1 | `width` und `height` auf alle Bilder setzen | Lighthouse, PageSpeed Insights | | 1 | Aspect Ratio mit CSS `aspect-ratio` festlegen | DevTools Inspector | | 2 | Platz für Ads und dynamische Inhalte reservieren | DevTools Inspector, visuelles Testing | | 2 | Schriftarten mit `font-display: swap` preloaden | Lighthouse, DevTools Network Tab | | 3 | Animationen auf `transform` und `opacity` beschränken | DevTools Rendering Tab (Paint Flashing) | | 3 | Inhalte am Ende der Seite einfügen, nicht am Anfang | Visuelles Testing, Lighthouse |

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 – sammle mindestens 28 Tage Daten für aussagekräftige Feldaten.
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. Feldaten brauchen mindestens 28 Tage, um aussagekräftig zu sein.

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 Analytics 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 der größte sichtbare Inhalt vollständig geladen ist. INP (Interaction to Next Paint) misst die Reaktionsfähigkeit auf Nutzerklicks und Eingaben. CLS (Cumulative Layout Shift) misst die visuelle Stabilität – unerwartete Layoutverschiebungen während des Ladens. 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 Analytics.

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.