Was sind die Core Web Vitals? LCP, INP und CLS

01Was sind die Core Web Vitals?

Ob eine Seite “schnell” ist, lässt sich nicht mit einer einzigen Zahl beschreiben. Für Besucher zählt, wie schnell Inhalte erscheinen, wie zügig die Seite auf einen Tipp auf eine Schaltfläche reagiert und ob beim Lesen nichts plötzlich verrutscht. Die Core Web Vitals bestehen aus Metriken, die genau diese drei Erfahrungen getrennt voneinander messen.

Google nutzt diese Metriken als Teil der Page-Experience-Signale. Allein entscheiden sie nicht über das Ranking; bei zwei inhaltlich starken Seiten kann aber die mit dem besseren Nutzererlebnis einen Vorsprung bekommen. Der eigentliche Effekt liegt im Nutzerverhalten: Auf schnellen, stabilen Seiten bleiben Besucher länger und konvertieren häufiger.

Metriken entwickeln sich weiter. So wurde die früher für Interaktionen genutzte Metrik FID durch INP ersetzt, die alle Interaktionen besser abbildet. Es lohnt sich daher, aktuelle Definitionen in der offiziellen Dokumentation auf web.dev nachzulesen.

02Tabelle der Schwellenwerte

Für jede Metrik legt Google drei Bereiche fest: gut, verbesserungswürdig und schlecht. Damit eine Seite als “gut” gilt, muss der Wert bei mindestens 75 Prozent der Besuche im guten Bereich liegen. Mobilgeräte und Desktop werden getrennt bewertet.

03Was ist LCP?

LCP (Largest Contentful Paint) ist die Zeit, bis das größte sichtbare Inhaltselement beim Seitenaufbau geladen und dargestellt ist, meist das Hauptbild, ein Videocover oder ein großer Überschriftenblock. Die Metrik kommt dem Gefühl “die Seite ist da” am nächsten.

Was den LCP verschlechtert

• Langsame Serverantwort (hohe TTFB)
• Ein zu großes, unkomprimiertes oder veraltetes Hauptbild
• Ein Hauptbild, das auf verzögertes Laden (Lazy Loading) gesetzt ist
• CSS- und JavaScript-Dateien, die die Darstellung der Seite blockieren
• Hauptinhalte, die erst nachträglich per JavaScript erzeugt werden

So verbessern Sie den LCP

Liefern Sie das Hauptbild im Format WebP oder AVIF und in passender Größe aus, nehmen Sie es vom verzögerten Laden aus und laden Sie es bei Bedarf mit hoher Priorität. Verkürzen Sie die Serverantwortzeit mit Caching und CDN und stellen Sie unkritische Skripte zurück.

<img src="/img/hero.webp" alt="Hauptbild" width="1200" height="630" fetchpriority="high">

04Was ist INP?

INP (Interaction to Next Paint) misst, wie schnell die Seite auf Klicks, Tipp-Gesten und Tastatureingaben der Nutzer sichtbar reagiert. Gemeldet wird eine der langsamsten Interaktionen während des Besuchs; bewertet wird also nicht ein einzelner schneller Klick, sondern die Reaktionsqualität insgesamt.

Tippen Sie auf den Menü-Button, es passiert einen Moment lang nichts, und dann öffnet sich das Menü plötzlich? Diese Verzögerung schlägt sich im INP nieder. Die Ursache ist meist JavaScript-Code, der den Hauptthread des Browsers lange blockiert.

So verbessern Sie den INP

• Teilen Sie lang laufende JavaScript-Aufgaben in kleine Teile auf.
• Entfernen Sie ungenutzte und unnötige Skripte und reduzieren Sie Code von Drittanbietern.
• Verschieben Sie aufwendige Arbeiten nach der Interaktion (etwa das Senden von Analysedaten) auf später.
• Vermeiden Sie eine sehr große und komplexe Seitenstruktur (DOM).
• Geben Sie Nutzern sofort visuelles Feedback und erledigen Sie die schwere Arbeit danach.

05Was ist CLS?

CLS (Cumulative Layout Shift) misst, wie stark sich Seiteninhalte unerwartet verschieben. Typische Beispiele für einen hohen CLS: Beim Lesen rutscht der Text nach unten, weil oben eine Anzeige verspätet nachlädt, oder eine Schaltfläche springt weg, kurz bevor Sie sie anklicken.

