Best Practices für die Web-Performance

Warum Leistung wichtig ist

Die Geschwindigkeit einer Website ist kein Luxus – sie ist eine entscheidende Geschäftskennzahl. Die Daten sind überzeugend:

• Conversions – Eine Verzögerung von 1 Sekunde beim Laden der Seite reduziert die Conversions um 7 % (Amazon schätzt den jährlichen Umsatzverlust auf 1,6 Milliarden US-Dollar pro 100 ms Latenz).
• SEO – Google verwendet seit 2021 Core Web Vitals als Ranking-Signale.
• Benutzererfahrung – 53 % der mobilen Benutzer verlassen Websites, deren Laden länger als 3 Sekunden dauert.
• Barrierefreiheit – Schnellere Websites funktionieren besser in langsamen Netzwerken und älteren Geräten.

Jede Millisekunde zählt. Dieser Artikel behandelt umfassende Strategien, um Ihre Websites blitzschnell zu machen.

---

1. Vermögenswerte optimieren

Minimierung

Entfernen Sie Leerzeichen, Kommentare und unnötige Zeichen aus HTML, CSS und JavaScript. Moderne Build-Tools erledigen dies automatisch:

# Using Terser for JavaScript
npx terser input.js -o output.min.js --compress --mangle

# Using cssnano via PostCSS
npx postcss input.css -o output.min.css --use cssnano

# Using html-minifier
npx html-minifier input.html -o output.min.html --collapse-whitespace

Auswirkungen – Durch die Minimierung werden die Dateigrößen normalerweise um 30–60 % reduziert.

Bildoptimierung

Bilder machen auf den meisten Websites über 50 % des Seitengewichts aus.

Moderne Formate:

• WebP – 25–35 % kleiner als JPEG bei gleicher Qualität. Unterstützt in allen modernen Browsern.
• AVIF – 50 % kleiner als JPEG. Basierend auf dem AV1-Videocodec. Wachsende Unterstützung.
• SVG – Vektorformat, ideal für Symbole, Logos und Illustrationen.

Responsive Bilder:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
/>

Werkzeuge:

• Sharp (Node.js) – Serverseitige Bildverarbeitung.
• Squoosh – Browserbasierter Bildoptimierer.
• ImageOptim – Verlustfreie Komprimierung für die Produktion.
• Cloudinary / Imgix – CDN-basierte Echtzeit-Bildoptimierung.

Auswirkung – Durch die richtige Bildoptimierung kann das Seitengewicht um 60–80 % reduziert werden.

Code-Splitting und Tree-Shaking

Code-Splitting unterteilt Ihr JavaScript in Blöcke, die bei Bedarf geladen werden:

// React lazy loading
const Dashboard = React.lazy(() => import('./Dashboard'));

// Webpack dynamic import
import(/* webpackChunkName: "chart" */ './Chart').then(module => {
  module.renderChart();
});

Tree Shaking beseitigt toten Code. Webpack, Rollup und esbuild entfernen ungenutzte Exporte während der Bündelung. Stellen Sie sicher, dass Sie ES-Module („Import“/„Export“) verwenden, damit Tree Shaking effektiv funktioniert.

---

2. Nutzen Sie Caching

Caching dient zuvor abgerufenen Ressourcen aus dem lokalen Speicher und vermeidet Netzwerkanfragen vollständig.

Browser-Caching (HTTP-Header)

# Apache .htaccess
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|svg|woff2)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Verwenden Sie für HTML-Dateien kürzere Cache-Zeiten („max-age=0, must-revalidate“) oder ETags zur Aktualitätsvalidierung.

Servicemitarbeiter für Offline-First

Servicemitarbeiter fungieren im Browser als programmierbarer Netzwerk-Proxy:

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // Cache-first strategy for static assets
      return response || fetch(event.request);
    })
  );
});

Caching-Strategien für Servicemitarbeiter:

Strategie	Anwendungsfall
Cache zuerst	Statische Assets (Bilder, CSS, JS)
Netzwerk zuerst	API-Aufrufe, dynamische Inhalte
Veraltet während der erneuten Validierung	Newsfeeds, Blogbeiträge
Nur Netzwerk	Formulare, Zahlungs-APIs

