Framework optimieren
Next.js schneller machen
Next.js bringt SSG, ISR und Server Components mit, womit sich ausgezeichnete Core Web Vitals erreichen lassen, solange das clientseitige JavaScript schlank bleibt.
Schritt für Schritt
- 1 Setze auf statische Generierung mit getStaticProps und ISR, wo Inhalte sich selten ändern, damit Seiten als fertiges HTML aus dem Cache ausgeliefert werden.
- 2 Binde Bilder über next/image ein, das automatisch moderne Formate, responsive Größen und Lazy-Loading liefert und CLS durch feste Dimensionen verhindert.
- 3 Lade schwere Komponenten per next/dynamic nach, damit sie erst bei Bedarf im Bundle landen und der initiale JavaScript-Pfad klein bleibt.
- 4 Lade Schriften über next/font lokal mit font-display swap, um Render-Blocking und Layout-Verschiebungen durch Web Fonts zu vermeiden.
- 5 Prüfe das Bundle mit dem Bundle-Analyzer, ersetze schwere Abhängigkeiten und verschiebe nicht kritische Logik in Server Components.
Erst messen, dann optimieren
Mit dem Test auf pagespeed-test.de misst du LCP, CLS und INP deiner Next.js Seiten direkt nach jedem Deployment.
PageSpeed jetzt testen