Next.js Performance Optimierung: Der komplette Guide

Q: Was ist ein guter Lighthouse-Score für eine Next.js-Website?

Alles über 90 gilt als gut, über 95 als sehr gut. Ein Score unter 70 deutet auf strukturelle Performance-Probleme hin, die durch gezielte Optimierung behebbar sind.

Q: Warum ist meine Next.js-Seite langsam, obwohl ich Next.js verwende?

Next.js ist kein Garant für Performance — falsche Implementierungen können die Vorteile zunichte machen. Häufige Ursachen: fehlende priority-Flags bei Bildern, zu viele Client-Components statt Server Components, externe Skripte blockieren das Rendering, schlechte Datenbankabfragen bei SSR.

Q: Wie lange dauert ein Performance-Audit?

Ein grundlegender Performance-Audit mit Verbesserungsempfehlungen dauert 2–4 Stunden. Ein vollständiger Audit mit Implementierung der Verbesserungen nimmt je nach Projektgröße 1–5 Tage in Anspruch.

Q: Verbessert Performance wirklich die Conversion-Rate?

Das lässt sich für Ihre Seite messen: Vergleichen Sie Ladezeit und Conversion-Rate vor und nach einer Optimierung in Ihrer Webanalyse.

Q: Was kostet eine Next.js-Performance-Optimierung?

Ein Performance-Audit kostet 490–990 €. Die Implementierung der identifizierten Verbesserungen hängt vom Umfang ab: 1.000–5.000 € für typische Projekte.

Wito AI

Performance How-to11 min Lesezeit

Performance How-to

Next.js Performance: kürzere Ladezeiten, Schritt für Schritt

Für Entwicklungsteams und Betreiber von Next.js-Projekten: konkrete Techniken für Ladezeit (LCP), Layout-Stabilität (CLS) und Reaktionszeit (INP), damit Ihre Seite schneller wird und Sie nicht lange nach der Ursache suchen müssen.

Core Web Vitals verstehen

Googles Core Web Vitals sind die entscheidenden Performance-Metriken für SEO und Nutzererfahrung: LCP (Largest Contentful Paint): Wie lange dauert es, bis das größte sichtbare Element der Seite geladen ist? Ziel: unter 2,5 Sekunden, ideal unter 1 Sekunde. INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzereingaben? Ziel: unter 200ms, ideal unter 50ms. CLS (Cumulative Layout Shift): Wie stark verschieben sich Elemente beim Laden? Ziel: unter 0,1, ideal 0,02 oder weniger. Next.js bietet von Haus aus bessere Voraussetzungen für alle drei Metriken als WordPress oder klassische SPAs — aber falsche Implementierungen können diese Vorteile zunichte machen.

Google nutzt Core Web Vitals als Ranking-Faktor.

Bildoptimierung mit next/image

Bilder sind der häufigste LCP-Killer. Next.js `` löst die meisten Probleme automatisch: Automatische WebP/AVIF-Konvertierung: Next.js liefert Bilder im besten Format, das der Browser unterstützt. AVIF ist bei gleicher Qualität in der Regel deutlich kleiner als JPEG. Lazy Loading: Bilder unterhalb des Viewports laden erst, wenn der Nutzer scrollt. Setzt `loading="lazy"` korrekt. Priority-Flag für LCP-Bilder: Das Hauptbild (oft Hero-Bild) sollte `priority` haben, damit es früh geladen wird. Fehlt dieses Flag, ist das eine häufige LCP-Ursache. Feste Dimensionen: Immer `width` und `height` setzen, um CLS durch nachlaufende Bilder zu verhindern. Blur-Placeholder: `placeholder="blur"` zeigt einen verschwommenen Platzhalter beim Laden und verhindert visuelle Sprünge.

Häufiger Fehler: Das Hero-Bild ohne priority-Flag. Fügen Sie priority zu allen Bildern above-the-fold hinzu — das verbessert LCP oft um 0,5–1,5 Sekunden.

Richtige Rendering-Strategie wählen

Next.js bietet mehrere Rendering-Modi — die falsche Wahl kostet Performance: Static Generation (SSG): Seiten werden zur Build-Zeit gerendert und als statische HTML-Dateien ausgeliefert. Schnellste mögliche Ladezeit. Geeignet für Seiten, die sich selten ändern (Landingpages, Blog-Posts). Incremental Static Regeneration (ISR): Statische Seiten werden im Hintergrund erneuert. Ideal für Seiten, die sich gelegentlich ändern (Produktseiten, News). `revalidate`-Parameter steuert die Update-Frequenz. Server-Side Rendering (SSR): Seiten werden bei jedem Request gerendert. Nötig für personalisierte Inhalte, aber langsamer. Vorsicht: SSR für alles ist ein häufiger Performance-Fehler. React Server Components (RSC): Mit dem App Router können Komponenten serverseitig rendern — ohne JavaScript an den Client zu schicken. Reduziert Bundle-Size und verbessert INP.

Performance-Probleme in Ihrem Next.js-Projekt?

Schriften und externe Scripts optimieren

next/font für Google Fonts Nie Google Fonts direkt via CDN einbinden. `next/font/google` lädt Fonts lokal und eliminiert den Netzwerk-Request zu Googles Servern — spart 200–500ms und verbessert den Datenschutz. next/script für externe Skripte Analytics, Chat-Widgets, A/B-Testing-Tools — alle mit `