Next.js Performance-Optimierung: 5 Maßnahmen für schnellere Ladezeiten

Langsame Websites kosten Kunden. Google bestätigt das mit Zahlen: Steigt die Ladezeit von einer auf drei Sekunden, verlassen 32 Prozent der Besucher die Seite, bevor sie überhaupt etwas gesehen haben. Für Unternehmen bedeutet das verlorene Anfragen und verlorenen Umsatz.

Next.js bringt von Haus aus viele Performance-Optimierungen mit. Doch in der Praxis sehe ich bei Website-Checks immer wieder dieselben Probleme. Hier sind fünf Maßnahmen, die ich in Kundenprojekten regelmäßig umsetze.

1. Server Components konsequent nutzen

Seit Next.js 13 sind React Server Components der Standard. Trotzdem finde ich in vielen Projekten "use client" an Stellen, wo es nicht nötig ist. Das Problem: Client Components erhöhen die JavaScript-Menge, die der Browser laden und ausführen muss.

Die Regel ist einfach: Eine Komponente wird nur dann zum Client Component, wenn sie State, Effekte oder Browser-APIs benötigt. Alles andere bleibt auf dem Server.

// Gut: Server Component (Standard)
export default function ProductList({ products }: Props) {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

// Nur wenn nötig: Client Component
'use client';

import { useState } from 'react';

export default function SearchFilter() {
  const [query, setQuery] = useState('');
  // ...interaktive Logik
}

2. Bilder richtig optimieren

Bilder bremsen viele Websites aus. Next.js bietet mit next/image eine eingebaute Lösung, die automatisch:

• Bilder in moderne Formate (WebP, AVIF) konvertiert
• Passende Größen für verschiedene Bildschirme generiert
• Lazy Loading aktiviert
• Layout Shifts verhindert

Trotzdem sehe ich regelmäßig rohes <img>-HTML oder falsch konfigurierte Image-Komponenten. Der häufigste Fehler: fehlende width- und height-Angaben, die zu Layout Shifts (CLS) führen.

import Image from 'next/image';

// Richtig: mit expliziten Dimensionen
<Image
  src="/team-photo.jpg"
  alt="Das Team bei der Projektbesprechung"
  width={800}
  height={450}
  sizes="(max-width: 768px) 100vw, 800px"
/>

3. Schriften selbst hosten

Google Fonts über das CDN einzubinden ist bequem, aber es kostet Performance und kann datenschutzrechtlich problematisch sein. Jeder Font-Request geht an Google-Server, das verzögert das Rendering und erfordert ein zusätzliches DNS-Lookup.

Die Lösung: Laden Sie die Schriftdateien als WOFF2 herunter und nutzen Sie next/font/local.

import localFont from 'next/font/local';

const inter = localFont({
  src: './fonts/inter-var.woff2',
  display: 'swap',
  variable: '--font-body',
});

Damit lädt die Schrift vom eigenen Server, es gibt keinen externen Request, und keine Schriftanfrage überträgt Besucherdaten an Google-Server.

4. JavaScript-Bundles analysieren und reduzieren

Viele Projekte laden deutlich mehr JavaScript, als der Nutzer tatsächlich braucht. Häufige Ursachen:

• Große Bibliotheken, die nur für eine kleine Funktion genutzt werden
• Fehlende Code-Splitting-Grenzen
• Imports, die den gesamten Bibliothekscode einschließen

Mein Vorgehen: Zuerst analysiere ich die Bundle-Größe mit dem Next.js Analyzer. Dann prüfe ich, welche Pakete den größten Anteil haben und ob es leichtere Alternativen gibt.

# Bundle-Analyse starten
ANALYZE=true next build

5. Caching und statische Generierung nutzen

Next.js kann Seiten zur Build-Zeit generieren (Static Site Generation) oder bei Bedarf zwischenspeichern. Für Inhalte, die sich selten ändern, ist das die schnellste Option.

Seiten mit statischen Inhalten, wie ein Impressum oder eine Über-mich-Seite, sollten immer statisch generiert werden. Dynamische Seiten profitieren von Incremental Static Regeneration (ISR).

Regelmäßig messen und nachbessern

Performance-Optimierung ist kein einmaliges Projekt, sondern ein laufender Prozess. Mit diesen fünf Maßnahmen schaffen Sie eine solide Grundlage. Messen Sie die Core Web Vitals regelmäßig und bessern Sie gezielt nach.

Wenn Sie wissen möchten, wie schnell Ihre Website wirklich ist und wo die größten Hebel liegen, biete ich einen strukturierten Website-Check an. In 60 Minuten erhalten Sie eine klare Analyse mit konkreten Handlungsempfehlungen.