Was messen die Core Web Vitals?
Kurzantwort: LCP misst die Darstellung des größten sichtbaren Inhaltselements, INP die Reaktion nach einer Interaktion und CLS die Layoutstabilität. Google empfiehlt die Bewertung am 75. Perzentil, getrennt für Mobilgeräte und Computer.
Eine Website kann schön und gut geschrieben sein und trotzdem unangenehm zu bedienen bleiben, wenn Inhalte spät erscheinen, Reaktionen langsam erfolgen oder Elemente sich verschieben.
Google nutzt die Core Web Vitals in seinen Systemen zur Nutzererfahrung auf Seiten. Zugleich stellt Google klar, dass gute Werte keinen ersten Platz garantieren und die Relevanz der Inhalte entscheidend bleibt. Diese Kennzahlen sind daher ein Teil eines SEO-Audits und keine Rankingformel.
75.
Google empfiehlt, LCP, INP und CLS am 75. Perzentil der Ladevorgänge zu bewerten, getrennt für Mobilgeräte und Computer.
Die drei Kennzahlen müssen gemeinsam und mit Bezug zur jeweiligen Seite betrachtet werden. Ein Labortest hilft bei der Diagnose. Felddaten zeigen bei ausreichendem Datenvolumen, was echte Besucher erlebt haben.
Die 3 Core Web Vitals einfach erklärt
- LCP: der HauptinhaltDer Zeitpunkt, zu dem das größte sichtbare Element erscheint.
- INP: die Reaktion auf eine AktionDie Zeit bis zur nächsten visuellen Aktualisierung.
- CLS: die StabilitätUnerwartete Verschiebungen des Inhalts während des Ladens.
LCP = Largest Contentful Paint (Darstellung des größten Inhaltselements)
Einfach gesagt: Wie schnell lädt der Hauptinhalt Ihrer Seite?
Wenn Sie eine Website öffnen, sehen Sie zunächst eine leere Fläche. Dann erscheinen nach und nach Bilder, Text und andere Elemente. LCP bezeichnet den Zeitpunkt, zu dem das größte Element sichtbar wird, meist das große Einstiegsbild oder die Hauptüberschrift.
Empfohlener Grenzwert für „gut“: höchstens 2,5 Sekunden am 75. Perzentil.
Konkretes Beispiel: Der Hauptinhalt Ihres Blogartikels erscheint in einem Test nach 1,2 Sekunden oder nach 4 Sekunden. Felddaten zeigen, was Besucher tatsächlich erleben.
Identifizieren Sie zuerst das tatsächlich als LCP gemessene Element. Handelt es sich um ein Bild, prüfen Sie Format, Abmessungen, Ladepriorität und Antwortzeit, bevor Sie den Rest der Seite ändern.
INP = Interaction to Next Paint (Interaktivität)
Einfach gesagt: Wie schnell reagiert Ihre Website, wenn Sie klicken, tippen oder eine Aktion ausführen?
Nach einem Klick auf eine Schaltfläche vergeht Zeit, bis etwas sichtbar passiert. INP misst diese Verzögerung.
Empfohlener Grenzwert für „gut“: höchstens 200 Millisekunden am 75. Perzentil.
Konkretes Beispiel: Sie klicken auf „In den Warenkorb“ und die nächste visuelle Aktualisierung erfolgt im Test nach 150 ms oder nach 800 ms.
CLS = Cumulative Layout Shift (kumulative Layoutverschiebung)
Einfach gesagt: Bewegt sich Ihre Seite beim Laden?
Stellen Sie sich vor: Sie lesen einen Text, plötzlich erscheint darüber eine Anzeige, der Text rutscht nach unten und Sie verlieren Ihre Stelle. Frustrierend, oder? Das erfasst CLS.
Empfohlener Grenzwert für „gut“: höchstens 0,1 am 75. Perzentil.
Konkretes Beispiel: Der Inhalt Ihrer Seite bleibt mit einem gemessenen CLS von 0,02 stabil oder verschiebt sich bei einem CLS von 0,5.
Ein Bild ohne angegebene Abmessungen kann Inhalte beim Laden verschieben. Mit Breite und Höhe kann der Browser den Platz vorab reservieren.
Warum sind sie so wichtig?
Google-Suche
Die Core Web Vitals gehören zu den Signalen für die Nutzererfahrung auf Seiten. Sie sagen nicht voraus, welche von zwei Seiten besser rankt, und ersetzen keine relevanten Inhalte.
Conversion
Die Leistung kann das Besucherverhalten beeinflussen, doch kein allgemeiner Prozentsatz gilt für alle Websites. Messen Sie die Wirkung mit Ihren eigenen Ereignissen, einem vergleichbaren Zeitraum und ausreichendem Datenvolumen.
Mobilgeräte
Google verwendet hauptsächlich die mobile Inhaltsversion zur Indexierung. Prüfen Sie dort deshalb sowohl das Vorhandensein nützlicher Inhalte als auch ihre Zugänglichkeit und die tatsächlichen Ladebedingungen.
So messen Sie Ihre Core Web Vitals
PageSpeed Insights (kostenlos, offiziell von Google)
Öffnen Sie pagespeed.web.dev und fügen Sie Ihre URL ein. Je nach Datenlage sehen Sie:
- CrUX-Felddaten, wenn für die URL oder den Ursprung ausreichend Daten vorliegen
- einen zum Analysezeitpunkt ausgeführten Lighthouse-Labortest
- ob Ihre Werte grün (gut), orange (verbesserungsbedürftig) oder rot (schlecht) sind
- Optimierungsvorschläge, die Sie in Ihrem Kontext prüfen sollten
Google Search Console (kostenlos, für Ihre gesamte Website)
Search Console gruppiert URLs nach ihren Felddaten, sofern für die Website genügend Informationen verfügbar sind.
Chrome DevTools, Bereich „Performance“ (kostenlos)
Öffnen Sie den Bereich „Performance“ in Chrome DevTools, um lokale Messungen und, falls verfügbar, Felddaten zu prüfen. Seit Januar 2025 ersetzt er die frühere Web-Vitals-Erweiterung, wie die Chrome-Dokumentation erläutert.
Lighthouse (kostenlos, in Chrome integriert)
Öffnen Sie DevTools (F12), klicken Sie auf „Lighthouse“ und starten Sie ein Audit. Sie erhalten eine Gesamtbewertung und Details.
Lösungen zur LCP-Optimierung
Problem 1: Zu großes Einstiegsbild
Lösung: Passen Sie Dateigröße, Format und Abmessungen des Bildes an die tatsächliche Darstellung an und messen Sie erneut unter vergleichbaren Bedingungen.
- Nutzen Sie TinyPNG oder ImageOptim
- Nutzen Sie moderne Formate, etwa WebP statt JPG
- Passen Sie Bilder an die Anzeigegröße an: Ein Bild mit 5000 × 3000 Pixeln ist nicht nötig, wenn es mit 800 × 600 angezeigt wird
Problem 2: Zu viel bremsendes JavaScript
Lösung: Laden Sie JavaScript verzögert, also später statt direkt beim Start.
- Fügen Sie nicht kritischen Skripten das Attribut
deferhinzu - Verwenden Sie
asyncfür Bestandteile, die warten können
Problem 3: Der Server antwortet langsam (TTFB, Time to First Byte)
Lösung:
- Messen Sie die Antwortzeit, bevor Sie über einen Hostingwechsel entscheiden
- Nutzen Sie ein CDN wie Cloudflare oder Fastly, wenn Zielgruppenstandorte und Architektur es rechtfertigen
- Speichern Sie Ihre Seiten im Cache, bei WordPress gegebenenfalls mit einem Cache-Plugin
Lösungen zur INP-Optimierung (Interaktivität)
Problem 1: Lange blockierende JavaScript-Aufgaben
Lösung: Identifizieren Sie lange Aufgaben, entfernen Sie unnötige Arbeit und teilen Sie die Verarbeitung auf, damit der Browser zwischen den Schritten wieder reagieren kann.
Problem 2: Zu viel Verarbeitung beim Klick
Lösung: Vereinfachen Sie Interaktionen. Löst ein Klick auf eine Schaltfläche 10 Vorgänge aus, ist das zu viel. Führen Sie sofort nur das unmittelbar Nötige aus.
Problem 3: Zu umfangreiche JavaScript-Bibliotheken
Lösung: Verwenden Sie schlankere oder weniger Bibliotheken.
Lösungen zur CLS-Optimierung (Layoutverschiebungen)
Problem 1: Bilder ohne festgelegte Abmessungen
Lösung: Geben Sie Höhe und Breite Ihrer Bilder immer im HTML an. So wird der Platz vor dem Laden reserviert.
<img src="photo.jpg" width="800" height="600" alt="...">
Problem 2: Nachträglich geladene Inhalte wie Anzeigen und Einbettungen
Lösung: Reservieren Sie auch für diese dynamischen Inhalte Platz.
Problem 3: Wechselnde Schriftarten
Lösung: Verwenden Sie font-display: swap, um den Text während des Ladens mit einer Ersatzschrift anzuzeigen. Der Austausch kann den Text dennoch verschieben: Wählen Sie eine Ersatzschrift mit ähnlichen Metriken und messen Sie CLS nach dem Wechsel.
Prioritäten: Wo anfangen?
- Schritt 1: Erfassen Sie eine Ausgangslage mit Feld- und Labordaten samt Messbedingungen.
- Schritt 2: Identifizieren Sie die Kennzahl und das Element, die tatsächlich für das Problem verantwortlich sind.
- Schritt 3: Ändern Sie jeweils nur eine Sache und prüfen Sie anschließend Darstellung und Funktionen.
- Schritt 4: Wiederholen Sie die Tests und beobachten Sie Felddaten über einen ausreichend langen Zeitraum.
Tools zur Optimierung
Cloudflare und andere CDNs
Ein CDN und Cache-Regeln können bestimmte Übertragungszeiten verkürzen. Die Wirkung hängt von Ursprungsserver, Inhalt, Regeln und Besucherstandorten ab. Messen Sie vorher und nachher.
WordPress: WP Rocket oder LiteSpeed Cache
Unter WordPress können diese Erweiterungen bei Cache-Einstellungen und bestimmten Optimierungen helfen. Testen Sie jede Option, denn die Kompatibilität hängt vom Theme und anderen Erweiterungen ab.
Vercel oder Netlify (für statische Websites/Next.js)
Diese Plattformen bieten nützliche Bausteine für Bereitstellung und Caching. Code, Medien und Drittanbieterskripte bleiben entscheidend.
Audit oder Optimierung: Welcher nächste Schritt passt?
Um die Leistung in ein Gesamtprojekt einzuordnen, sehen Sie sich unseren Ansatz zur Website-Erstellung an. Ist ein Problem bereits gemessen, geht es zur Optimierung von Performance und Core Web Vitals. Ist die Ursache unklar, beginnen Sie mit einem Performance-Audit. Der Plan basiert auf einer erfassten Ausgangslage und verspricht keinen allgemeingültigen Punktwert.
Fazit: Sie können das schaffen
Die Core Web Vitals sind keine komplizierte Magie. LCP bedeutet schnell laden. INP bedeutet schnell reagieren. CLS bedeutet stabil bleiben. Drei einfache Dinge.
Auch die Lösungen sind verständlich: Bilder komprimieren, JavaScript sinnvoll laden und Platz für dynamische Inhalte reservieren.
Die Dauer hängt von der Ursache ab. Ein Bild oder eine Cache-Regel lässt sich oft schnell korrigieren, während Architektur oder Drittanbieterskripte mehr Arbeit erfordern. Hat die Website zu viele technische Altlasten, kann ein Relaunch sinnvoll sein.
Beginnen Sie heute. Messen Sie mit PageSpeed Insights, optimieren Sie jeweils eine Sache und messen Sie erneut. Darauf kommt es an.