Core Web Vitals sind drei Messwerte für Ladegeschwindigkeit, Interaktivität und visuelle Stabilität: LCP, INP und CLS. Der schnellste erste Schritt ist ein Blick in den Core Web Vitals-Bericht der Search Console oder in PageSpeed Insights. Dort siehst du sofort, ob deine Seiten am 75. Perzentil im grünen Bereich liegen oder Nachbesserungen brauchen.

Kurz gesagt:

  • Sind Ihre Core Web Vitals im 75. Perzentil nicht im grünen Bereich, sollten Sie zuerst die Serverantwortzeit und TTFB optimieren.
  • Labordaten aus Lighthouse oder PageSpeed Insights liefern nur Hilfestellung, während echte Nutzerwerte aus CrUX entscheidend für die Bewertung sind.
  • Für die Analyse genügen meist PageSpeed Insights und Chrome DevTools, während WebPageTest bei gezieltem Testszenario hilft.
  • Die wichtigsten Hebel sind beim LCP die Reduktion der TTFB und moderne Bildformate, beim INP die Vermeidung langer Tasks und Web Workers.
  • Kontinuierliches RUM-Monitoring mit der web-vitals Bibliothek ist essenziell, um Performance-Verbesserungen nachhaltig zu sichern und späte Verschlechterungen zu erkennen.

Inhaltsverzeichnis

Was sind Core Web Vitals? Metriken, Grenzwerte und 75. Perzentil‑Logik

LCP (Largest Contentful Paint) misst, wie lange das größte sichtbare Element braucht, bis es vollständig geladen ist. Meist ist das ein Hero-Bild, ein Textblock oder ein Video-Vorschaubild. INP (Interaction to Next Paint) hat 2024 den alten Messwert FID ersetzt und bewertet, wie schnell eine Seite auf Klicks, Taps oder Tastatureingaben reagiert, und zwar über die gesamte Sitzung hinweg, nicht nur beim ersten Klick. CLS (Cumulative Layout Shift) zeigt, wie stark sich Elemente während des Ladens verschieben. Ein nachträglich eingeblendetes Werbebanner, das den Text nach unten drückt, treibt diesen Wert nach oben.

Google bewertet alle drei Metriken am 75. Perzentil realer Nutzerzugriffe.

  • LCP: gut ≤ 2,5 Sekunden, verbesserungswürdig bis 4 Sekunden, darüber schlecht
  • INP: gut ≤ 200 Millisekunden, verbesserungswürdig bis 500 Millisekunden, darüber schlecht
  • CLS: gut ≤ 0,1, verbesserungswürdig bis 0,25, darüber schlecht

Wie misst Google Core Web Vitals wirklich?

Google unterscheidet strikt zwischen zwei Datenarten. Feld-Daten stammen aus dem Chrome User Experience Report (CrUX), also von echten Chrome-Nutzern, die deine Seite tatsächlich besucht haben. Labor-Daten kommen aus Tools wie Lighthouse oder PageSpeed Insights, die eine Seite unter simulierten Bedingungen einmalig laden. Nur die Feld-Daten fließen in die offizielle Bewertung ein. Ein Lighthouse-Score von 100 bedeutet also nicht automatisch, dass deine Nutzer eine gute Erfahrung machen.

Der Core Web Vitals-Bericht in der Search Console gruppiert URLs nach ähnlichem Template und trennt nach Formfaktor, also Mobilgerät und Desktop getrennt. So siehst du auf einen Blick, welche Seitengruppe betroffen ist, statt jede URL einzeln zu prüfen.

Wichtig für die SEO-Einordnung: Core Web Vitals wirken vor allem als Tiebreaker im Ranking, nicht als Hauptfaktor. Bei zwei inhaltlich gleichwertigen Seiten gewinnt die schnellere. Guter Inhalt und Relevanz bleiben trotzdem entscheidender als jede Millisekunde Ladezeit.

  • CrUX liefert echte Nutzerdaten, aggregiert über 28 Tage
  • Lighthouse und PageSpeed Insights liefern Labor-Werte zur Diagnose
  • Die Search Console zeigt betroffene URL-Gruppen nach Formfaktor

Welche Tools brauchst du für die Core Web Vitals Analyse?

