Seitengeschwindigkeit wirkt sich direkt auf die Nutzererfahrung, Konversionsraten und Suchrankings aus. Studien zeigen, dass eine Verzögerung von 1 Sekunde bei der Ladezeit zu einem Rückgang der Konversionen um 7 % führt. Hier sind 12 bewährte Techniken, um Ihre Website schneller zu machen.

1. Bilder optimieren (größter Gewinn)

Bilder sind in der Regel die größten Assets auf jeder Webseite. Drei Schritte:

Moderne Formate verwenden: JPEG/PNG in WebP oder AVIF umwandeln. WebP ist bei gleicher Qualität ~30 % kleiner als JPEG. AVIF ist ~50 % kleiner.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero-Bild" width="1200" height="600" />
</picture>

Lazy Loading implementieren: loading="lazy" für Bilder unterhalb des sichtbaren Bereichs verwenden. Das LCP-Bild niemals lazy-laden.

Explizite Dimensionen setzen: Immer width und height angeben, um Layout-Verschiebungen zu verhindern.

2. Komprimierung aktivieren

Gzip- oder Brotli-Komprimierung auf dem Server aktivieren. Brotli ist neuer und 20–26 % effizienter als Gzip. Allein dadurch können HTML/CSS/JS-Übertragungsgrößen um 60–80 % reduziert werden.

3. Browser-Caching nutzen

Geeignete Cache-Header für statische Assets setzen. Lange Cache-Dauern (1 Jahr) für versionierte Dateien, kurze für HTML:

Cache-Control: public, max-age=31536000, immutable  # Statische Assets
Cache-Control: public, max-age=0, must-revalidate   # HTML

4. Ein Content Delivery Network (CDN) verwenden

Ein CDN liefert Ihre Assets von Servern aus, die geografisch nah an Ihren Nutzern liegen, und reduziert so die Latenz. Für die meisten Websites kann ein CDN allein die TTFB um 50–200 ms verbessern. Beliebte Optionen: Cloudflare, Fastly, AWS CloudFront.

5. Render-blockierende Ressourcen minimieren

Skripte im <head> ohne defer oder async blockieren das Parsing:

<!-- Blockiert das Rendering -->
<script src="analytics.js"></script>

<!-- Nicht-blockierend -->
<script src="analytics.js" defer></script>

<!-- Wird parallel geladen, wird ausgeführt, sobald bereit -->
<script src="widget.js" async></script>

Für CSS: kritisches CSS inline einbetten und den Rest asynchron mit dem media="print"-Trick laden.

6. Kritische Ressourcen vorladen

Den Browser über kritische Ressourcen informieren, bevor er sie beim Parsing entdeckt:

<!-- LCP-Hero-Bild vorladen -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- Kritische Schriftart vorladen -->
<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin />

7. JavaScript-Bundle-Größe reduzieren

JavaScript ist teuer — es muss heruntergeladen, geparst, kompiliert und ausgeführt werden.

Tree Shaking verwenden, um ungenutzten Code zu entfernen
Code Splitting nach Route — nicht alles vorab laden
Bundle-Analyzer nutzen (webpack-bundle-analyzer), um große Abhängigkeiten zu finden
Schwere Bibliotheken durch leichtere Alternativen ersetzen (z. B. date-fns statt moment.js)

8. Schriftarten optimieren

Web-Schriftarten werden oft übersehen, können aber die Performance erheblich beeinflussen:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;    /* Text sofort in Fallback-Schriftart anzeigen */
  font-weight: 400 700;  /* Variable-Font-Bereich */
}

Das Subsetting von Schriftarten (nur tatsächlich verwendete Zeichen einschließen) kann die Schriftdatei um über 80 % verkleinern.

9. Critical CSS implementieren

Das CSS, das für das Rendering des oberhalb des Sichtbereichs liegenden Inhalts benötigt wird, extrahieren und inline einbetten. Dadurch kann der erste Paint ohne Warten auf den vollständigen Stylesheet-Download erfolgen.

Werkzeuge: npm-Paket critical, Penthouse oder automatisiert über PostCSS.

10. Server-Antwortzeit reduzieren (TTFB)

Ziel: unter 600 ms. Verbesserungen:

Connection Pooling für Datenbankverbindungen verwenden
Ergebnisse von Datenbankabfragen cachen (Redis, Memcached)
HTTP/2 oder HTTP/3 auf dem Server aktivieren
Datenbankindizes für langsame Abfragen optimieren
Edge Rendering für dynamische Inhalte in Betracht ziehen

11. Ungenutztes CSS entfernen

CSS-Frameworks wie Bootstrap oder Tailwind können zu großen CSS-Dateien führen, wenn sie nicht richtig konfiguriert sind. PurgeCSS oder die integrierte Bereinigungsfunktion des Frameworks verwenden, um ungenutzte Styles zu entfernen.

Bei Tailwind CSS die content-Option korrekt konfigurieren:

// tailwind.config.js
content: ["./src/**/*.{html,js,ts,tsx}"]

12. Resource Hints verwenden

Browser Hinweise über zukünftige Navigationsvorgänge geben:

<!-- Verbindung zu externer Domain frühzeitig aufbauen -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Ressourcen der nächsten Seite vorabrufen, wenn Navigation wahrscheinlich ist -->
<link rel="prefetch" href="/naechste-seite.html" />

<!-- Wahrscheinlich nächste Seite vorrendern (aggressiv) -->
<link rel="prerender" href="/naechste-seite.html" />

Verbesserungen messen

Messen Sie nach der Implementierung dieser Änderungen mit:

Krokanti Audit: Vollständiger Bericht mit Vorher-Nachher-Vergleich im History-Tab (Pro)
PageSpeed Insights: Felddaten von echten Nutzern
Chrome DevTools Network-Tab: Wasserfall-Visualisierung

Führen Sie einen kostenlosen Website-Audit durch, um Ihren aktuellen Performance-Score zu sehen, genau zu ermitteln, welche dieser 12 Techniken die größten Auswirkungen auf Ihre Website haben werden, und eine priorisierte Aufgabenliste zu erhalten.