Core Web Vitals mit Next.js: Leitfaden 2026

Warum Core Web Vitals 2026 wichtig sind

Googles Core Web Vitals beeinflussen das Ranking und sind zugleich eine kritische Geschäftskennzahl. Forschungen zeigen, dass eine 100ms-Verbesserung des LCP die Conversions um bis zu 8% steigern kann. Für E-Commerce-Websites zählt jede Millisekunde. Warum eine schnelle Website geschäftsentscheidend ist, erklären wir auch in unserem Artikel Warum jedes Unternehmen eine Website braucht.

Bei Tem Craft Tech haben wir Dutzende von Next.js-Anwendungen optimiert und erreichen konstant 90+ Lighthouse-Scores. Hier ist unser bewährter Ansatz.

1. LCP (Largest Contentful Paint)

LCP misst, wann das größte sichtbare Element geladen wird. Das Ziel ist unter 2,5 Sekunden. Mit dem Next.js App Router stehen Ihnen leistungsstarke Werkzeuge zur Verfügung:

Bildoptimierung

Verwenden Sie next/image mit dem priority-Attribut für Bilder im sichtbaren Bereich. Dies löst Preloading aus und verhindert, dass Lazy-Loading Ihr LCP-Element verzögert.

Font-Ladestrategie

Verwenden Sie next/font zum Self-Hosting von Schriften mit font-display: swap. Dies eliminiert render-blockierende Font-Anfragen.

Server Components zuerst

Standardmäßig React Server Components verwenden für Inhalte ohne Client-Interaktivität. Dies reduziert das JavaScript-Bundle.

2. INP (Interaction to Next Paint)

INP ersetzte FID im März 2024 und misst die Reaktionsfähigkeit bei allen Nutzerinteraktionen. Ziel ist unter 200ms.

Schlüsselstrategien

Client-Komponenten schlank halten. dynamic()-Imports für schwere Komponenten unter dem Fold verwenden. Teure State-Updates debouncen und useTransition für nicht dringende UI-Updates nutzen.

3. CLS (Cumulative Layout Shift)

CLS misst die visuelle Stabilität. Ziel ist unter 0,1. Häufige Probleme und Lösungen:

Immer Bildabmessungen angeben: width und height Props bei next/image
Platz für dynamische Inhalte reservieren: Skeleton-Komponenten während des Ladens
Keine Inhalte über bestehenden Inhalten einfügen
CSS aspect-ratio verwenden für responsive Medienelemente

Unsere Ergebnisse

Mit diesen Techniken bei einem aktuellen E-Commerce-Migrationsprojekt erzielten wir:

LCP: 4,1s → 1,2s
INP: 380ms → 95ms
CLS: 0,24 → 0,02
Lighthouse Performance Score: 96/100

Im ersten Monat brachte das eine 61%ige Steigerung der mobilen Conversions.

Wichtige Erkenntnisse

Performance-Optimierung geht nach dem Livegang weiter. Der Schlüssel liegt in der bewussten Nutzung:

Server Components standardmäßig, Client Components nur bei Bedarf
Bilder und Fonts vom ersten Tag an optimieren
Metriken kontinuierlich mit Tools wie Vercel Analytics überwachen
Auf echten Geräten testen, nicht nur Desktop-Lighthouse

Brauchen Sie Hilfe bei der Optimierung Ihrer Next.js-Anwendung? Wir liefern messbare Performance-Verbesserungen für Unternehmen, die ihre digitale Präsenz ernst nehmen. Kontaktieren Sie uns für ein unverbindliches Erstgespräch und werfen Sie einen Blick auf unsere Referenzprojekte. Interessiert an TypeScript-Migration? Lesen Sie auch: Warum wir 50.000 Zeilen auf TypeScript migriert haben.