Für den Einstieg reicht PageSpeed Insights fast immer aus. Es zeigt Feld-Daten (falls genug CrUX-Verkehr vorliegt) und Labor-Daten in einem Bericht. Chrome DevTools eignet sich, wenn du im laufenden Betrieb debuggen willst, etwa um herauszufinden, welches Skript einen langen Task blockiert. WebPageTest ist die richtige Wahl, wenn du gezielt Bedingungen simulieren willst, zum Beispiel ein Mittelklasse-Smartphone auf einer 3G-Verbindung in einer bestimmten Region.

Ein praktikabler Mess-Workflow sieht so aus:

  1. Repräsentative Seiten auswählen (Startseite, Kategorieseite, Produktseite, Checkout)
  2. Labor-Test mit PageSpeed Insights oder WebPageTest zur ersten Diagnose
  3. Feld-Daten aus der Search Console oder direkt über die CrUX API abgleichen
  4. Für Trend-Analysen über Zeit CrUX in BigQuery abfragen, besonders bei größeren Seiten mit viel Traffic
  5. Eigene Real User Monitoring-Daten mit der web-vitals JavaScript-Bibliothek erfassen

Die web-vitals Bibliothek ist die von Google empfohlene, sehr schlanke API, um genau die Feldwerte zu messen, die auch in die Bewertung einfließen. Sie ergänzt CrUX, weil sie dir Daten in Echtzeit liefert, statt auf die 28-Tage-Aggregation zu warten.

Optimierungshebel nach Metrik: Was wirklich hilft

Bei LCP fängt fast alles bei der Time to First Byte (TTFB) an. Ein langsamer Hosting-Server oder ein fehlendes CDN kosten dich hier oft mehr Zeit als jede Bildoptimierung danach. Prüfe also zuerst die Serverantwortzeit, bevor du dich um Bilder kümmerst. Danach folgen: das größte Element per preload priorisieren, moderne Bildformate wie WebP oder AVIF nutzen und kritisches CSS inline einbinden, damit der Browser nicht auf externe Stylesheets warten muss.

Bei INP geht es um lange Tasks im Haupt-Thread. Jedes JavaScript, das länger als 50 Millisekunden blockiert, verzögert die Reaktion auf Klicks. Code-Splitting reduziert die Menge an Skript, die beim ersten Laden ausgeführt wird. Web Workers verlagern rechenintensive Aufgaben in einen separaten Thread. Und Event-Handler, die bei jedem Tastenanschlag komplexe Berechnungen auslösen, solltest du entprellen (debouncing).

Bei CLS liegt die Ursache fast immer in fehlenden Dimensionen. Bilder und iFrames ohne festgelegte Breite und Höhe verschieben den Text, sobald sie geladen sind. Reserviere also immer Platz, auch für dynamisch nachladende Inhalte wie Werbebanner oder Cookie-Banner.

  • LCP: TTFB senken, Preload nutzen, moderne Bildformate, Critical CSS inline
  • INP: lange Tasks vermeiden, Code-Splitting, Web Workers, Debouncing
  • CLS: feste Dimensionen für Bilder und iFrames, Platzhalter für dynamische Inhalte

Profi-Tipp: Behebe Layout-Shifts nicht auf einer einzelnen Produktseite, sondern im Template. Eine fehlende Bildhöhe im Header-Baustein wirkt sich auf tausende Seiten gleichzeitig aus, also lohnt sich die Korrektur an der Quelle.

Wie baust du einen Monitoring‑Workflow mit RUM auf?

Wie baust du einen Monitoring‑Workflow mit RUM auf? — overview diagram

Ein einmaliger PageSpeed-Check reicht nicht. Neue Inhalte, zusätzliche Skripte oder eine frisch gestartete Werbekampagne können deine Werte jederzeit wieder verschlechtern, deshalb gehört Monitoring in die Deploy-Pipeline und nicht nur in den Quartalsbericht.

Die web-vitals Bibliothek lässt sich direkt in die Website einbinden und sendet jede Messung an Google Analytics 4, den Google Tag Manager oder einen eigenen Endpoint. So entsteht echtes Real User Monitoring (RUM), das die tatsächliche Erfahrung deiner Besucher abbildet, nicht nur eine simulierte Momentaufnahme.

  • Alerting-Regel definieren: Warnung, wenn das 75. Perzentil einer Metrik den Schwellenwert überschreitet
  • Reporting-Cadence festlegen, etwa wöchentlich für Trends und sofort bei kritischen Ausreißern
  • Neue Deployments automatisch gegen einen Performance-Schwellenwert prüfen, bevor sie live gehen

