Langsame Website trotz Caching
Deine Website ist gecacht, aber fühlt sich trotzdem langsam an? Hier erfährst du, was du prüfen solltest.
1. Überprüfe, ob das Caching funktioniert
Bestätige zunächst, dass deine Inhalte tatsächlich zwischengespeichert werden. Prüfe die Antwort-Header:
fs-cache: HIT ← Inhalt aus dem Cache bereitgestellt
fs-cache: MISS ← Inhalt vom Ursprungsserver abgerufenWenn du nur MISSes siehst, prüfe, ob dein Ursprungsserver Cache-Control: no-cache oder private-Header sendet.
2. Prüfe nicht zwischengespeicherte Ressourcen
Auch wenn dein HTML gecacht ist, können langsame Drittanbieter-Ressourcen die Leistung beeinträchtigen.
Häufige Verursacher:
- Google Fonts synchron geladen
- Analytics-Skripte (Google Analytics, Facebook Pixel)
- Chat-Widgets (Intercom, Drift, Crisp)
- Externe Werbeskripte
- Social-Media-Einbettungen
Tipp: Lade Drittanbieter-Skripte mit den Attributen async oder defer, um zu verhindern, dass sie das Rendern der Seite blockieren.
3. Große Bilder auf der Seite
Selbst mit WebP-Konvertierung verlangsamen überdimensionierte Bilder den LCP.
Lösungen:
- Skaliere Bilder auf die tatsächliche Anzeigegröße (liefere keine 4000px-Bilder für 800px-Container)
- Verwende responsive Bilder mit
srcset - Lade Bilder unterhalb des sichtbaren Bereichs verzögert
- Erwäge die Verwendung eines Hero-Bildes, das für den Viewport optimiert ist
4. Langsamer Ursprungsserver
Bei Cache-MISSes (erste Anfragen, dynamische Seiten) ist die Geschwindigkeit deines Ursprungsservers weiterhin wichtig.
Prüfe deinen Ursprungsserver:
- Langsame Datenbankabfragen (Slow-Query-Logs prüfen)
- Fehlende Datenbankindizes
- Zu viele Plugins (WordPress/WooCommerce)
- Unzureichende Serverressourcen
- Kein Opcode-Caching (PHP)
Ziel: Die TTFB des Ursprungsservers sollte unter 500ms liegen. fast.site-Caching verstärkt die Geschwindigkeit deines Ursprungsservers. Ein schneller Ursprungsserver bedeutet noch schnellere zwischengespeicherte Antworten.
5. Render-blockierende Ressourcen
CSS und JS im <head> blockieren das Rendern der Seite.
Lösungen:
- Kritisches CSS im
<head>inline einbinden - Nicht-kritisches CSS mit
media="print" onload="this.media='all'"laden deferzu JavaScript-Dateien hinzufügen- Skripte an das Ende von
<body>verschieben
Leistungs-Checkliste
- fs-cache zeigt HIT für statische Ressourcen
- Drittanbieter-Skripte sind async/deferred
- Bilder sind angemessen dimensioniert
- TTFB des Ursprungsservers liegt unter 500ms
- Keine render-blockierenden Ressourcen im Head