⚡Performance

Performance messen & optimieren

Jede Sekunde Ladezeit kostet dich Nutzer

Eine langsame App verliert Nutzer bevor sie ueberhaupt geladen hat. Google bestraft langsame Seiten im Ranking. Hier ist wie du die Performance misst und die groessten Bremsen findest.

Pro-Tip — Der schnelle Weg
Messe immer mit Throttling. In Chrome DevTools auf Slow 3G stellen. Wenn deine App unter schlechten Bedingungen funktioniert, ist sie unter guten Bedingungen blitzschnell.
Seite 1
1

Core Web Vitals verstehen

LCP (Largest Contentful Paint), FID (First Input Delay) und CLS (Cumulative Layout Shift) sind Googles Performance-Metriken. Alle drei muessen im gruenen Bereich sein.

2

Lighthouse Audit

Oeffne Chrome DevTools, Lighthouse Tab und starte einen Performance-Audit. Du bekommst einen Score von 0-100 und konkrete Verbesserungsvorschlaege.

# Oder per CLI
npm install -g lighthouse
lighthouse https://deine-app.de --view
3

Bundle Analyzer nutzen

Finde heraus welche Packages dein Bundle aufblaehn. Der Bundle Analyzer zeigt dir visuell welche Dependencies wie viel Platz brauchen.

npm install @next/bundle-analyzer


// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
 enabled: process.env.ANALYZE === 'true'
});
module.exports = withBundleAnalyzer({});


// Ausfuehren
ANALYZE=true npm run build
4

Bilder optimieren

Bilder sind meist der groesste Performance-Killer. Nutze next/image fuer automatische Optimierung, WebP-Format und Lazy Loading.

import Image from 'next/image';


<Image
 src="/hero.jpg"
 width={1200}
 height={600}
 alt="Hero"
 priority // Fuer Above-the-Fold Bilder
/>
5

Web Vitals tracken

Messe Performance im Produktivbetrieb mit echten Nutzerdaten. Next.js hat einen eingebauten Hook dafuer.

// app/layout.tsx
import { useReportWebVitals } from 'next/web-vitals';


useReportWebVitals((metric) => {
 console.log(metric.name, metric.value);
 // An Analytics senden
});
Seite 2
Warum das funktioniert
  • Jede Sekunde langsamere Ladezeit reduziert Conversions um 7 Prozent
  • Google rankt schnelle Seiten hoeher in der Suche
  • Gute Performance ist das beste UX-Feature
  • Core Web Vitals sind ein direkter Ranking-Faktor
Tipps
  • Bilder sind fast immer der groesste Performance-Killer
  • Fonts mit display swap laden um Layout Shifts zu vermeiden
  • Third-Party Scripts asynchron laden oder ganz weglassen
  • Server Components in Next.js reduzieren das Client-Bundle
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen