Core Web Vitals verstehen & verbessern

Die Core Web Vitals sind Googles Versuch, „gefühlte“ Performance in messbare Werte zu fassen: Lädt eine Seite zügig, reagiert sie flüssig, und springt das Layout beim Laden herum? Drei Kennzahlen beantworten genau diese Fragen. Sie fließen als Teil der „Page Experience“ in die Bewertung ein – als eher moderates Rankingsignal, aber mit echtem Nutzen für die Nutzung.

Die gute Nachricht für alle, die schlank und semantisch bauen: Eine statische Seite mit wenig JavaScript erreicht gute Werte oft fast von allein. Schauen wir uns die drei Werte und ihre Hebel an.

Die drei Kennzahlen

INP hat 2024 die ältere Kennzahl FID abgelöst – es misst die Reaktionsfreude über die gesamte Interaktion hinweg und ist damit strenger und aussagekräftiger.

Feld- vs. Labordaten

Ein Punkt, der oft für Verwirrung sorgt: Für die Bewertung zählen Felddaten – echte Messungen von echten Besuchern (im Chrome User Experience Report). Werkzeuge wie Lighthouse liefern dagegen Labordaten unter Idealbedingungen. Die sind super zum Debuggen, ersetzen aber nicht den Blick auf die echten Werte. Ich nutze beides: das Labor zum Finden von Ursachen, das Feld zur Wahrheit.

LCP verbessern (Ladegefühl)

Das größte Element ist meist ein Bild oder eine große Überschrift. Hebel:

• Bilder optimieren: moderne Formate (AVIF/WebP), passende Größen per srcset, immer width und height setzen. Das wichtigste Bild (oben) vorab laden (preload).
• Schriften zähmen: selbst hosten, font-display: swap, das nötige Schriftfile vorladen.
• CSS schlank halten und kein Render-Blocking durch unnötige Skripte.
• Schnell ausliefern: Statik plus Kompression schlägt fast jeden dynamischen Aufbau.

INP verbessern (Reaktionsfreude)

INP leidet vor allem unter JavaScript, das den Hauptthread blockiert. Der wirksamste Hebel ist deshalb der naheliegendste: weniger davon. Wer Verhalten nativ löst statt nachzubauen – die erste Regel von ARIA lässt grüßen –, hat weniger Code, der hängen kann. Diese Website ist „Zero-JS by default“ und gewinnt INP damit praktisch geschenkt.

CLS verbessern (Stabilität)

Layout-Sprünge entstehen, wenn Inhalte ihre Größe erst beim Laden bekommen. Gegenmittel:

• width und height an Bildern und Medien, damit der Platz von Anfang an reserviert ist.
• Platz für Einbettungen (Werbung, iframes) vorhalten, statt sie hineinschnappen zu lassen.
• Nichts oberhalb von bereits sichtbarem Inhalt nachschieben.

Statik gewinnt fast von allein

Ohne großes JavaScript-Bündel und mit von Hause aus schlankem Markup sind LCP und INP selten ein Problem – das ist der stille Vorteil einer statischen, semantischen Seite. Wo Werte kippen, steckt überraschend oft ein Schwergewicht dahinter: ein Karussell mit vielen großen Bildern etwa ist ein Klassiker für schlechtes LCP. Genau deshalb lohnt vor solchen Bausteinen die Frage, ob es sie wirklich braucht.

Häufige Fragen

Sind die Core Web Vitals ein starkes Rankingsignal?

Eher ein moderates. Sie sind ein Faktor unter vielen, und Relevanz schlägt Geschwindigkeit. Der eigentliche Gewinn liegt in der besseren Nutzung – die wiederum indirekt hilft.

Reicht ein guter Lighthouse-Wert?

Als Diagnose ja, als Nachweis nein. Maßgeblich sind die Felddaten echter Besucher. Ein guter Laborwert ist ein gutes Zeichen, mehr nicht.

Was bringt am meisten?

Meist die Bilder (Format, Größe, width/height) und der Verzicht auf unnötiges JavaScript. Beides zusammen hebt LCP, CLS und INP auf einmal.

Fazit

Die Core Web Vitals messen Ladegefühl (LCP), Reaktionsfreude (INP) und Stabilität (CLS). Die größten Hebel sind optimierte Bilder mit festen Maßen, schlankes CSS, gezähmte Schriften und so wenig JavaScript wie möglich. Eine statische, semantische Seite bringt davon vieles schon mit – ein weiterer Beleg dafür, dass gute Struktur und gute Performance dieselbe Medaille sind.