5 konkrete Performance-Tipps für deine Next.js Site.

Performance ist kein Mythos. Mit fünf konkreten Massnahmen heben wir die meisten Next.js-Sites von einem Lighthouse-Score um 60 auf solide 90+ – ohne grosse Re-Architektur.

1. Bilder konsequent über next/image laden

Der mit Abstand grösste Performance-Killer sind unoptimierte Bilder. next/image liefert automatisch das passende Format (WebP/AVIF), die richtige Grösse für das jeweilige Device und lazy-loaded alles unterhalb des Folds. Ein einziger Search-and-Replace von <img> auf <Image> bringt häufig 20–30 Punkte mehr Score.

Wichtig: priority auf das LCP-Image setzen (typischerweise das Hero-Bild), den Rest standardmässig lazy-loaden.

2. Fonts richtig laden mit next/font

Google Fonts via <link> einzubinden bedeutet: extra Round-Trip zu fonts.googleapis.com, Flash-of-Unstyled-Text, schlechtere CLS-Werte. next/font hostet die Fonts selbst, inlined nur die genutzten Subsets und preloaded sie automatisch.

3. Bundle-Analyse durchführen

Mit @next/bundle-analyzer siehst du in 5 Minuten, was deinen JavaScript-Bundle aufbläht. Häufige Übeltäter: moment.js (durch date-fns oder native Intl ersetzen), lodash (Tree-shakeable Variante nutzen oder einzelne Funktionen importieren), grosse Icon-Libraries (nur benötigte Icons importieren).

4. Server Components & statische Generierung priorisieren

App Router gibt dir per Default Server Components. Nutze sie. Wenn eine Komponente keine Browser-APIs oder State braucht, gibts keinen Grund, sie als Client Component zu rendern. Das spart hunderte Kilobyte JavaScript.

Für Seiten, die sich selten ändern (Blog-Posts, Produkt-Detailseiten), generateStaticParams einsetzen – das macht aus dynamischen Routen statisches HTML und damit die schnellste Auslieferung überhaupt.

5. Third-Party-Scripts disziplinieren

Google Analytics, Cookie-Banner, Chat-Widgets, Marketing-Tags – jeder dieser Scripts kostet Performance. Drei Regeln:

• Wirklich nötig? Prüfen, ob das Tool aktiv genutzt wird oder nur „mal dazugekommen ist".
• Mit next/script und strategy="lazyOnload" laden, wo immer möglich.
• Server-side-Alternativen prüfen (Plausible statt GA, eigener Cookie-Banner statt Onetrust).

Bonus: Was du messen solltest

Lighthouse ist gut, aber Vercel Web Vitals oder Cloudflare Web Analytics zeigen dir echte User-Daten. Erst wenn du Real-User-Metrics hast, weisst du, wo deine Optimierung wirklich greift. Die Lighthouse-Synthetik ist nur die halbe Wahrheit.

Wann sich Performance-Optimierung lohnt

Faustregel: Jede 100ms Ladezeit weniger entspricht etwa 1% mehr Conversion. Wenn du eine E-Commerce-Site mit CHF 50'000 Monatsumsatz hast, sind das CHF 500 mehr pro 100ms. Performance ist nicht „nice to have" – es ist direkter Umsatz.