Der CLS ist keine Zeitangabe, sondern ein einheitenloser Wert. Berücksichtigt werden die Größe des verschobenen Elements und die Verschiebungsstrecke. Änderungen, die durch eine eigene Aktion des Nutzers entstehen (etwa das Aufklappen eines Akkordeons), zählen nicht dazu.

So verbessern Sie den CLS

• Geben Sie allen Bildern und Videos Breite und Höhe oder ein festes Seitenverhältnis.
• Reservieren Sie vorab Platz für Anzeigen, Karten und eingebettete Inhalte.
• Fügen Sie über bestehenden Inhalten nachträglich keine Banner oder Hinweise ein.
• Laden Sie Webfonts mit font-display: swap und halten Sie die Maße der Ersatzschrift nah am Original.
• Nutzen Sie bei Animationen die Eigenschaft transform statt der Positionsangabe.

06Felddaten und Labordaten

Die Bewertung der Core Web Vitals beruht auf Felddaten, die bei echten Chrome-Nutzern erhoben werden. Diese Daten werden über den Chrome User Experience Report (CrUX) als Durchschnitt der letzten 28 Tage bereitgestellt. Für Seiten mit zu wenig Traffic sind Felddaten unter Umständen nicht verfügbar.

Labordaten dagegen sind Ergebnisse, die Werkzeuge wie Lighthouse in einer kontrollierten Umgebung mit einem einzelnen Test erzeugen. Sie sind sehr wertvoll, um Probleme zu finden und Korrekturen sofort auszuprobieren, bilden die Vielfalt der Geräte und Verbindungen echter Nutzer aber nicht vollständig ab. Metriken, die auf echten Interaktionen beruhen, wie der INP, lassen sich im Labor nicht direkt messen; stattdessen dient die Total Blocking Time (TBT) als ungefährer Anhaltspunkt.

import { onLCP, onINP, onCLS } from 'web-vitals';

function gonder(metrik) {
  console.log(metrik.name, metrik.value);
  // Hier können Sie den Wert an Ihr eigenes Analysetool senden
}

onLCP(gonder);
onINP(gonder);
onCLS(gonder);

07Fahrplan zur Verbesserung

Wer Probleme mit den Core Web Vitals löst, sollte nicht wahllos ändern, sondern systematisch vorgehen. So geht kein Aufwand verloren.

1. Öffnen Sie in der Search Console den Bericht zu den Core Web Vitals und bestimmen Sie die problematischen Seitengruppen.
2. Testen Sie aus jeder Gruppe eine Beispielseite in PageSpeed Insights und notieren Sie, welche Metrik schwach ist.
3. Setzen Sie die Lighthouse-Empfehlungen um, beginnend mit der Maßnahme mit dem größten Effekt.
4. Veröffentlichen Sie die Änderung und starten Sie in der Search Console die Validierung der Korrektur.
5. Warten Sie einige Wochen, bis die Felddaten aktualisiert sind, und vergleichen Sie die Ergebnisse.

08Core Web Vitals und SEO-Strategie

Die Core Web Vitals ersetzen SEO nicht, sie unterstützen es. Einzigartige, vertrauenswürdige Inhalte, die die Suchabsicht erfüllen, bleiben der wichtigste Faktor. Bei Seiten mit ähnlicher Inhaltsqualität kann der Unterschied in der Nutzererfahrung jedoch den Ausschlag geben, und eine gute Erfahrung erhöht die Chance, dass gewonnene Besucher auch konvertieren.

Am wirksamsten ist es, die Performance bereits in der Designphase mitzudenken. Wer leichte Komponenten, ein sauberes Layout und schlanken Code von Anfang an einplant, muss später weniger nachbessern. Diesen Ansatz setzen wir bei SEO-optimiertem Webdesign und Responsive Webdesign um; die Checkliste für die Designphase finden Sie in unserem Beitrag zum SEO-optimierten Webdesign.

Konkrete Beschleunigungsschritte beschreiben wir in unserem Ratgeber Website schneller machen, die regelmäßige Überwachung im Beitrag zur Website-Wartung. Wenn Sie Messwerte gemeinsam mit der Suchperformance regelmäßig auswerten möchten, unterstützt Sie unser Service SEO & Analyse.