CDN-Edge-Caching

Ein CDN (Content Delivery Network) speichert Inhalte auf geografisch verteilten Edge-Servern zwischen. Beliebte Anbieter:

• Cloudflare – Globales Netzwerk, DDoS-Schutz, HTTP/3-Unterstützung.
• Schnell – Bereinigung in Echtzeit, VCL-Konfiguration.
• Akamai – Enterprise-Klasse, riesiger Umfang.
• AWS CloudFront – Umfassende AWS-Integration, Lambda@Edge.

Auswirkung – CDN-Caching reduziert die Serverlast um mehr als 80 % und verkürzt die Latenz für globale Benutzer um 50–80 %.

---

3. Reduzieren Sie Render-blockierende Ressourcen

Die HTML-Analyse wird angehalten, wenn der Browser auf die Tags „“ oder „“ stößt. Dadurch wird das Rendern blockiert.

Aufschieben und Asynchron

<!-- Async: download in parallel, execute as soon as downloaded -->
<script async src="analytics.js"></script>

<!-- Defer: download in parallel, execute in order after HTML parsing -->
<script defer src="app.js"></script>

Faustregel:

• Verwenden Sie „defer“ für Skripte, die DOM-Zugriff und Ausführungsreihenfolge benötigen.
• Verwenden Sie „async“ für unabhängige Skripte (Analysen, Anzeigen).
• Verwenden Sie keines von beiden für kritische Skripte, die sofort ausgeführt werden müssen.

Kritisches CSS-Inlining

Extrahieren und Inline-CSS, das für „above thefold“-Inhalte benötigt wird:

