Core Web Vitals einfach erklärt: die drei Werte LCP, INP und CLS mit Schwellen, wo du sie misst, typische Ursachen und Maßnahmen nach Priorität – für Unternehmer ohne Technik-Hintergrund.
Du hast in PageSpeed Insights einen roten Balken gesehen oder die Google Search Console meldet „schlechte URLs“. Jetzt stehst du vor drei Fragen: Ist das schlimm? Was muss ich meiner Agentur sagen? Und was kostet es, das zu beheben? Dieser Artikel beantwortet genau das, ohne dass du Entwickler sein musst.
Du bekommst:
- die drei Core Web Vitals mit den offiziellen Schwellenwerten in einer Tabelle
- eine Übersetzung, was jeder Wert für Anfragen, Bestellungen und Rankings bedeutet
- die zwei kostenlosen Werkzeuge, mit denen du in fünf Minuten selbst misst
- typische Ursachen je Metrik und Maßnahmen in sinnvoller Reihenfolge
- ein Beispiel-Messprotokoll, eine ehrliche Kostenübersicht und eine Checkliste für den nächsten Release
Geschrieben ist der Artikel für Inhaber und Entscheider: Handwerksbetriebe, Praxen, Gastronomen, Händler und B2B-Unternehmen, die wissen wollen, was hinter den Zahlen steckt und welche Maßnahmen sich wirklich lohnen.
Kurzantwort: Was Core Web Vitals sind
Core Web Vitals sind drei Messwerte, mit denen Google die Nutzererfahrung einer Website bewertet. LCP misst, wie schnell der Hauptinhalt sichtbar ist (gut: bis 2,5 Sekunden). INP misst, wie schnell die Seite auf Tippen und Klicken reagiert (gut: bis 200 Millisekunden). CLS misst, wie stark das Layout beim Laden springt (gut: bis 0,1). Google bewertet dabei nicht deinen Testlauf am Schreibtisch, sondern die Erfahrung echter Besucher am 75. Perzentil, also den Wert, den mindestens drei Viertel deiner Besucher erreichen. Du misst die Werte kostenlos mit PageSpeed Insights und im Bericht „Core Web Vitals“ der Google Search Console. Die wirksamsten Maßnahmen sind fast immer dieselben: das große Bild oben verkleinern und priorisieren, überflüssige Skripte entfernen und für Bilder, Schriften und Banner festen Platz reservieren.
Was die Werte für dein Unternehmen bedeuten
Bevor es technisch wird, die Übersetzung in Geschäftssprache. Jede der drei Kennzahlen beschreibt einen Moment, den deine Kunden täglich erleben, meist auf dem Handy, unterwegs, mit mittelmäßigem Empfang.
| Metrik | So erlebt es dein Kunde | Was auf dem Spiel steht |
|---|---|---|
| LCP (Ladezeit des Hauptinhalts) | „Ich tippe auf das Google-Ergebnis und sehe drei Sekunden lang eine weiße Fläche.“ | Absprung, bevor dein Angebot überhaupt sichtbar war. Der nächste Anbieter ist einen Klick entfernt. |
| INP (Reaktionszeit) | „Ich tippe auf ‚Termin anfragen‘ und nichts passiert. Ich tippe noch einmal.“ | Abgebrochene Formulare, doppelt abgeschickte Bestellungen, Frust genau in dem Moment, in dem jemand Kunde werden wollte. |
| CLS (Layout-Stabilität) | „Ich wollte die Öffnungszeiten antippen, da rutscht die Seite und ich lande auf dem Cookie-Banner.“ | Fehlklicks, Unsicherheit, das Gefühl einer unfertigen Seite. Vertrauen geht verloren, bevor man deinen Text gelesen hat. |
Google hat die Core Web Vitals als Ranking-Signal bestätigt, und zwar als Teil der sogenannten Page Experience, also der Bewertung, wie angenehm eine Seite zu benutzen ist. Ehrlich gesagt ist dieses Signal klein: Eine schnelle Seite mit schwachen Texten gewinnt nicht gegen eine mittelschnelle Seite mit guten Inhalten. Der größere Hebel liegt bei deinen Besuchern. Wer auf dem Handy drei Sekunden auf eine weiße Fläche schaut, ruft nicht an. Wer beim Ausfüllen des Formulars zweimal auf einen Button tippen muss, bricht ab. Core Web Vitals sind deshalb weniger ein SEO-Thema als ein Anfragen-Thema.
Tipp: Schau dir die Werte immer zuerst für Mobilgeräte an. Google bewertet Websites nach der mobilen Version, und bei den meisten lokalen Unternehmen kommt der Großteil der Besucher über das Smartphone. Ein grüner Desktop-Wert sagt fast nichts aus.
Die drei Metriken mit Schwellenwerten
Hier die offiziellen Grenzen, die Google für die Einstufung verwendet. Sie gelten unverändert, seit INP im März 2024 die alte Kennzahl FID abgelöst hat.
| Metrik | Was gemessen wird | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|---|
| LCP – Largest Contentful Paint | Zeit, bis das größte sichtbare Element (meist Hero-Bild oder große Überschrift) gerendert ist | bis 2,5 s | 2,5 bis 4,0 s | über 4,0 s |
| INP – Interaction to Next Paint | Zeit von einer Eingabe (Tippen, Klick, Tastatur) bis zur nächsten sichtbaren Reaktion, über den gesamten Besuch betrachtet | bis 200 ms | 200 bis 500 ms | über 500 ms |
| CLS – Cumulative Layout Shift | Summe aller unerwarteten Layout-Verschiebungen während des Besuchs, eine Zahl ohne Einheit | bis 0,1 | 0,1 bis 0,25 | über 0,25 |
LCP: Wie schnell der Hauptinhalt da ist
Der Largest Contentful Paint ist der Moment, in dem das größte Element im sichtbaren Bereich fertig gezeichnet ist. Bei den meisten Unternehmenswebsites ist das ein großes Bild im Kopfbereich, seltener ein Textblock. LCP ist die Kennzahl, die Besucher am direktesten spüren: Solange das Hauptelement fehlt, wirkt die Seite kaputt oder langsam, auch wenn Logo und Menü längst da sind.
INP: Wie schnell die Seite reagiert
Interaction to Next Paint misst über den gesamten Besuch hinweg, wie lange die Seite braucht, um auf eine Eingabe sichtbar zu reagieren. Gezählt wird nicht nur der erste Klick, sondern jede Interaktion, und gewertet wird eine der langsamsten. Eine Seite mit schnellem Start, aber trägem Formular hat deshalb trotzdem einen schlechten INP. Ursache ist fast immer zu viel JavaScript, also Programmcode, der im Browser läuft, während dein Kunde etwas tun will.
CLS: Wie ruhig die Seite beim Laden bleibt
Der Cumulative Layout Shift summiert alle Sprünge, bei denen sich sichtbare Elemente unerwartet verschieben. Klassiker: Ein Bild lädt nach und drückt den Text nach unten, ein Cookie-Banner schiebt den Inhalt weg, eine Schriftart wechselt und der Absatz wird länger. Ein Wert von 0,1 bedeutet grob, dass sich Elemente um zehn Prozent der Bildschirmhöhe verschoben haben. CLS ist die Kennzahl mit dem besten Verhältnis von Aufwand und Wirkung, weil die Ursachen meist kleine Details sind.
Neben den drei Kernwerten zeigen die Tools weitere Kennzahlen wie TTFB (Antwortzeit des Servers) oder FCP (erste sichtbare Inhalte). Sie sind keine Core Web Vitals, helfen aber bei der Ursachensuche. Wie du den TTFB in den Griff bekommst, steht im Artikel zu TTFB, CDN und Caching.
Wo du Core Web Vitals misst: PageSpeed Insights und Search Console
Es gibt zwei Arten von Daten, und der Unterschied ist die häufigste Quelle von Missverständnissen:
- Felddaten stammen von echten Chrome-Nutzern, die deine Website besucht haben. Google sammelt sie im Chrome User Experience Report (CrUX). Nur diese Daten zählen für die Bewertung.
- Labordaten entstehen in einer Simulation, meist mit dem Werkzeug Lighthouse, auf einem gedrosselten Gerät mit langsamer Verbindung. Sie sind zum Finden von Ursachen da, nicht zum Bewerten.
| Werkzeug | Datenart | Wofür es gut ist | Grenzen |
|---|---|---|---|
| PageSpeed Insights (pagespeed.web.dev) | Feld und Labor | Eine einzelne URL prüfen, Ursachen mit Element-Angaben sehen | Felddaten nur bei ausreichend Besuchern; das Labor misst keinen INP, sondern zeigt einen Ersatzwert |
| Google Search Console, Bericht „Core Web Vitals“ | Feld | Die gesamte Website im Blick, Gruppen ähnlicher URLs, Verlauf über Monate | Erscheint erst ab genug Traffic; Änderungen zeigen sich mit Wochen Verzögerung |
| Chrome DevTools, Performance-Panel | Labor | Für Entwickler: exakte Ursache eines langsamen LCP oder INP finden | Braucht Fachwissen, misst nur dein Gerät |
| Chrome-Erweiterung „Web Vitals“ | Eigene Sitzung | Live-Werte beim Surfen auf der eigenen Website | Nur dein Gerät und deine Verbindung, keine Bewertungsgrundlage |
So misst du in fünf Minuten
- Öffne PageSpeed Insights und gib die Startseite ein. Wähle den Reiter „Mobil“.
- Ganz oben steht „Bewertung der Core Web Vitals“ mit Bestanden oder Nicht bestanden. Das sind die Felddaten der letzten 28 Tage. Fehlt dieser Block, hat deine Website zu wenige Besucher für Felddaten.
- Scrolle zur Laboranalyse. Unter „Diagnose“ findest du konkrete Hinweise wie „Largest Contentful Paint-Element“ oder „Große Layoutverschiebungen vermeiden“, jeweils mit dem verantwortlichen Element.
- Wiederhole das für deine wichtigste Leistungsseite und die Kontaktseite. Die Startseite ist selten die Seite, die Anfragen bringt.
- Öffne die Search Console, Bereich „Core Web Vitals“, Reiter „Mobil“. Dort siehst du, welche URL-Gruppen als schlecht gelten. Ein Klick auf die Gruppe zeigt die Beispiel-URLs.
Wenn keine Felddaten vorliegen, ist das kein Freifahrtschein. Dann orientierst du dich an der Laborsimulation, weißt aber, dass sie streng ist: Sie simuliert ein schwaches Handy im Mobilfunknetz. Werte, die im Labor knapp gelb sind, sind im Feld oft grün.
Tipp: Notiere die Werte einmal vor jeder Änderung an der Website: Datum, URL, LCP, INP, CLS, jeweils mobil. Erst so erkennst du nach einem Theme-Update, einem neuen Plugin oder einem neuen Tracking-Tag, ob es schlechter geworden ist. Wie du das dauerhaft im Blick behältst, zeigt der Artikel zu Monitoring für SEO und Websites.
Typische Ursachen je Metrik
In den meisten Projekten sind es immer wieder dieselben Verursacher. Die Tabelle hilft dir, das Gespräch mit deiner Agentur oder deinem Entwickler konkret zu führen.
| Metrik | Häufigste Ursachen | Woran du es in PageSpeed Insights erkennst |
|---|---|---|
| LCP | Zu großes Hero-Bild in Originalauflösung; Hero-Bild wird verzögert (lazy) geladen; Slider oder Video im Kopfbereich; langsame Server-Antwort; Skripte und Schriften, die das Rendern blockieren | Diagnose „Largest Contentful Paint-Element“ nennt Bild oder Text; „Server-Antwortzeit reduzieren“ mit TTFB über 0,8 s; „Ressourcen, die das Rendering blockieren“ |
| INP | Zu viel JavaScript aus Theme und Plugins; Tag Manager mit vielen Tags; Chat-Widgets; schwere Slider und Animationen; Consent-Banner, die im Hintergrund weiterarbeiten | „JavaScript-Ausführungszeit reduzieren“, „Arbeit im Hauptthread minimieren“, „Auswirkungen von Drittanbietercode reduzieren“ |
| CLS | Bilder ohne festgelegte Breite und Höhe; Webfonts, die spät wechseln; Cookie-Banner, die Inhalt verschieben; nachladende Einbettungen wie Maps, YouTube oder Bewertungs-Widgets; Werbebanner | „Große Layoutverschiebungen vermeiden“ mit Liste der springenden Elemente; „Bildelemente haben keine explizite Breite und Höhe“ |
Ein Muster fällt in fast jedem Check auf: Drittanbieter-Skripte verschlechtern alle drei Werte gleichzeitig. Ein Chat-Widget, das auf jeder Seite lädt, ein Tag Manager mit zwölf Tags aus fünf Jahren Marketing-Historie, ein Instagram-Feed im Footer. Jedes einzelne Element wirkt harmlos, in Summe blockieren sie den Browser genau in den ersten Sekunden. Wie du Tracking so einbaust, dass es weder Datenschutz noch Ladezeit gefährdet, steht im Artikel zu Cookie-Banner und Tracking.
Maßnahmen nach Priorität
Nicht alles auf einmal. Die Reihenfolge unten hat sich in vielen Projekten bewährt, weil sie mit den Maßnahmen beginnt, die den größten Effekt bei geringstem Aufwand haben.
| Priorität | Maßnahme | Wirkt auf | Aufwand | Wer macht das |
|---|---|---|---|---|
| 1 | Hero-Bild in passender Größe, in WebP oder AVIF und mit hoher Ladepriorität ausliefern; Slider durch ein statisches Bild ersetzen | LCP, CLS | Gering | Agentur, bei WordPress und Shopify oft auch du selbst |
| 2 | Server-Antwortzeit senken: Seiten-Caching aktivieren, CDN einrichten, bei Bedarf Hosting wechseln | LCP | Gering bis mittel | Hosting-Anbieter, Agentur |
| 3 | Skripte entrümpeln: Tag Manager aufräumen, Chat, Maps und Videos erst bei Bedarf laden, ungenutzte Plugins löschen | INP, LCP | Mittel | Agentur gemeinsam mit Marketing |
| 4 | Platz reservieren: Bilder mit Breite und Höhe, Cookie-Banner als Overlay statt als Verschieber, Schriften mit stabilem Ersatz | CLS | Gering | Agentur |
| 5 | JavaScript reduzieren: schwere Effekte, Slider-Bibliotheken und Baukasten-Ballast entfernen oder ersetzen | INP | Mittel bis hoch | Agentur |
| 6 | Neu messen, Werte notieren, nach vier Wochen Felddaten prüfen | alle | Gering | Du |
Priorität 1: das Hero-Bild
In den meisten Fällen ist das größte Element ein Bild, und dieses Bild ist zu groß, im falschen Format oder wird zu spät geladen. Ein Foto in 4.000 Pixel Breite, das auf dem Handy in 400 Pixel angezeigt wird, ist Verschwendung. Die richtige Größe, ein modernes Format und ein Hinweis an den Browser, dieses Bild zuerst zu laden, bringen oft mehr als alle anderen Maßnahmen zusammen. Die Details stehen im Artikel zu LCP und Bildern.
Priorität 2: der Server
Wenn der Server erst nach einer Sekunde antwortet, kann der Browser in dieser Sekunde nichts tun. Seiten-Caching sorgt dafür, dass fertige Seiten gespeichert und nicht bei jedem Besuch neu berechnet werden. Ein CDN liefert Bilder und Dateien von einem Standort in der Nähe des Besuchers aus. Beides ist bei den meisten Hosting-Anbietern in Minuten aktiviert.
Priorität 3 und 5: Skripte
Hier liegt der größte Hebel für INP und gleichzeitig der größte Widerstand, weil jedes Skript irgendwann jemand gewollt hat. Ein ehrliches Aufräumen beginnt mit einer Liste: Welche Tags, Widgets und Plugins laufen, wer nutzt die Daten, was passiert, wenn es weg ist. In vielen Projekten lässt sich ein Drittel entfernen, ohne dass jemand etwas vermisst.
Priorität 4: Platz reservieren
CLS-Probleme sind fast immer handwerkliche Kleinigkeiten. Jedes Bild bekommt Breite und Höhe, damit der Browser den Platz freihält, bevor das Bild geladen ist. Das Cookie-Banner legt sich über die Seite, statt sie nach unten zu schieben. Schriften bekommen eine ähnlich breite Ersatzschrift, damit der Text beim Wechsel nicht umbricht.
Beispiel: Messprotokoll einer Handwerker-Website
So sieht ein typischer Ablauf aus. Die Zahlen sind ein vereinfachtes, fiktives Beispiel zur Veranschaulichung, keine Kundendaten, aber das Muster begegnet uns in dieser Form regelmäßig: ein Sanitärbetrieb in Magdeburg, WordPress mit gekauftem Theme, Slider mit drei Bildern im Kopfbereich, Chat-Widget und Google-Maps-Karte auf jeder Seite, Cookie-Banner, das den Inhalt nach unten schiebt.
| Wert | Vorher | Maßnahme | Nachher | Einstufung |
|---|---|---|---|---|
| LCP | 4,6 s | Slider durch ein statisches Hero-Bild ersetzt (WebP, 1.200 Pixel breit, priorisiert geladen); Seiten-Caching und CDN aktiviert | 2,1 s | gut |
| INP | 380 ms | Chat-Widget nur noch auf der Kontaktseite; drei ungenutzte Tags aus dem Tag Manager entfernt; Slider-Skript und zwei Effekt-Plugins gelöscht | 160 ms | gut |
| CLS | 0,32 | Alle Bilder mit Breite und Höhe versehen; Cookie-Banner als Overlay; Karte durch statisches Vorschaubild mit Link ersetzt; Schrift mit passender Ersatzschrift | 0,04 | gut |
Der Aufwand für ein solches Paket liegt in vielen Projekten bei ein bis zwei Arbeitstagen, sofern das Theme mitspielt. Wichtig ist die Reihenfolge: erst messen, dann Bild und Server, dann Skripte, dann nachmessen. Wer mit dem Skript-Aufräumen anfängt, streitet zwei Wochen über den Chat und hat immer noch ein 4-Megabyte-Bild im Header.
Kosten und Aufwand realistisch
Was die Optimierung kostet, hängt fast ausschließlich davon ab, ob die Ursache an der Oberfläche oder in der Konstruktion liegt.
| Ausgangslage | Empfehlung | Aufwand, grob |
|---|---|---|
| Werte gelb, Ursache sind Bilder und fehlendes Caching | Bilder optimieren, Caching und CDN aktivieren, nachmessen | Wenige Stunden |
| Werte rot bei INP, viele Plugins und Tags | Skript-Inventur, Aufräumen, Widgets nur dort laden, wo sie gebraucht werden | Ein bis drei Arbeitstage |
| Werte rot bei allen drei Metriken, schweres Theme oder Baukasten | Optimierung lohnt sich nur begrenzt; Relaunch mit schlanker Technik planen | Neue Website, je nach Umfang |
| Werte grün, aber wenig Anfragen | Kein Performance-Problem; Texte, Struktur und Kontaktwege verbessern | Inhaltliche Arbeit statt Technik |
Zur Einordnung: Eine neue, von Grund auf schnell gebaute Website gibt es bei uns als Starter-Website ab 1.499 € netto und als Hero-Website ab 3.900 € netto, wahlweise monatlich über zwölf Monate oder einmalig mit zehn Prozent Rabatt. Wenn du dich fragst, ob ein Relaunch günstiger ist als das Flicken einer alten Baustelle, hilft der Artikel WordPress oder individuelle Website bei der Entscheidung.
Wann sich Optimierung nicht lohnt
Es gibt Situationen, in denen wir vom Optimieren abraten:
- Die Werte sind bereits grün. Von 2,1 auf 1,6 Sekunden zu kommen, bringt weder Google noch deine Kunden weiter. Investiere die Zeit in Inhalte und Kontaktwege.
- Du jagst den Lighthouse-Score. Die Zahl von 0 bis 100 ist ein Laborwert und kein Core Web Vital. Ein Score von 85 mit grünen Felddaten ist völlig in Ordnung.
- Die Website wird ohnehin in den nächsten Monaten ersetzt. Dann gehören die Anforderungen ins Briefing für die neue Seite, nicht in Reparaturen an der alten.
- Die Website hat kaum Besucher. Ohne Felddaten bewertet Google nichts. Sorge zuerst für Sichtbarkeit über Google Unternehmensprofil, lokale Inhalte und Verlinkung, und halte die Technik nebenbei sauber.
Häufige Fehler und Mythen
- „Der Lighthouse-Score ist mein Core-Web-Vitals-Wert.“ Nein. Der Score ist eine Simulation, die Bewertung basiert auf Felddaten echter Nutzer.
- „Auf dem Desktop ist alles grün, also passt es.“ Google bewertet mobil. Prüfe immer den mobilen Reiter.
- „Ein Caching-Plugin löst alles.“ Caching hilft beim LCP, ändert aber nichts an zu viel JavaScript (INP) oder springenden Elementen (CLS).
- „Alle Bilder lazy laden.“ Das Hero-Bild darf niemals verzögert geladen werden, sonst steigt der LCP.
- „Einmal optimiert, immer gut.“ Jedes Plugin-Update, jeder neue Tag und jedes hochgeladene Foto kann die Werte verschlechtern. Einmal im Quartal nachmessen.
- „Google rankt nur schnelle Seiten.“ Inhalte und Relevanz wiegen schwerer. Performance entscheidet bei vergleichbaren Anbietern und bei deinen Besuchern.
- „Das ist Sache der Agentur, ich muss das nicht verstehen.“ Ohne Grundverständnis kannst du weder Angebote vergleichen noch erkennen, ob eine Maßnahme etwas gebracht hat.
Checkliste vor dem nächsten Release
Bevor eine neue Version deiner Website live geht, kurz durchgehen:
- LCP: Ist das Hero-Bild in passender Größe, modernem Format und ohne verzögertes Laden eingebaut?
- LCP: Antwortet der Server in unter 0,8 Sekunden, ist Caching aktiv?
- INP: Wurden neue Skripte, Widgets oder Tags hinzugefügt? Wenn ja, warum und auf welchen Seiten?
- CLS: Haben alle Bilder Breite und Höhe, überlagert das Cookie-Banner die Seite statt sie zu verschieben?
- CLS: Lädt die Schrift mit stabilem Ersatz, ohne dass Texte umbrechen?
- Mobil: Einmal mit einem normalen Handy im Mobilfunknetz getestet, nicht nur im Büro-WLAN?
- Messung: Werte vorher und nachher notiert?
Wer mit Next.js arbeitet, findet die technischen Details zu Rendering, Metadaten und Bildern im Artikel zu Next.js SEO im App Router.
Nächster Schritt
Wenn du selbst loslegen willst: Miss die drei wichtigsten Seiten deiner Website mobil in PageSpeed Insights, notiere LCP, INP und CLS und arbeite die Maßnahmen in der Reihenfolge der Tabelle ab. Bild, Server, Skripte, Platz reservieren, nachmessen. In vielen Fällen reicht das für den grünen Bereich.
Wenn du lieber eine ehrliche Einschätzung möchtest, was bei deiner Website die Ursache ist und ob sich Optimieren oder ein Relaunch lohnt: Unser kostenloser Website-Check zeigt dir die Werte, die Verursacher und eine priorisierte Liste mit Aufwand. Wir bauen Websites aus Magdeburg von Grund auf so, dass die Core Web Vitals kein Dauerthema mehr sind.
