webperf Von Marshkalk

Core Web Vitals erklart: LCP, CLS und INP

Googles Core Web Vitals sind jetzt Ranking-Signale. Erfahren Sie, was LCP, CLS und INP messen, wie gute Werte aussehen und wie Sie jeden verbessern konnen.

Was sind Core Web Vitals?

Core Web Vitals sind eine Gruppe realer Leistungskennzahlen, die von Google definiert wurden, um die Benutzererfahrungsqualitat von Webseiten zu messen. Sie wurden 2021 zu einem Google-Ranking-Signal und seither aktualisiert. Sie messen Ladeleistung, visuelle Stabilitat und Interaktivitat, die drei Aspekte der Seitenerfahrung, die Nutzer am meisten betreffen.

Derzeit gibt es drei Core Web Vitals-Metriken:

  1. LCP, Largest Contentful Paint (Laden)
  2. CLS, Cumulative Layout Shift (visuelle Stabilitat)
  3. INP, Interaction to Next Paint (Interaktivitat, ersetzte FID im Jahr 2024)

LCP, Largest Contentful Paint

Was es misst: Wie lange es dauert, bis das grosste sichtbare Inhaltselement gerendert wird. Das ist normalerweise ein Hero-Bild, eine grosse Uberschrift oder ein Vollbild-Video-Poster.

Warum es wichtig ist: LCP ist ein Naherungswert fur "Wie schnell fuhlt sich das Laden der Seite an?" Nutzer bilden ihren ersten Eindruck der Seitengeschwindigkeit davon, wann der Hauptinhalt erscheint.

Bewertung:

  • Gut: weniger als 2,5 Sekunden
  • Verbesserungsbedarf: 2,5-4 Sekunden
  • Schlecht: mehr als 4 Sekunden

Haufige LCP-Ursachen:

  • Ein grosses, nicht optimiertes Hero-Bild (falsches Format, kein Vorladen)
  • Rendering-blockierendes JavaScript oder CSS
  • Langsame Serverantwortzeit (TTFB uber 600ms)

Wichtigste Massnahme: Ihr LCP-Bild vorladen. <link rel="preload" as="image" href="hero.webp"> im <head> hinzufugen. Das allein reduziert LCP typischerweise um 1-2 Sekunden.

CLS, Cumulative Layout Shift

Was es misst: Wie stark das Seitenlayout wahrend des Ladens und der Nutzung unerwartet verschoben wird. Jede Verschiebung wird nach dem Anteil des betroffenen Ansichtsfensters und der Entfernung, die sich Elemente bewegt haben, bewertet.

Warum es wichtig ist: Unerwartete Layoutverschiebungen verursachen Klicks auf das falsche Element, Verlust der Leseposition und eine frustrierende Benutzererfahrung.

Bewertung:

  • Gut: kleiner oder gleich 0,1
  • Verbesserungsbedarf: 0,1-0,25
  • Schlecht: grosser als 0,25

Haufige CLS-Ursachen:

  • Bilder ohne explizite width- und height-Attribute
  • Anzeigen oder Einbettungen ohne reservierten Platz
  • Web-Fonts, die einen Flash des unstyled Textes verursachen

Wichtigste Massnahme: Immer width und height bei <img>-Elementen setzen. Der Browser verwendet diese, um den richtigen Platz zu reservieren, bevor das Bild geladen wird.

INP, Interaction to Next Paint

Was es misst: Die Reaktionsfahigkeit der Seite auf Benutzerinteraktionen (Klicks, Taps, Tastatureingaben). INP misst die Zeit von Interaktionsbeginn bis zur nachsten visuellen Aktualisierung.

INP ersetzte FID (First Input Delay) im Marz 2024. FID mass nur die erste Interaktion; INP misst alle Interaktionen wahrend einer Sitzung.

Bewertung:

  • Gut: kleiner oder gleich 200 Millisekunden
  • Verbesserungsbedarf: 200-500ms
  • Schlecht: grosser als 500ms

Haufige INP-Ursachen:

  • Schweres JavaScript im Hauptthread, das die Antwort blockiert
  • Lange Aufgaben (uber 50ms), die wahrend der Interaktion ausgefuhrt werden
  • Teure DOM-Operationen, ausgelost durch Klicks
  • Drittanbieter-Skripte (Analysen, Anzeigen), die um den Hauptthread konkurrieren

Wichtigste Massnahme: Lange Aufgaben mit scheduler.yield() oder setTimeout(fn, 0) aufteilen. Drittanbieter-Skripte uberprufen und verzogern.

Core Web Vitals messen

Echtzeit-Nutzermessung:

  • Google Search Console > Core Web Vitals-Bericht
  • Chrome User Experience Report (CrUX), der offentliche Datensatz, den Google fur das Ranking verwendet

Labortests:

  • PageSpeed Insights, fuhrt Lighthouse aus und zeigt Felddaten
  • Lighthouse in Chrome DevTools
  • WebPageTest, detailliertes Wasserfall und Filmstreifen

Google verwendet fur das Ranking Felddaten (CrUX). Wenn Felddaten verfugbar sind, fur diese verbessern, nicht nur den Lighthouse-Wert.

Kurz zusammengefasst

LCP (Laden), CLS (Stabilitat) und INP (Interaktivitat) sind Googles drei Core Web Vitals-Ranking-Signale. Gute Schwellenwerte: LCP unter 2,5s, CLS unter 0,1, INP unter 200ms. Das Vorladen der LCP-Ressource, das Hinzufugen von Bildabmessungen und das Beseitigen von Hauptthread-blockierendem JavaScript sind die wirksamsten Korrekturen fur die meisten Websites.