Core Web Vitals in Next.js: was zählt und was nicht

Core Web Vitals werden fast immer schlecht erklärt. Sie erscheinen als drei Abkürzungen, die man „auf Grün stellen" muss — dabei sind es drei verschiedene Fragen an eine Seite: Wie lange dauert es, bis etwas sichtbar ist? Wie stark verschiebt sich der Inhalt beim Laden? Und wie schnell reagiert die Seite auf eine Eingabe?

LCP: wann das Wesentliche erscheint

Largest Contentful Paint misst, wann das größte Element im sichtbaren Bereich gezeichnet wird. Auf einer Marketing-Seite ist das fast immer das Hero-Bild oder die Überschrift.

Die drei Ursachen, die uns immer wieder begegnen:

1. Das Hero-Bild wird verzögert geladen. loading="lazy" auf dem LCP-Element ist ein Klassiker: Es verzögert genau das, was zuerst da sein sollte.
2. Render-blockierende Schriften. Eine Schrift von einem externen CDN erzwingt eine zusätzliche Verbindung, bevor Text gezeichnet werden kann. Selbst gehostet über next/font entfällt diese Kette.
3. Unnötiges JavaScript im kritischen Pfad. Wenn der Hero Hydration braucht, um sichtbar zu werden, ist es kein Hero, sondern eine Anwendung im Kostüm einer Startseite.

CLS: der Sprung, der Vertrauen kostet

Cumulative Layout Shift bestraft Inhalte, die sich nach dem Erscheinen bewegen. Ursache sind meist Bilder ohne angegebene Maße, nachträglich eingefügte Banner oder Schriften, deren Metriken sich beim Laden ändern.

Die praktische Regel: Alles, was Platz auf der Seite einnehmen wird, muss diesen Platz reservieren, bevor der Inhalt da ist. Ein Skeleton-Loader mit der Geometrie des Endzustands löst das Problem — und sieht dabei besser aus als ein Spinner.

INP: die Metrik, die FID ersetzt hat

Interaction to Next Paint misst die tatsächliche Latenz von Interaktionen über den gesamten Besuch, nicht nur beim ersten Klick. Das ist ehrlicher als FID und deutlich schwerer zu manipulieren.

Der Gegner ist hier lange Arbeit im Main Thread: Handler, die ganze Listen neu berechnen, Animationen auf Eigenschaften, die Layout erzwingen (width, height, top) statt transform und opacity, sowie globaler State, der Kaskaden von Re-Renders auslöst.

Was man ignorieren darf

Jagen Sie keinem perfekten Laborwert hinterher. Lighthouse auf Ihrem Laptop mit Glasfaser ist nicht Ihr Nutzer. Entscheidend sind Felddaten: das 75. Perzentil echter Nutzer, auf den Geräten und Netzen, die sie tatsächlich haben.

Erst messen, dann optimieren — und nur das, was ein vorher schriftlich festgelegtes Budget verfehlt.