Die Core Web Vitals sind drei Messwerte, mit denen Google bewertet, wie gut sich eine Webseite für echte Besucher anfühlt: wie schnell der Hauptinhalt lädt, wie schnell die Seite auf Klicks reagiert und wie stabil das Layout beim Laden bleibt. Google nutzt sie in seinen Rankingsystemen, und Besucher merken sie sofort. Hier erfährst du, was LCP, INP und CLS genau messen, welche Grenzwerte gelten, wo du deine Werte siehst und wie du die häufigsten Probleme behebst, auch ohne Entwickler-Studium.
Was sind die Core Web Vitals?
Core Web Vitals sind ein Teil der Web Vitals, einer Initiative von Google, die einheitliche Messwerte für eine gute Nutzererfahrung im Web festlegt. Die drei Kernwerte decken die wichtigsten Momente beim Besuch einer Seite ab:
- Laden: Wann sehe ich den Hauptinhalt? Gemessen mit LCP.
- Reagieren: Wie schnell passiert etwas, wenn ich klicke oder tippe? Gemessen mit INP.
- Stabilität: Springt der Inhalt beim Laden hin und her? Gemessen mit CLS.
Entscheidend ist, dass die Werte aus echten Besuchen stammen. Chrome erfasst sie anonymisiert und stellt sie im Chrome User Experience Report bereit. Daraus speisen sich die Felddaten in der Search Console und in PageSpeed Insights.
Die drei Messwerte und ihre Grenzwerte
Core Web Vitals im Überblick
| Messwert | Was er misst | Gut |
|---|---|---|
| Largest Contentful Paint (LCP) | Zeit, bis das größte sichtbare Element geladen ist, oft ein Bild oder eine Überschrift | bis 2,5 Sekunden |
| Interaction to Next Paint (INP) | Reaktionszeit auf Klicks, Tippen und Tastatureingaben während des gesamten Besuchs | bis 200 Millisekunden |
| Cumulative Layout Shift (CLS) | Summe unerwarteter Verschiebungen sichtbarer Inhalte | bis 0,1 |
Gemessen wird jeweils am 75. Perzentil, getrennt für Mobilgeräte und Desktop. Das heißt: Drei von vier Seitenaufrufen müssen den Grenzwert erreichen. Eine Seite besteht die Prüfung nur, wenn alle drei Werte im grünen Bereich liegen.
Übrigens: Bis März 2024 gehörte statt INP der Messwert First Input Delay (FID) zu den Core Web Vitals. Am 12. März 2024 hat INP ihn abgelöst, weil INP nicht nur die erste, sondern alle Interaktionen während eines Besuchs berücksichtigt.
Weitere Messwerte: FCP und TTFB
In PageSpeed Insights tauchen neben den drei Kernwerten weitere Messwerte auf. Sie gehören nicht zu den Core Web Vitals, helfen aber bei der Fehlersuche:
- First Contentful Paint (FCP): Wann überhaupt der erste Inhalt sichtbar wird. Ein schlechter Wert deutet oft auf blockierende Dateien oder einen langsamen Server hin.
- Time to First Byte (TTFB): Wie lange es dauert, bis der Server die erste Antwort liefert. Ist dieser Wert hoch, hilft keine Bildoptimierung, dann liegt das Problem beim Hosting oder bei aufwendigen Berechnungen auf dem Server.
Sind die Core Web Vitals ein Rankingfaktor?
Ja, aber kein übermächtiger. Google schreibt, dass die Core Web Vitals von seinen Rankingsystemen genutzt werden. Gleichzeitig betont Google, dass die Suche immer die relevantesten Inhalte zeigen will, auch wenn die Nutzererfahrung in einzelnen Punkten nicht perfekt ist. Gute Werte helfen vor allem, wenn mehrere Seiten ähnlich hilfreiche Inhalte bieten.
Für dein Geschäft zählen die Werte trotzdem doppelt: Eine Seite, die schnell lädt, sofort reagiert und nicht springt, wirkt professionell und führt Besucher eher zur Anfrage. Wer dagegen auf dem Smartphone mehrere Sekunden auf das erste Bild wartet oder versehentlich den falschen Button trifft, weil sich der Inhalt verschoben hat, ist schnell wieder weg, und zwar meist zur Konkurrenz.
Wo du deine Werte findest
- Google Search Console: Der Bericht „Core Web Vitals“ zeigt die Felddaten aller Seiten deiner Website, getrennt nach Mobil und Desktop, und gruppiert Seiten mit ähnlichen Problemen.
- PageSpeed Insights: Für einzelne Seiten mit Feld- und Labdaten sowie konkreten Verbesserungsvorschlägen.
- Chrome-Entwicklertools: Der Bereich „Performance“ zeigt Messwerte live und markiert zum Beispiel einzelne Layout-Verschiebungen.
Hat deine Website wenige Besucher, fehlen oft Felddaten. Dann helfen die Labdaten aus PageSpeed Insights, Probleme zu finden. Sie bilden echte Besuche aber nur annähernd ab.
LCP verbessern: den Hauptinhalt schneller laden
Laut web.dev setzt sich die LCP-Zeit aus vier Teilen zusammen: der Antwortzeit des Servers, der Verzögerung, bis das wichtigste Bild überhaupt angefordert wird, der Ladezeit dieses Bildes und der Zeit, bis es angezeigt wird. Daraus ergeben sich die wichtigsten Maßnahmen:
- Bilder optimieren: Das Hauptbild, meist das große Foto ganz oben, in passender Größe und in einem modernen Format wie WebP oder AVIF ausliefern und stark komprimieren.
- Hauptbild früh laden: Das Bild direkt im HTML einbinden, mit fetchpriority="high" kennzeichnen oder per Preload vorab laden.
- Kein Lazy Loading für das Hauptbild: Verzögertes Laden ist für Bilder weiter unten gedacht, nicht für den Blickfang oben.
- Rendering nicht blockieren: Große CSS-Dateien verkleinern, Skripte im Kopfbereich vermeiden.
- Server beschleunigen: Weiterleitungen reduzieren, Inhalte zwischenspeichern und bei Bedarf über ein CDN ausliefern.
INP verbessern: schneller auf Eingaben reagieren
Jede Interaktion besteht laut web.dev aus drei Phasen: der Verzögerung, bis der Browser die Eingabe bearbeiten kann, der Verarbeitung selbst und der Zeit, bis das Ergebnis sichtbar ist. Typische Bremsen sind lange JavaScript-Aufgaben, die den Browser blockieren. Diese Maßnahmen helfen:
- Weniger JavaScript: Slider, Animationen, Tracking und Widgets entfernen, die keinen echten Nutzen bringen.
- Lange Aufgaben aufteilen: Rechenintensive Arbeit in kleinere Schritte zerlegen, damit der Browser zwischendurch reagieren kann.
- Nur das Nötige sofort erledigen: Nach einem Klick zuerst die sichtbare Reaktion zeigen, alles andere später ausführen.
- Seitenstruktur schlank halten: Sehr viele HTML-Elemente machen jede Aktualisierung langsamer, wie es bei manchen Page-Buildern passiert.
CLS verbessern: Inhalte stabil halten
Nichts ist ärgerlicher als ein Button, der sich verschiebt, gerade wenn man darauf tippen will. Die häufigsten Ursachen und Lösungen laut web.dev:
- Bilder und Videos ohne Maße: Immer Breite und Höhe angeben oder das Seitenverhältnis per CSS festlegen, damit der Platz reserviert ist.
- Werbung, Einbettungen und iFrames: Platz im Voraus reservieren, etwa mit einer Mindesthöhe.
- Nachgeladene Inhalte: Banner, Hinweise oder Formulare nicht oberhalb bestehender Inhalte einfügen, sondern Platz reservieren oder sie als Überlagerung einblenden.
- Webfonts: Passende Ersatzschriften wählen und wichtige Schriften früh laden, damit der Text beim Wechsel nicht springt.
- Animationen: Mit transform animieren statt mit Eigenschaften, die das Layout neu berechnen lassen.
Sonderfall Cookie-Banner
Cookie- und Einwilligungsbanner sind ein häufig übersehener Grund für schlechte Werte. Sie werden oft per Skript nachgeladen und können gleich zwei Messwerte verschlechtern:
- CLS: Schiebt das Banner beim Erscheinen den Inhalt nach unten, entsteht eine Layout-Verschiebung. Besser ist ein Banner, das als Überlagerung erscheint und keinen Inhalt verschiebt.
- INP und LCP: Umfangreiche Einwilligungs-Tools laden viel JavaScript, bevor die Seite reagieren kann. Ein schlankes, selbst gehostetes Banner belastet die Seite deutlich weniger.
Prüfe außerdem, ob alle eingebundenen Dienste wirklich nötig sind. Jeder Dienst, der wegfällt, spart Ladezeit und vereinfacht gleichzeitig deine Datenschutzerklärung.
Typische Probleme nach Website-Art
- Baukasten-Websites: Viele Funktionen werden standardmäßig geladen, auch wenn sie nicht gebraucht werden. Der Einfluss auf den Code ist begrenzt.
- WordPress mit Page-Builder: Zahlreiche Plugins und verschachtelte Layouts erzeugen viel JavaScript und große Seitenstrukturen. Das belastet besonders INP.
- Seiten mit vielen externen Diensten: Chat-Widgets, eingebettete Karten, Videos und Tracking laden zusätzliche Skripte und verschieben Inhalte.
- Bildlastige Seiten: Unkomprimierte Fotos ohne feste Maße verschlechtern LCP und CLS gleichzeitig.
- Schlank programmierte Websites: Mit wenig JavaScript, optimierten Bildern und festen Maßen erreichen sie die Grenzwerte meist ohne große Zusatzarbeit.
So gehst du vor: in 5 Schritten
- Stand ermitteln: Search Console öffnen und prüfen, welche Seiten mobil als „schlecht“ oder „Optimierung erforderlich“ markiert sind.
- Ursache finden: Eine betroffene Seite in PageSpeed Insights testen und die Diagnose lesen. Welcher der drei Werte ist das Problem?
- Größte Hebel zuerst: Meist sind das Bilder, überflüssige Skripte und fehlende Bildmaße.
- Änderungen umsetzen und testen: Nach jeder Änderung erneut messen, im Labor sofort, in den Felddaten nach einigen Wochen.
- Beobachten: Die Felddaten beziehen sich auf die letzten 28 Tage. In der Search Console kannst du die Prüfung einer Problemgruppe neu anstoßen, wenn du sie behoben hast.
Häufige Irrtümer
- „Ein Laborwert von 100 reicht.“ Für Google zählen die Felddaten echter Nutzer. Ein guter Laborwert ist ein Hinweis, keine Garantie.
- „Desktop ist wichtiger.“ Google verwendet für Indexierung und Ranking die mobile Version. Die mobilen Werte sind entscheidend.
- „Gute Werte bringen mich auf Platz 1.“ Die Core Web Vitals sind ein Faktor unter vielen. Relevante Inhalte bleiben wichtiger.
- „Das betrifft nur große Websites.“ Gerade kleine Websites mit Baukasten oder vielen Plugins haben oft schlechte Werte und verschenken damit Anfragen.
Fazit: Drei Werte, die Besucher spüren
- LCP misst das Laden, INP die Reaktion, CLS die Stabilität einer Seite.
- Gut sind LCP bis 2,5 Sekunden, INP bis 200 Millisekunden und CLS bis 0,1 am 75. Perzentil.
- Google nutzt die Werte im Ranking, Relevanz bleibt aber wichtiger.
- Die größten Hebel sind optimierte Bilder, weniger JavaScript und reservierter Platz für alle Inhalte.
Mein Rat: Schau einmal pro Monat in den Core-Web-Vitals-Bericht der Search Console. Wenn dort dauerhaft Rot steht und die Ursache tief in Theme oder Page-Builder steckt, ist ein schlanker Neubau oft der schnellere und auf Dauer günstigere Weg.
Quellen
- web.dev: Web Vitals
- web.dev: INP wird am 12. März 2024 zu einem Core Web Vital
- web.dev: Largest Contentful Paint optimieren
- web.dev: Interaction to Next Paint optimieren
- web.dev: Cumulative Layout Shift optimieren
- Google Search Central: Nutzerfreundlichkeit der Seite
- Google for Developers: Über PageSpeed Insights