Wichtig: Die 75. Perzentil-Logik bedeutet, dass ein einzelner sehr schlechter Ladevorgang deinen Gesamtwert kaum verändert. Ein durchgängig mittelmäßiges Erlebnis für die Mehrheit deiner Besucher schadet dir dagegen deutlich mehr als vereinzelte Ausreißer.

Wie priorisierst du die Optimierung richtig?

Die Reihenfolge TTFB → LCP → INP → CLS hat sich in der Praxis bewährt, weil eine langsame Serverantwort jede nachfolgende Metrik verzerrt. Es bringt wenig, an Bildformaten zu feilen, wenn der Server schon zwei Sekunden für die erste Antwort braucht.

Arbeite auf Template-Ebene statt auf einzelnen URLs. Wähle repräsentative Seiten pro Template aus, etwa eine typische Kategorieseite statt aller 500 Kategorieseiten einzeln zu prüfen. Die Zuständigkeiten verteilen sich meist so:

  • Entwicklung: Code-Splitting, Bildoptimierung, Server-Konfiguration
  • DevOps: CDN, Caching-Regeln, Deploy-Pipeline-Checks
  • Marketing: Priorisierung nach Geschäftsrelevanz, Reporting an Stakeholder

Was Neomarketing bei Core Web Vitals immer wieder beobachtet

Core Web Vitals sind kein Projekt, das man einmal abschließt und dann vergisst. Jedes neue Plugin, jedes zusätzliche Tracking-Skript und jede Werbekampagne kann die Werte wieder kippen. Der häufigste Fehler, den wir bei Kunden sehen, ist fehlendes RUM: Teams optimieren monatelang gegen Labor-Werte in PageSpeed Insights, ohne je zu prüfen, ob die echten Besucher davon etwas spüren.

Der zweite Klassiker ist die Fixierung auf Einzelseiten statt Templates. Wer eine Produktseite perfektioniert, aber die zugrunde liegende Theme-Datei nicht anfasst, hat am Ende nur eine von tausend Seiten wirklich verbessert. Eine Anleitung zur Website-Performance im Shop-Kontext zeigt, wie sich das systematisch angehen lässt. Wer die Zusammenhänge noch weiter vertiefen will, findet auch bei Outwork eine ergänzende Einordnung zu Core Web Vitals im Ranking-Kontext.

— Patrick

Wie Neomarketing dich bei Core Web Vitals unterstützt

Es gibt Agenturen, die als Alternative zum eigenen, oft überlasteten Entwicklerteam Core Web Vitals unterstützen: Statt monatelang zwischen Google-Dokumentation und Ticket-Backlog zu pendeln, kannst du ein RUM-Setup, laufendes Monitoring und konkrete Optimierungs-Sprints aus einer Hand erhalten, direkt gekoppelt an deine Google-Tool-Landschaft.

Neomarketing

Unser Team richtet die web-vitals Erfassung ein, verknüpft sie mit Google Analytics 4 und liefert dir regelmäßige Reports statt einmaliger Momentaufnahmen. Das lohnt sich besonders für Online-Shops, bei denen jede Sekunde Ladezeit Einfluss auf das Umsatzpotenzial haben kann. Wenn du wissen willst, wo deine Seiten aktuell stehen und welche Google-Ads-Kampagnen davon profitieren würden, sichere dir die kostenlose Google Ads Analyse mit Gutschein und starte mit einer klaren Bestandsaufnahme statt mit Vermutungen.

Quellen

Die offizielle Grundlage liefert Google Search Central mit den aktuellen Grenzwerten. web.dev erklärt die Metriken im Detail, während die Search Console-Hilfe den Bericht selbst erläutert. Für die technische Umsetzung mit der web-vitals Bibliothek lohnt sich der Leitfaden zur Vitals-Messung als Ausgangspunkt.

Empfehlungen

KI-Hinweis: Dieser Beitrag wurde mit Unterstützung von künstlicher Intelligenz erstellt. Als KI-generiert gekennzeichnete Bilder wurden mit KI erzeugt. Mehr zum Einsatz von KI