Core Web Vitals erklärt: LCP, INP und CLS verständlich
Core Web Vitals sind drei Google-Messwerte für Ladezeit, Reaktionsgeschwindigkeit und Layout-Stabilität. Wer LCP unter 2,5 Sek., INP unter 200 ms und CLS unter 0,1 hält, verbessert aktiv sein Ranking. Dieser Artikel erklärt alle drei Werte und zeigt konkrete Maßnahmen ohne Entwickler-Jargon.
Google bewertet Webseiten nicht nur danach, was sie enthalten, sondern auch danach, wie sie sich anfühlen. Seit 2021 fließen drei konkrete Messwerte in das Ranking ein: die Core Web Vitals. Viele Website-Betreiber haben schon davon gehört, wissen aber nicht genau, was dahintersteckt.
In diesem Artikel erkläre ich, was LCP, INP und CLS bedeuten, welche Grenzwerte Google setzt und welche Stellschrauben Sie bei einer WordPress-Seite drehen können - ohne tief in den Code einzutauchen.
Was Google mit Core Web Vitals misst
Core Web Vitals sind drei Kennzahlen, die Google verwendet, um die Nutzererfahrung auf einer Seite zu bewerten. Der entscheidende Unterschied zu älteren Ladezeit-Metriken: Diese drei Werte messen, was ein Besucher tatsächlich wahrnimmt, nicht nur, was technisch im Hintergrund passiert.
Google wertet dabei keine Labordaten, sondern echte Felddaten aus dem Chrome User Experience Report (CrUX). Bewertet wird immer das 75. Perzentil - das bedeutet: Drei von vier Ihrer Besucher müssen die Grenzwerte erfüllen, nicht nur der Durchschnitt. Eine Seite, die für 90 Prozent der Nutzer schnell ist, aber für 10 Prozent katastrophal langsam, bekommt trotzdem schlechte Werte.
LCP: Wann erscheint das Wichtigste auf dem Bildschirm?
LCP steht für Largest Contentful Paint - auf Deutsch: das Malen des größten sichtbaren Inhalts. Gemessen wird der Zeitpunkt, zu dem das größte Element im sichtbaren Bereich der Seite vollständig geladen ist. Das ist meistens ein Hero-Bild, ein großes Foto oder die Hauptüberschrift.
Gut ist ein LCP unter 2,5 Sekunden. Zwischen 2,5 und 4 Sekunden liegt der "Verbesserungsbedarf"-Bereich. Alles über 4 Sekunden gilt als schlecht.
Bei einem Kundenprojekt aus Hamburg - einem kleinen Handwerksbetrieb mit WordPress-Seite - lag der LCP bei 6,8 Sekunden. Das Hauptbanner war ein unkomprimiertes JPEG mit 4,2 MB. Nach der Konvertierung zu WebP und der Aktivierung von Lazy Loading fiel der Wert auf 2,1 Sekunden. Keine Code-Änderungen, nur Bildoptimierung.
Die häufigsten LCP-Ursachen bei WordPress:
- Bilder ohne WebP-Format oder ohne Komprimierung
- Hero-Bilder, die per CSS als Hintergrund geladen werden (Google kann diese schlechter vorladen)
- Kein Preload für das Hauptbild im
<head> - Langsames Hosting ohne serverseitiges Caching
- Fehlende Content Delivery Networks (CDN) für Besucher weit vom Server entfernt
Das Hauptbild einer Seite sollte nie als CSS-Hintergrund eingebunden sein, wenn LCP wichtig ist. Als <img>-Tag mit fetchpriority="high" lädt Google es deutlich früher vor.
INP: Wie schnell reagiert Ihre Seite auf Klicks?
INP steht für Interaction to Next Paint. Dieser Wert misst, wie lange es dauert, bis die Seite sichtbar auf eine Nutzerinteraktion reagiert - einen Klick, einen Tastendruck oder eine Touch-Geste.
Seit März 2024 hat INP den alten FID-Wert (First Input Delay) ersetzt. FID maß nur die erste Interaktion und nur die Verarbeitungszeit davor. INP misst die gesamte Reaktionszeit aller Interaktionen während des Besuchs und wählt die schlechteste davon aus.
Gut ist ein INP unter 200 Millisekunden. Zwischen 200 und 500 ms besteht Verbesserungsbedarf. Über 500 ms gilt die Reaktionsfähigkeit als schlecht.
FID vs. INP: Was sich geändert hat
| Wert | FID (alt) | INP (neu) |
|---|---|---|
| Misst | Erste Interaktion | Alle Interaktionen |
| Gemessene Phase | Nur Verarbeitungsverzögerung | Gesamte Reaktionszeit |
| Grenzwert "gut" | < 100 ms | < 200 ms |
| Repräsentativität | Gering | Hoch |
| Gültig seit | 2020 | März 2024 |
Schweres JavaScript ist der Hauptschuldige bei schlechten INP-Werten. Jedes Plugin, das beim Seitenaufbau JavaScript ausführt, blockiert den Browser-Haupt-Thread. Schriftarten, Tracking-Skripte, Chat-Widgets, Cookie-Banner - jedes davon kann einen Moment erzeugen, in dem die Seite auf einen Klick nicht reagiert.
Für WordPress gibt es konkrete Gegenmaßnahmen: WP Rocket und LiteSpeed Cache bieten eine "JavaScript verzögern"-Funktion, die Skripte erst dann ausführt, wenn der Nutzer eine Interaktion auslöst. Das reduziert die Last beim initialen Laden erheblich.
Bei einem Onlineshop-Projekt in Norddeutschland hatten wir INP-Werte um 450 ms - ausgelöst durch fünf gleichzeitig ladende Marketing-Pixel. Nach dem Laden per Tag Manager mit Verzögerung fiel der Wert auf 170 ms.
INP verbessern: Praktische Maßnahmen
- JavaScript-Ausführung per WP Rocket oder LiteSpeed Cache verzögern
- Ungenutzte Plugins deaktivieren (jedes Frontend-JS zählt)
- Tracking-Pixel und Chat-Widgets per Tag Manager verzögert laden
- Schwere Slider- und Galerie-Plugins durch leichtere Alternativen ersetzen
- Query Monitor Plugin nutzen, um langsame PHP-Anfragen zu finden
- Hosting-Plan prüfen: Shared Hosting mit wenig PHP-Speicher bremst INP massiv
CLS: Springt Ihre Seite beim Laden?
CLS steht für Cumulative Layout Shift und misst, wie stark sich der sichtbare Inhalt einer Seite während des Ladens verschiebt. Jeder kennt das Phänomen: Man will auf einen Link klicken, kurz vorher lädt ein Bild nach und man tippt auf etwas anderes.
Der CLS-Wert ist keine Zeit, sondern eine dimensionslose Zahl. Unter 0,1 gilt als gut, zwischen 0,1 und 0,25 als verbesserungswürdig, darüber als schlecht.
Vorteile
- Direkt mit HTML-Attributen behebbar (width/height bei Bildern)
- Einmal richtig eingestellt, dauerhaft behoben
- Kein JavaScript nötig, reine HTML/CSS-Optimierung
- Gut messbar in Chrome DevTools (Layout Shift Overlay)
Nachteile
- Ads und externe Embeds sind schwer zu kontrollieren
- Manche Page Builder ignorieren Bildabmessungen automatisch
- Web-Schriften laden asynchron und können kurz nach Seitenaufbau springen
- Nachträgliche Korrekturen in bestehenden Themes erfordern Anpassungen
Die drei häufigsten CLS-Ursachen bei WordPress:
1. Bilder ohne Abmessungen: Wenn <img>-Tags kein width- und height-Attribut haben, reserviert der Browser keinen Platz. Das Bild springt in die Seite, sobald es geladen ist. Seit WordPress 5.5 werden diese Attribute im Editor automatisch gesetzt - aber viele ältere Themes und Page Builder umgehen das.
2. Webfonts ohne font-display: Google Fonts, die ohne font-display: swap oder font-display: optional geladen werden, lassen Text unsichtbar, bis die Schrift heruntergeladen ist. Danach springt der Text in die Seite. Lösung: Google Fonts lokal hosten oder das Plugin OMGF (Optimize My Google Fonts) verwenden.
3. Dynamisch eingefügte Inhalte: Cookie-Banner, Werbe-Slots oder Newsletter-Boxen, die nach dem ersten Rendern nachgeladen werden, schieben alles darunter nach unten. Hier hilft ein fester min-height-Platzhalter im CSS.
YouTube-Einbettungen ohne Fassade sind ein oft übersehener CLS-Verursacher. Die Thumbnail-Preview springt beim Laden. Ein Lite-Embed-Plugin wie WP YouTube Lyte löst das Problem in einer Minute.
Wie Sie Ihre Werte messen
Für den Einstieg reicht PageSpeed Insights (pagespeed.web.dev). Die URL eingeben, auf "Analysieren" klicken - fertig. Der Bericht zeigt Felddaten (echte Nutzer aus den letzten 28 Tagen) und Labordaten (Simulation) getrennt. Beide sind nützlich, aber für das Ranking zählen nur die Felddaten.
GoogleSearch Console bietet unter "Erfahrung" einen vollständigen Core Web Vitals-Bericht mit allen URLs Ihrer Domain. Besonders praktisch: Sie sehen auf einen Blick, welche Seiten als "schlecht" oder "verbesserungswürdig" markiert sind.
Für tiefere Analysen empfehle ich Chrome DevTools. Im Performance-Panel können Sie einzelne Layoutverschiebungen sehen und im Network-Panel nachverfolgen, welche Ressourcen den LCP verzögern.
Messtools für Core Web Vitals im Vergleich
| Tool | Felddaten | Labordaten | Kostenlos |
|---|---|---|---|
| PageSpeed Insights | Ja (28 Tage) | Ja | Ja |
| Google Search Console | Ja (28 Tage) | Nein | Ja |
| Chrome DevTools | Nein | Ja | Ja |
| Web Vitals Extension | Ja (live) | Nein | Ja |
| GTmetrix | Nein | Ja | Teilweise |
WordPress-Plugins, die wirklich helfen
Für die meisten WordPress-Projekte reicht ein gutes Caching-Plugin, um LCP und CLS deutlich zu verbessern. Meine Empfehlungen nach 13 Jahren WordPress-Entwicklung:
WP Rocket (ab ca. 59 Euro/Jahr) ist die erste Wahl für Projekte ohne LiteSpeed-Hosting. Es übernimmt Caching, JavaScript-Verzögerung, CSS-Minimierung, Bildoptimierung per Lazy Loading und das Vorabladen kritischer Ressourcen. Das Einrichten dauert unter einer Stunde.
LiteSpeed Cache ist kostenlos und sehr leistungsfähig - aber nur sinnvoll, wenn Ihr Hosting-Server LiteSpeed verwendet. LH.pl und viele andere deutsche Hoster setzen auf LiteSpeed, daher ist dieses Plugin dort die erste Wahl.
Imagify oder ShortPixel konvertieren Bilder automatisch zu WebP und komprimieren sie verlustfrei. Beide haben kostenlose Kontingente, die für kleinere Seiten ausreichen.
Für CLS-Probleme durch Google Fonts empfehle ich das Plugin OMGF (Optimize My Google Fonts), das Schriften lokal einbindet und font-display: swap automatisch setzt.
Wer professionelle Unterstützung bei der Performance-Optimierung sucht, findet auf meiner Seite zu Webseiten-Erstellung und -Optimierung mehr Informationen zu meinen Leistungen.
Core Web Vitals messen: Search Console, PageSpeed Insights und CrUX
Viele Betreiber öffnen PageSpeed Insights einmal, notieren eine Zahl und haken das Thema ab. Das reicht nicht. Die drei wichtigsten Messquellen haben unterschiedliche Stärken - ich nutze alle drei, je nach Fragestellung.
Google Search Console ist der einzige Ort, wo Sie Felddaten für alle URLs Ihrer Domain auf einmal sehen. Unter "Erfahrung" zeigt die Search Console eine Karte mit dem Anteil der Seiten, die "gut", "verbesserungswürdig" oder "schlecht" bewertet werden. Wichtig: Ein grüner Status bedeutet, dass mindestens 75 Prozent Ihrer Seitenaufrufe den guten Grenzwert erfüllen. Die URL-Gruppen unter dem Übersichtsbericht helfen dabei, Muster zu erkennen - etwa wenn alle Produktseiten eines Shops schlecht abschneiden, aber die Startseite gut ist.
PageSpeed Insights liefert Feldwerte pro URL und ergänzt sie durch Lighthouse-Labordaten. Der Feldwert-Block oben im Bericht zeigt das 75. Perzentil der echten Nutzerdaten aus dem CrUX-Datensatz. Ist dieser Block grau, hat Google nicht genug echte Daten für die URL - dann zählen nur die Labordaten. Das passiert bei Seiten mit wenig Traffic. In diesem Fall messe ich gezielt mit dem Lighthouse-Panel in Chrome DevTools, um zumindest Labdaten als Orientierung zu haben.
Chrome User Experience Report (CrUX) ist die Rohdatenquelle hinter beiden Tools oben. Google aggregiert anonymisierte Performance-Daten aus Chrome-Installationen weltweit. CrUX-Daten werden monatlich aktualisiert und können über die CrUX API oder BigQuery direkt abgefragt werden - das ist interessant für Agenturen, die mehrere Kundenprojekte gleichzeitig überwachen. Für einzelne WordPress-Websites ist das meistens überdimensioniert.
Ein konkreter Messworkflow, den ich für neue Projekte verwende:
1. PageSpeed Insights für die Startseite, eine Kategorieseite und eine Produktseite aufrufen - so sieht man, ob das Problem überall auftritt oder nur auf bestimmten Seitentypen.
2. Search Console öffnen und prüfen, ob es URL-Gruppen mit auffällig schlechten Werten gibt.
3. Chrome DevTools, Performance-Panel: Aufzeichnung starten, Seite neu laden, nach langen roten Blöcken im Main-Thread suchen (INP-Kandidaten) und im Layout-Panel nach Shift-Ereignissen (CLS).
4. Web Vitals Chrome Extension installieren: Sie zeigt LCP, INP und CLS live beim Browsen als kleine Anzeige. Sehr praktisch, um zu prüfen, ob ein Klick auf ein Menü den INP-Wert in die Höhe treibt.
PageSpeed Insights zeigt manchmal andere Werte als die Search Console. Das ist normal: PageSpeed Insights wertet die letzten 28 Tage für eine einzelne URL aus, Search Console aggregiert über Seitengruppen und teilweise über einen anderen Zeitraum. Für das Ranking ist die Search Console-Ansicht maßgeblich.
Was gute Werte kosten und wann sich Optimierung lohnt
Die ehrliche Antwort: Es kommt darauf an. Viele LCP- und CLS-Probleme sind mit Plugins und etwas Konfigurationszeit lösbar - ohne Entwicklerstunden. Andere erfordern Eingriffe in Theme-Code oder das Ersetzen eines schlecht programmierten Plugins. Ich gebe hier realistische Preisorientierungen für den deutschen Markt, basierend auf meinen eigenen Projekten und Rückmeldungen aus dem Netzwerk.
Stufe 1: Plugins und Konfiguration (80-300 Euro einmalig)
Das deckt eine gründliche Analyse mit PageSpeed Insights und Search Console, die Einrichtung von WP Rocket oder LiteSpeed Cache mit optimalen Einstellungen, die Konvertierung aller Bilder zu WebP per Imagify oder ShortPixel sowie die lokale Einbindung von Google Fonts. Bei vielen kleinen und mittleren WordPress-Seiten reicht das, um alle drei Grenzwerte zu erfüllen. Der Zeitaufwand liegt bei zwei bis vier Stunden für einen erfahrenen Entwickler.
Stufe 2: Theme-Anpassungen und Plugin-Tausch (300-800 Euro)
Wenn ein Page Builder fehlerhafte Bildabmessungen erzeugt, ein Slider-Plugin den INP-Wert auf 600 ms treibt oder das Theme Google Fonts ohne font-display einbindet, sind Codeeingriffe nötig. Das umfasst child-theme-Anpassungen, das Ersetzen problematischer Plugins und manchmal das Umbauen einzelner Template-Bereiche. Dieser Aufwand ist sinnvoll, wenn die betroffene Seite messbar Traffic und Umsatz generiert.
Stufe 3: Tiefgehende JavaScript-Optimierung (800-2500 Euro)
Schwere INP-Probleme durch schlecht optimierte WooCommerce-Erweiterungen, Custom-Block-Bibliotheken oder Drittanbieter-Integrationen erfordern Profiling auf Code-Ebene. Das ist Agenturarbeit oder Senior-Entwickler-Stunden. Ob sich das lohnt, hängt davon ab, wie viel organischen Traffic die Seite hat und ob der aktuelle INP-Wert wirklich ranking-schädlich ist - oder nur im "verbesserungswürdig"-Bereich liegt, der kein aktiver Ranking-Nachteil ist.
Wann lohnt sich Optimierung nicht?
Bei Seiten mit unter 500 Besuchern pro Monat hat CrUX oft keine Felddaten. Google wertet dann keine Vitals für das Ranking aus - die Seite wird nach anderen Signalen bewertet. Hier wäre das Geld in Content oder Linkaufbau besser investiert als in Performance-Optimierung. Eine kurze Prüfung in PageSpeed Insights zeigt, ob der Feldwert-Block grau ist - das ist das sichere Zeichen, dass Google keine Daten hat.
Bei Seiten, die bereits alle drei Grenzwerte im grünen Bereich erfüllen, bringt weiteres Optimieren für das Ranking nichts mehr. Google differenziert nicht zwischen einem LCP von 1,2 Sek. und einem LCP von 2,4 Sek. - beide sind "gut". Perfektionismus hier ist verschwendete Zeit.
Core Web Vitals Sofort-Checkliste
- PageSpeed Insights für Ihre wichtigsten Seiten aufrufen und Ausgangswerte notieren
- Google Search Console einrichten und Core Web Vitals-Bericht aktivieren
- Hauptbild der Startseite als WebP komprimieren und als <img> mit fetchpriority="high" einbinden
- width und height bei allen Bildern im Theme und Editor setzen
- Google Fonts lokal einbinden (OMGF Plugin oder manuell)
- WP Rocket oder LiteSpeed Cache mit JavaScript-Verzögerung aktivieren
- 28 Tage warten und Felddaten erneut prüfen
Was realistisch erreichbar ist
Nicht jede Seite kann alle drei Grenzwerte erfüllen - das hängt stark vom Hosting, vom Theme und von externen Einbindungen ab. Aber fast jede WordPress-Seite kann von "schlecht" auf "verbesserungswürdig" kommen, und viele davon auf "gut".
Nach meiner Erfahrung sind LCP und CLS bei WordPress-Projekten mit guten Plugins und ordentlich komprimierten Bildern in ein bis zwei Tagen lösbar. INP ist komplizierter, weil schweres JavaScript nicht immer durch Plugin-Einstellungen ersetzt werden kann.
Bei laufenden Projekten lohnt sich eine regelmäßige Kontrolle in Google Search Console - am besten einmal im Monat. Nach größeren Theme- oder Plugin-Updates können sich die Werte schnell verändern.
Die gute Nachricht: Mehr als die Hälfte aller Webseiten weltweit erfüllt mindestens einen der drei Grenzwerte noch nicht. Wer jetzt optimiert, hat einen echten Vorsprung.
Fazit
Core Web Vitals sind kein Selbstzweck. Google misst damit, was Besucher tatsächlich erleben: Kommt das Wichtigste schnell auf den Bildschirm? Reagiert die Seite sofort auf Eingaben? Springt nichts beim Laden herum?
Wer diese drei Fragen mit "Ja" beantworten kann, hat nicht nur bessere Ranking-Chancen, sondern auch Besucher, die länger bleiben und eher konvertieren. Für professionelle Webseiten gehört die Performance-Optimierung heute zur Grundausstattung - genau wie ein gutes Design und klare Inhalte.
Bei Fragen zur technischen Umsetzung können Sie sich gerne melden.
Core Web Vitals sind drei von Google definierte Messwerte, die die Nutzererfahrung auf einer Webseite messen: Ladegeschwindigkeit (LCP), Reaktionsfähigkeit (INP) und Layout-Stabilität (CLS). Google verwendet diese Werte seit 2021 als Rankingfaktor. Seiten, die alle drei Grenzwerte erfüllen, haben einen messbaren Vorteil gegenüber Seiten mit schlechten Werten - besonders bei mobile Suchergebnissen. Der einfachste Einstieg ist PageSpeed Insights (pagespeed.web.dev) - kostenlos, direkt von Google, zeigt sowohl Lab-Daten als auch echte Felddaten. Wer mehrere Seiten im Blick behalten möchte, richtet Google Search Console ein: Unter 'Erfahrung' findet sich ein vollständiger Core Web Vitals-Bericht mit allen URLs, die Verbesserungen benötigen. Für tiefere Analysen eignet sich Chrome DevTools mit dem Performance-Panel. Für viele Probleme reicht ein gutes Caching-Plugin wie WP Rocket oder LiteSpeed Cache. Diese Plugins übernehmen Bildoptimierung, JavaScript-Verzögerung, CSS-Minimierung und Vorladung von Schriften in wenigen Klicks. Ohne Entwickler kommen Sie bei LCP und CLS oft weit. INP-Probleme durch schwere JavaScript-Bibliotheken oder schlecht codierte Plugins erfordern manchmal doch einen Blick unter die Haube. Labordaten (Lighthouse, PageSpeed Insights) zeigen Verbesserungen sofort nach der Umsetzung. Echte Felddaten, die Google für das Ranking verwendet, basieren auf einem 28-Tage-Fenster echter Besucher. Nach größeren Änderungen sollten Sie also mindestens vier Wochen warten, bevor Sie den Erfolg in Google Search Console bewerten. Die allgemeine Ladezeit misst, wann alle Ressourcen einer Seite geladen sind - ein Wert, den normale Besucher nie bewusst wahrnehmen. LCP misst dagegen, wann das größte sichtbare Element (meist ein Hero-Bild oder eine H1-Überschrift) auf dem Bildschirm erscheint. Das ist der Moment, an dem ein Besucher das Gefühl hat, die Seite sei 'da'. Google priorisiert diese subjektive Wahrnehmung bewusst. WP Rocket ist kostenpflichtig (ab ca. 59 Euro/Jahr), deckt aber alle drei Bereiche ab und ist für die meisten Projekte die erste Wahl. LiteSpeed Cache ist kostenlos und sehr leistungsfähig, wenn der Hosting-Server LiteSpeed verwendet. Für Bildoptimierung empfehle ich zusätzlich Imagify oder ShortPixel. Google Fonts lokal einzubinden hilft gezielt beim CLS-Wert.Häufige Fragen
Was sind Core Web Vitals und warum sind sie für mein Ranking wichtig?
Wie überprüfe ich die Core Web Vitals meiner Webseite?
Muss ich einen Entwickler beauftragen, um Core Web Vitals zu verbessern?
Wie lange dauert es, bis Verbesserungen in den Google-Messwerten sichtbar werden?
Was ist der Unterschied zwischen LCP und der allgemeinen Ladezeit?
Welche WordPress-Plugins helfen am meisten bei Core Web Vitals?
Brauchst du Hilfe bei deinem Projekt?
Ich baue WordPress-Webseiten und Shoper-Shops ab 600 €. Shoper Partner, 120+ Projekte.
- Antwort innerhalb von 24h
- Zertifizierter Shoper Partner
- 120+ abgeschlossene Projekte
- DSGVO-konform, volle Datensicherheit