Fehlerbehebung

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 abgerufen

Wenn du nur MISSes siehst, prüfe, ob dein Ursprungsserver Cache-Control: no-cache oder private-Header sendet.

Erfahre, wie du prüfst, ob der Cache funktioniert →

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
  • defer zu 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