Core Web Vitals: Seitentempo und SEO

Core Web Vitals sind die drei zentralen Performance-Kennzahlen, mit denen Google die tatsächliche Nutzererfahrung einer Seite misst: Ladegeschwindigkeit (LCP), Reaktionsfähigkeit bei Interaktion (INP) und visuelle Stabilität (CLS). Diese Metriken prägen sowohl, wie sich eine Seite für den Nutzer anfühlt, als auch — als kleiner, aber realer Faktor — dein Ranking in der Suche. In diesem Leitfaden erkläre ich, was jede Kennzahl bedeutet, welche Schwellenwerte du anpeilen solltest und wie du sie in der Praxis verbesserst.

Was sind Core Web Vitals und warum sind sie wichtig?

Zur Bewertung der Seitenerfahrung stützt sich Google auf echte Felddaten, die bei Chrome-Nutzern gesammelt werden (CrUX — der Chrome User Experience Report). Deine Werte werden also nicht im Labor gemessen, sondern auf den Geräten und Verbindungen deiner echten Besucher. Die drei Kennzahlen sind:

• LCP (Largest Contentful Paint) — die Zeit, bis das größte sichtbare Inhaltselement (meist ein Bild oder eine Überschrift) gerendert ist. Sie steht für die Ladegeschwindigkeit.
• INP (Interaction to Next Paint) — die Verzögerung, bis die Seite visuell auf einen Klick, Tipp oder Tastendruck reagiert. Sie hat im März 2024 die ältere FID-Metrik abgelöst und ist nun das offizielle Maß für die Reaktionsfähigkeit.
• CLS (Cumulative Layout Shift) — wie stark sich Elemente während des Ladens unerwartet verschieben; sie misst die visuelle Stabilität.

Für die SEO sind diese Kennzahlen ein Ranking-Faktor, wiegen aber weniger schwer als die Inhaltsqualität. Dennoch gewinnt zwischen zwei gleich guten Seiten die schnellere, und eine schlechte Erfahrung schadet bereits Conversions und Absprungrate, was das Ranking indirekt beeinflusst.

Zielwerte

Google definiert je Kennzahl die Schwellen „gut", „verbesserungswürdig" und „schlecht". Gemessen wird der Wert, den 75 % der Besucher sehen (das 75. Perzentil):

• LCP: gut ≤ 2,5 s — schlecht > 4 s
• INP: gut ≤ 200 ms — schlecht > 500 ms
• CLS: gut ≤ 0,1 — schlecht > 0,25

Dein Ziel ist es, bei allen drei in der „guten" Zone zu bleiben. Mobil und Desktop werden getrennt bewertet; mobil ist meist anspruchsvoller, also setze dort deine Priorität.

Wie verbessert man den LCP?

Der LCP rührt meist entweder von einer langsamen Serverantwort oder einem großen, zu spät geladenen Bild her. Schritte zur Verbesserung:

• Lade das wichtigste Bild früh. Ist das LCP-Element ein Hero-Bild, verzichte auf Lazy-Loading und ziehe es mit fetchpriority="high" nach vorne.
• Nutze moderne Bildformate (WebP/AVIF) und liefere sie in der richtigen Größe aus; überdimensionierte Bilder blähen den LCP auf.
• Stelle kritische Ressourcen per Preconnect bereit.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<img src="hero.avif" fetchpriority="high" width="1200" height="630" alt="...">

Um die Serverantwortzeit (TTFB) zu senken, bringt Caching (zum Beispiel php artisan optimize in Laravel, Seiten-Cache, ein CDN) meist den größten Gewinn.

Wie verbessert man den INP?

Der INP hängt direkt davon ab, wie stark der Main Thread ausgelastet ist. Führt JavaScript beim Klick noch schwere Arbeit aus, verzögert der Browser die Reaktion. Lösungen:

• Reduziere die JavaScript-Menge und entferne ungenutzten Code; Skripte von Drittanbietern (Chat-Widgets, Analytics, Werbung) sind die Ursache der meisten INP-Probleme.
• Teile lange Aufgaben auf. Zerlege schwere Berechnungen in kleinere Teile oder verschiebe sie mit requestIdleCallback / setTimeout.
• Priorisiere visuelles Feedback. Aktualisiere nach einem Klick zuerst die UI und überlasse die schwere Arbeit dem nächsten Schritt.

button.addEventListener('click', () => {
  showSpinner();              // sofortiges visuelles Feedback
  requestAnimationFrame(() => {
    doExpensiveWork();        // schwere Arbeit im nächsten Frame
  });
});

Wie verbessert man den CLS?

Der CLS entsteht, wenn ein Element während des Ladens seine Position ändert und andere Inhalte verschiebt — etwa eine spät geladene Werbung, die den Text nach unten drückt. Die wirksamsten Maßnahmen:

• Gib Bildern und Videos immer width und height an (oder das CSS aspect-ratio), damit der Browser den Platz vorab reserviert.
• Nutze Platzhalter für dynamische Inhalte; reserviere festen Platz für Werbung und Einbettungen.
• Lade Webfonts mit font-display: swap und nutze nach Möglichkeit preload, um Textverschiebungen zu reduzieren.

Messwerkzeuge

Du arbeitest mit zwei Datenarten: Labor (kontrollierte Tests) und Feld (echte Nutzer). Beide sind nötig:

• PageSpeed Insights — zeigt sowohl die CrUX-Felddaten als auch den Lighthouse-Laborwert zusammen; der praktischste Einstieg.
• Search Console > Core-Web-Vitals-Bericht — listet URL-Gruppen der gesamten Website als „gut / verbesserungswürdig / schlecht".
• Chrome DevTools (Lighthouse + Performance-Panel) — um eine einzelne Seite gründlich zu analysieren.
• Die web-vitals-Bibliothek — um Kennzahlen echter Besucher zu sammeln und an dein Analytics zu senden.

Wichtiger Hinweis: Kennzahlen wie INP und CLS summieren sich über Interaktionen und Scrollen, daher spiegelt ein Labortest nicht immer die reale Erfahrung wider. Stütze deine Entscheidungen auf Felddaten.

Häufige Fragen

Wird FID noch verwendet?

Nein. FID (First Input Delay) wurde im März 2024 offiziell eingestellt und durch INP ersetzt. Da INP die Reaktion jeder Interaktion auf der Seite misst und nicht nur die erste, ist es eine umfassendere Kennzahl.

Verbessern Core Web Vitals direkt mein Ranking?

Erwarte für sich allein keinen großen Sprung. Diese Kennzahlen sind ein Ranking-Signal, doch Relevanz und Qualität der Inhalte wiegen weit schwerer. Der beste Ansatz ist, guten Inhalt mit einer schnellen Seite zu verbinden.

Warum schwanken meine PageSpeed-Werte?

Der Lighthouse-Labortest kann bei jedem Lauf je nach Netzwerk- und Gerätebedingungen variieren. Verlasse dich bei Entscheidungen auf die 28-Tage-CrUX-Felddaten statt auf einen einzelnen Test.

Ist deine Seite langsam oder steht dein Core-Web-Vitals-Bericht auf Rot? Ich kann deine Website prüfen und einen konkreten Verbesserungsplan erstellen, um LCP, INP und CLS in den Zielbereich zu bringen. Kontaktiere mich.