<head>
  <style>
    /* Inlined critical CSS */
    header { background: #333; color: white; }
    .hero { min-height: 80vh; display: flex; align-items: center; }
    /* ... only what's visible on initial load */
  </style>
  <!-- Deferred non-critical CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Tools: Critical (Node.js), Penthouse und Webpack-Critical generieren automatisch Inline-CSS.

Ressourcenhinweise

<!-- Preload critical resources early -->
<link rel="preload" href="hero-image.webp" as="image">

<!-- Preconnect to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">

<!-- Prefetch resources needed on the next page -->
<link rel="prefetch" href="next-page.html">

---

4. Optimieren Sie den kritischen Rendering-Pfad

Der kritische Rendering-Pfad ist die Abfolge von Schritten, die der Browser zum Rendern einer Seite durchführt. Durch die Optimierung wird die Zeit bis zur Interaktion verkürzt.

Server-Reaktionszeit

• Halten Sie die Zeit bis zum ersten Byte (TTFB) unter 200 ms.
• Verwenden Sie serverseitiges Caching (Varnish, Redis, Memcached).
• Wählen Sie schnelles Hosting und Datenbanken.
• Verwenden Sie ein CDN für statische und zwischengespeicherte dynamische Inhalte.

HTTP/2 und HTTP/3

Protokoll	Hauptmerkmale
HTTP/1.1	Eine Anfrage pro Verbindung (begrenzt)
HTTP/2	Multiplexing, Server Push, Header-Komprimierung, Binärprotokoll
HTTP/3	Die QUIC-basierte Null-RTT-Verbindung bewältigt Paketverluste besser

HTTP/2 macht die Bündelung weniger kritisch – Sie können viele kleine Dateien ohne den Verbindungsaufwand von HTTP/1.1 bereitstellen.

Kompression

# Enable Brotli (preferred, ~20% better than Gzip)
brotli on;
brotli_types text/plain text/css application/json application/javascript;

# Fallback Gzip
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;
gzip_vary on;

---

5. Grundlegende Web-Vitals

Die Core Web Vitals von Google sind die drei Kennzahlen, die das Nutzererlebnis am meisten beeinflussen:

LCP (Largest Contentful Paint) – Ziel: < 2,5 Sekunden

Misst die Ladeleistung. Das größte sichtbare Element (Hero-Bild, Überschrift) muss schnell gerendert werden.

Optimierung:

• Optimieren Sie das LCP-Image und laden Sie es vor.
• Minimieren Sie Ressourcen, die das Rendern blockieren.
• Verwenden Sie ein CDN.
• Erwägen Sie die Verwendung von „fetchpriority="high"` für das LCP-Element:

  <img src="hero.webp" fetchpriority="high" alt="Hero">
  

FID (First Input Delay) – Ziel: < 100 ms

Misst die Interaktivität. Im Jahr 2024 durch INP (Interaction to Next Paint) ersetzt.

Optimierung:

• Unterteilen Sie lange JavaScript-Aufgaben (>50 ms).
• Verwenden Sie Web Worker für umfangreiche Berechnungen.
• Verschieben Sie unkritisches JavaScript.

CLS (Cumulative Layout Shift) – Ziel: < 0,1

Misst die visuelle Stabilität. Elemente sollten sich nicht unerwartet verschieben.

Optimierung:

• Legen Sie bei Bildern und Videos immer explizit „Breite“ und „Höhe“ fest.
• Reservieren Sie Platz für Anzeigen und Einbettungen.
• Verwenden Sie „font-display: optional“ für benutzerdefinierte Schriftarten.
• Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten.

img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-container {
  min-height: 250px;
}

---

6. Fortgeschrittene Techniken

Lazy Loading

Natives Lazy Loading wird in allen modernen Browsern unterstützt:

<img src="photo.webp" loading="lazy" alt="Lazy loaded image">
<iframe src="map.html" loading="lazy"></iframe>

Verwenden Sie für ältere Browser den Kreuzungsbeobachter als Fallback:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Preconnect und DNS-Prefetch

<!-- DNS prefetch resolves domain names early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Preconnect establishes full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">

Schriftoptimierung

/* Font-display controls how fonts render while loading */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Show fallback text immediately */
}

/* Subset fonts to include only needed characters */
/* Use variable fonts for multiple weights in one file */

---

Werkzeuge zur Messung

Werkzeug	Typ	Am besten für
Leuchtturm	Labor	Auditierung und Empfehlungen
PageSpeed-Einblicke	Labor + Feld	Google-spezifische Messwerte
WebPageTest	Labor	Detaillierte Wasserfallanalyse
Chrome DevTools	Labor	Netzwerk, Leistung, Abdeckung
Sentry-Leistung	RUM	Echte Benutzerüberwachung
Datadog RUM	RUM	End-to-End-Leistungsverfolgung
Kaliber	Kontinuierlich	Leistungsbudgets und CI
Leuchtturm CI	CI	Rückschritte verhindern

---

Leistungsbudgets

Legen Sie ein Leistungsbudget fest, um Rückschritte zu verhindern:

{
  "budgets": [
    {
      "resourceType": "total",
      "budget": 500000
    },
    {
      "resourceType": "script",
      "budget": 150000
    },
    {
      "resourceType": "image",
      "budget": 200000
    },
    {
      "timing": {
        "metric": "interactive"
      },
      "budget": 5000
    }
  ]
}

---

Abschluss

Web-Performance ist eine kontinuierliche Disziplin. Beginnen Sie mit den Elementen mit der größten Wirkung:

1. Messen Sie Ihre aktuelle Basislinie – Verwenden Sie Lighthouse und WebPageTest.
2. Bilder optimieren – Größter schneller Gewinn für die meisten Websites.
3. Caching und Komprimierung aktivieren – Einfache Erfolge mit hohem ROI.
4. Eliminieren Sie renderblockierende Ressourcen – Verschieben Sie JS und integrieren Sie kritisches CSS.
5. Überwachen Sie die wichtigsten Web-Vitalwerte – Verfolgen Sie sie vor Ort, nicht nur im Labor.

Leistungsoptimierung ist nie „fertig“ – sie erfordert ständige Aufmerksamkeit, aber der Return on Investment in Benutzerzufriedenheit, Conversions und SEO ist beträchtlich.