Next.js Leistungsoptimierung: Von 4s auf 0,8s Lastzeit

Die Herausforderung

Unser Klienten-Online-Shop wurde in 4+ Sekunden geladen. Die Core Web Vitals waren überall gescheitert, was sowohl die Benutzererfahrung als auch die Suchmaschinenplatzierungen beeinträchtigte. Hier ist, wie wir es repariert haben.

Optimierungsstrategie

1. Bildoptimierung

Bilder waren für 60% des Seitenweights verantwortlich. Wir migrierten zu Next.js Bildkomponente mit automatischer WebP-Konvertierung, responsiver Größenanpassung und lazy Loading.

import Bild from "next/image";
<Bild
  src="/heldenbild.jpg"
  alt="Held"
  width={1200}
  height={600}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

2. Code-Splittung mit dynamischen Imports

Wir splitteten schwere Komponenten wie das Checkout-Modal und das Analytics-Dashboard in separate Chunks, die nur geladen werden, wenn sie benötigt werden.

const CheckoutModal = dynamic(() => import("@/components/CheckoutModal"), {
  loading: () => <CheckoutSkeleton />,
  ssr: false
});

3. Caching-Strategie

Wir implementierten stale-while-revalidate-Caching für API-Antworten und ISR (Incremental Static Regeneration) für Kategorien-Seiten, die häufig geändert werden.

Ergebnisse

Wichtige Erkenntnisse

Die Leistungsoptimierung ist eine Frage von Dutzenden kleinen Verbesserungen, die sich summieren. Konzentrieren Sie sich auf die größten Verursacher zuerst – meistens Bilder und nicht benötigte JavaScript-Code.