Next.js 15: Performance-Patterns für schnelle Websites

Performance ist kein Nice-to-have, sondern ein Ranking-Faktor. Mit Next.js 15 und dem App Router lassen sich Websites bauen, die out-of-the-box gut performen – wenn man die richtigen Patterns kennt.

Warum Performance über Erfolg entscheidet

Google misst seit Jahren Core Web Vitals: LCP, INP, CLS. Wer diese Werte konsequent grün hält, gewinnt nicht nur Sichtbarkeit, sondern auch Conversions. Studien zeigen, dass bereits 100 ms zusätzliche Ladezeit die Conversion-Rate spürbar drücken können.

Server Components als Default

Im App Router sind Komponenten standardmäßig Server Components. Das bedeutet:

• Kein JavaScript für statische Inhalte im Client-Bundle
• Datenabfragen direkt im Component-Body, ohne API-Layer
• Streaming HTML statt blockierender SPA-Hydration

export default async function ProductList() {
  const products = await db.product.findMany();
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Nur dort, wo Interaktivität gefragt ist, kommt 'use client' zum Einsatz – idealerweise so weit unten im Component-Tree wie möglich.

Bilder konsequent über next/image

Bilder sind der häufigste LCP-Killer. next/image liefert automatisch:

• WebP/AVIF mit Fallback
• Responsive srcset über das sizes-Attribut
• Lazy Loading außerhalb des Viewports
• Layout-Stabilität via width/height oder fill

Wichtig ist das sizes-Attribut korrekt zu setzen – sonst lädt der Browser unnötig große Varianten.

Schriften ohne CLS

next/font injiziert Schriften zur Build-Zeit und stellt automatisch ein passendes Fallback bereit. Das eliminiert die typischen Font-Swap-Sprünge, die zu schlechtem CLS führen.

Eine einzige zusätzliche Web-Font kostet oft 30–80 KB. Wer sich auf System-Fonts einlässt, spart Performance-Budget für wichtigere Dinge.

Caching-Strategie verstehen

Next.js 15 unterscheidet vier Caching-Ebenen:

1. Request Memoization – innerhalb eines Renders
2. Data Cache – über Requests hinweg
3. Full Route Cache – statisch gebaute Routen
4. Router Cache – Client-seitig

Wer diese Ebenen kennt, kann gezielt mit revalidate, cache: 'no-store' oder dynamic = 'force-dynamic' arbeiten – statt Caching pauschal abzuschalten.

Was wir in Kundenprojekten messen

In typischen Relaunches sehen wir nach der Umstellung auf den App Router:

• LCP von 3.2 s auf 1.4 s
• INP stabil unter 100 ms
• JS-Bundles rund 60 % kleiner

Das sind keine theoretischen Zahlen, sondern echte Werte aus Production-Sites unserer Kunden.

Fazit

Performance in Next.js 15 ist eine Frage der Disziplin: Server Components als Default, Bilder über next/image, Schriften über next/font, Caching bewusst einsetzen. Wer diese vier Bausteine konsequent umsetzt, hat eine Website, die nicht nur schnell fühlt, sondern messbar schnell ist.