Performance-Optimierung

---

title: "Frontend Performance-Optimierung" slug: "performance-optimization" category: "Frontend" description: "Core Web Vitals, Asset-Optimierung und React-Techniken für schnellere Ladezeiten." tags: ["Core Web Vitals", "LCP", "CLS", "Lazy Loading", "React", "Next.js"] navigation_path: "/tiles/performance-optimization"

Frontend Performance-Optimierung

Performance im Frontend ist entscheidend für die Benutzererfahrung (UX) und das SEO-Ranking. Eine schnelle Webseite hält Benutzer länger und bietet eine reibungslosere Bedienung. Die Optimierung lässt sich in verschiedene Bereiche unterteilen:

1. Core Web Vitals (Google's Metriken)

Die sogenannten Core Web Vitals sind drei zentrale Metriken zur Bewertung der UX:

• LCP (Largest Contentful Paint): Misst die Ladezeit des Hauptinhalts. Alles unter 2.5 Sekunden gilt als optimal.
• INP (Interaction to Next Paint): Misst die Reaktionsfähigkeit der Seite auf Benutzereingaben. Ein Wert unter 200ms ist optimal (ersetzt den alten Wert FID).
• CLS (Cumulative Layout Shift): Misst die visuelle Stabilität. Es sollten keine unerwarteten Layout-Verschiebungen auftreten (Wert idealerweise < 0.1).

2. Assets & Ressourcen Optimieren

Der Großteil der zu ladenden Daten sind meist Medien und Skripte.

• Bilder: Moderne Formate wie WebP oder AVIF nutzen, richtige Größen für verschiedene Viewports bereitstellen (srcset bei img-Tags) und Lazy Loading verwenden (loading="lazy").
• Fonts: Essenzielle Schriften vorladen (<link rel="preload">) und blockierendes Rendern durch font-display: swap im CSS verhindern.
• Videos: Nach Möglichkeit stummschalten (Autoplay-Politiken der Browser beachten) und komprimierte Web-Formate nutzen.

3. JavaScript & React Optimierungen

JavaScript ist der größte Flaschenhals, wenn es darum geht, die Seite interaktiv zu machen (Time to Interactive).

• Code Splitting & Lazy Loading: Nur den Code laden, der gerade benötigt wird. Komponenten, die nicht direkt im sichtbaren Bereich (Above the Fold) sind, können als lazy nachgeladen werden.
• Main Thread entlasten: Schwere und komplexe Berechnungen sollten nicht im Haupt-Thread (Main Thread) der Seite stattfinden, da sie sonst das User Interface "einfrieren". Hier helfen asynchrone Berechnungen oder Web Worker, die im Hintergrund laufen.
• Rendering in React: Unnötige Re-Renders vermeiden. Zum Einsatz kommen hier useMemo für das Zwischenspeichern von schweren Funktionen, useCallback für Event-Handler und React.memo() für reines UI.

Tests & Tooling - Worauf achten?

Um Performance-Engpässe zu erkennen, gibt es extrem hilfreiche Tools:

• Google Lighthouse: Der integrierte Test direkt in den Chrome DevTools. Er bietet einen detaillierten Überblick über Performance, Accessibility und SEO-Schwachstellen.
• PageSpeed Insights: Testet die Seite unter realen Laborbedingungen, besonders hilfreich für das Mobile-Rating.
• Bundle Analyzer: Bei Frameworks wie Next.js nutzt man @next/bundle-analyzer, um ein visuelles Mapping der größten JavaScript-Abhängigkeiten zu erhalten. So entdeckt man schnell Bibliotheken, die zu groß sind (z.B. komplette Lodash Bibliothek importiert statt einzelner Funktionen).
• React Profiler: Zeigt direkt als Entwickler an, warum und wie oft eine Komponente neu gerendet wird.

---

In Aktion: Warum den Main Thread freihalten?

Wenn viel JavaScript auf im Frontend ausgeführt wird, stoppt der Browser das Rendering und wartet, bis die Ausführung beendet ist. Ein eingefrorener Bildschirm führt zu Frustration und Abbrüchen seitens der User. In diesem nachfolgenden Playground demonstrieren wir den Unterschied zwischen einer schweren asymmetrischen Endlos-Schleife, die die gesamte UI blockiert, und der Lösung mittels ausgelagerter Ausführung über einen Web Worker im Hintergrund.