Core Web Vitals: LCP, INP und CLS erklärt und verbessern

Core Web Vitals sind Googles Maßstab für die Nutzererfahrung auf deiner Webseite. Seit 2021 sind sie ein offizieller Ranking-Faktor — und seit dem Update auf INP im März 2024 wichtiger denn je.

Klingt technisch? Keine Sorge. In diesem Artikel erkläre ich dir die drei Core Web Vitals verständlich, zeige dir wie du sie misst und wie du sie verbesserst — auch ohne Entwickler-Know-how.

Was sind Core Web Vitals?

Core Web Vitals sind drei Metriken die messen wie schnell, interaktiv und visuell stabil deine Webseite ist:

1. LCP (Largest Contentful Paint) — Wie schnell lädt der Hauptinhalt?
2. INP (Interaction to Next Paint) — Wie schnell reagiert die Seite auf Klicks?
3. CLS (Cumulative Layout Shift) — Wie stabil ist das Layout?

Google misst diese Werte bei echten Nutzern und nutzt sie als Ranking-Signal. Seiten mit guten Core Web Vitals haben einen Vorteil — besonders wenn die sonstigen Ranking-Faktoren ähnlich sind.

Wie misst du deine Core Web Vitals?

Google PageSpeed Insights

Geh auf pagespeed.web.dev und gib deine URL ein. Du bekommst:

• Felddaten (echte Nutzerdaten, wenn vorhanden)
• Labordaten (simulierte Messung)
• Konkrete Verbesserungsvorschläge

Google Search Console

Unter "Core Web Vitals" siehst du den Status aller Seiten deiner Webseite: Gut, Verbesserungsbedarf oder Schlecht.

Chrome DevTools (Lighthouse)

Öffne deine Seite in Chrome, drücke F12 und gehe zum "Lighthouse"-Tab. Klicke "Analyse" für einen detaillierten Bericht.

LCP — Largest Contentful Paint

Was ist LCP?

LCP misst wie lange es dauert bis das größte sichtbare Element auf der Seite geladen ist. Das kann ein Bild, ein Video-Poster oder ein großer Textblock sein.

Gute Werte

| Bewertung | LCP | |---|---| | Gut | unter 2,5 Sekunden | | Verbesserungsbedarf | 2,5 - 4 Sekunden | | Schlecht | über 4 Sekunden |

Die häufigsten LCP-Probleme

1. Große, unkomprimierte Bilder. Das Hero-Bild ist oft das LCP-Element. Wenn es 2 MB groß ist, dauert es ewig.

Lösung: Bilder komprimieren, WebP-Format nutzen, responsive Bilder einsetzen. Mehr in unserem Artikel Bilder SEO optimieren.

2. Langsames Server-Antwortverhalten (TTFB). Wenn dein Server 2 Sekunden braucht um überhaupt zu antworten, kann LCP nicht gut sein.

Lösung: Besseres Hosting, CDN (Content Delivery Network) einsetzen, Server-Caching aktivieren.

3. Render-blockierende Ressourcen. CSS und JavaScript die vor dem Rendern geladen werden müssen verzögern alles.

Lösung: Kritisches CSS inline einbinden, nicht-kritisches CSS und JS asynchron laden.

4. Kein Preloading des LCP-Elements. Wenn das Hero-Bild erst spät entdeckt und geladen wird.

Lösung: <link rel="preload"> für das LCP-Bild einsetzen.

INP — Interaction to Next Paint

Was ist INP?

INP misst wie schnell deine Seite auf Nutzer-Interaktionen reagiert — Klicks, Tippen, Tastatureingaben. Es ersetzt seit März 2024 die alte Metrik FID (First Input Delay).

Der Unterschied zu FID: FID maß nur die erste Interaktion. INP misst alle Interaktionen während des gesamten Besuchs und nimmt den schlechtesten Wert.

Gute Werte

| Bewertung | INP | |---|---| | Gut | unter 200 Millisekunden | | Verbesserungsbedarf | 200 - 500 Millisekunden | | Schlecht | über 500 Millisekunden |

Die häufigsten INP-Probleme

1. Schweres JavaScript. Zu viel JavaScript das den Haupt-Thread blockiert.

Lösung: Unnötiges JavaScript entfernen, Code-Splitting einsetzen, Third-Party-Scripts minimieren.

2. Zu viele Third-Party-Scripts. Jedes Chat-Widget, Analytics-Tool und Cookie-Banner kostet Performance.

Lösung: Nur laden was wirklich nötig ist. Scripts asynchron oder verzögert laden.

3. Teure Event-Handler. Click-Handler die aufwendige Berechnungen ausführen blockieren die Reaktion.

Lösung: Aufwendige Berechnungen in Web Workers auslagern oder zeitlich aufteilen.

CLS — Cumulative Layout Shift

Was ist CLS?

CLS misst wie stark sich das Layout deiner Seite verschiebt während sie lädt. Kennst du das: Du willst auf einen Button klicken und plötzlich rutscht alles nach unten weil ein Bild oder eine Anzeige geladen wird? Das ist ein Layout Shift.

Achte darauf, Render-Blocking Resources zu beseitigen — sie sind eine der häufigsten Ursachen für langsame Ladezeiten.

Gute Werte

| Bewertung | CLS | |---|---| | Gut | unter 0,1 | | Verbesserungsbedarf | 0,1 - 0,25 | | Schlecht | über 0,25 |

Die häufigsten CLS-Probleme

1. Bilder ohne Dimensionen. Wenn du keine Breite und Höhe angibst, reserviert der Browser keinen Platz — und das Layout springt wenn das Bild geladen wird.

Mit unserem kostenlosen SEO-Score kannst du schnell prüfen, wie gut deine Webseite aufgestellt ist.

Lösung: Immer width und height bei Bildern angeben.

2. Dynamisch eingefügte Inhalte. Werbebanner, Cookie-Hinweise oder Benachrichtigungen die nach dem Laden erscheinen und Content nach unten schieben.

Lösung: Feste Platzhalter für dynamische Inhalte reservieren. Cookie-Banner als Overlay statt als Element das den Content verschiebt.

3. Webfonts. Wenn ein Webfont nachgeladen wird, kann sich die Textgröße ändern und alles verschiebt sich.

Lösung: font-display: swap oder besser font-display: optional verwenden. Font-Dateien preloaden.

4. Spät ladende Embeds. YouTube-Videos, Google Maps oder Social-Media-Einbettungen die nach dem initialen Laden erscheinen.

Lösung: Feste Container-Größe für Embeds definieren. Lazy Loading mit Platzhalter.

Prioritäten setzen: Was zuerst verbessern?

Wenn alle drei Metriken schlecht sind, ist die Reihenfolge:

1. LCP zuerst — Hat den größten Einfluss auf Rankings und Nutzererfahrung. Oft mit Bild-Optimierung und besserem Hosting schnell verbesserbar.

2. CLS als Zweites — Meist einfach zu beheben (Bilddimensionen angeben, Platzhalter). Kleine Änderungen, großer Effekt.

3. INP zuletzt — Oft am schwierigsten zu verbessern, besonders bei JavaScript-lastigen Seiten. Kann tiefgreifende Code-Änderungen erfordern.

Praxisbeispiel: Ladezeit einer typischen Unternehmenswebseite

Eine typische kleine Unternehmenswebseite hat oft diese Probleme:

• Hero-Bild: 1,5 MB JPEG → Komprimieren auf 150 KB WebP (LCP verbessert sich um 2-3 Sekunden)
• Keine Bilddimensionen → width/height ergänzen (CLS sinkt auf unter 0,1)
• 5 Third-Party-Scripts → Auf 2 reduzieren (INP verbessert sich)
• Google Fonts ohne Preload → Preload + font-display: swap (LCP und CLS verbessern sich)

Ergebnis: Von "Schlecht" auf "Gut" in ein paar Stunden Arbeit.

Fazit

Core Web Vitals sind kein Mysterium. Sie messen drei einfache Dinge: Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität. Die häufigsten Probleme sind große Bilder, zu viel JavaScript und fehlende Bilddimensionen — alles Dinge die du beheben kannst.

Starte mit PageSpeed Insights, identifiziere die größten Probleme und arbeite sie nach Priorität ab. Schon kleine Verbesserungen können einen großen Unterschied machen — sowohl für dein Ranking als auch für die Zufriedenheit deiner Besucher.

Mehr zum Thema Ladezeit findest du in unserem Artikel Website-Ladezeit verbessern. Und wenn du deine Webseite auf mobile Optimierung prüfen willst, haben wir auch dafür eine Anleitung.