Zum Hauptinhalt springen

⚡ Web-Performance-Optimierung

📖 Definition​

Web-Performance-Optimierung ist der Prozess der Verbesserung der Ladegeschwindigkeit und Reaktionsfähigkeit einer Website, um die Benutzererfahrung zu verbessern. Schnelle Websites erhöhen die Benutzerzufriedenheit, SEO-Rankings und Konversionsraten.

🎯 Einfache Analogie​

Restaurant-Service-Geschwindigkeit​

Langsames Restaurant (Nicht optimiert)
├─ Langsame Bestellannahme (langsamer Server)
├─ Unordentliche Küche (ineffizienter Code)
└─ Essen kommt getrennt (verteilte Ressourcen)

Schnelles Restaurant (Optimiert)
├─ Schnelle Bestellannahme (schneller Server)
├─ Effiziente Küche (optimierter Code)
└─ Gang für Gang (Prioritäts-Laden)

⚙️ Funktionsweise​

1. DNS-Suche
2. TCP-Verbindung
3. HTTP-Anfrage
4. Server-Antwort
5. HTML-Parsing
6. Ressourcen-Laden
7. Rendering

💡 Wichtige Beispiele​

Bild-Optimierung​

<!-- ❌ Nicht optimiert -->
<img src="photo.jpg">

<!-- ✅ Optimiert -->
<img
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  src="photo-800w.jpg"
  loading="lazy"
  alt="Beschreibung"
>

<!-- Moderne Formate -->
<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Beschreibung">
</picture>

JavaScript-Optimierung​

// ❌ Synchrones Script
<script src="app.js"></script>

// ✅ defer
<script defer src="app.js"></script>

// Code-Splitting (React)
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Debouncing
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Caching-Strategie​

// HTTP-Cache
app.use('/static', express.static('public', {
  maxAge: '1y',
  immutable: true
}));

// Service Worker Cache
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

🤔 Häufig gestellte Fragen​

F1. Optimierungspriorität?​

A:

1. Benutzerwahrnehmung (Wichtigste)
   - Anfängliche Ladegeschwindigkeit (FCP, LCP)
   - Interaktionsreaktivität (FID)
   - Visuelle Stabilität (CLS)

2. Ressourcengröße
   - Bildoptimierung
   - JavaScript-Bundle-Größe

Messen → Analysieren → Verbessern → Wiederholen

F2. Bildformat?​

A:

WebP (Weit unterstützt)
- Kompression: ⭐⭐⭐⭐
- Unterstützung: Die meisten Browser

JPEG (Legacy)
- Kompression: ⭐⭐⭐
- Unterstützung: Alle Browser

Empfohlen:
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="...">
</picture>

🎬 Zusammenfassung​

Web-Performance-Optimierung ist der Schlüssel zur Benutzererfahrung:

  • Messen: Datengesteuerter Ansatz
  • Priorität: Hochwertige Elemente zuerst
  • Schrittweise: Schritt für Schritt
  • Kontinuierlich: Regelmäßige Überwachung

1 Sekunde schneller = 7% Konversionssteigerung! ⚡✨