Caching-Strategien für schnellen PageSpeed: Server und Browser

Caching ist der wirkungsvollste Hebel, um die Ladezeit (PageSpeed) wiederkehrender Website-Besuche zu minimieren und Webserver vor Überlastung zu schützen. Das Prinzip ist einfach: Einmal berechnete oder heruntergeladene Daten werden in einem schnellen Zwischenspeicher (Cache) abgelegt, damit sie bei der nächsten Anfrage ohne Verarbeitungsverzögerung sofort ausgeliefert werden können.

Gesteuert wird das Caching hauptsächlich über den Cache-Control-Header und die Validierung per ETag. In Kombination mit einem CDN senkt richtiges Caching zudem die TTFB erheblich, weil Inhalte näher beim Nutzer ausgeliefert werden.

Die drei Caching-Ebenen im Web

Eine performante Web-Architektur nutzt Caching auf drei verschiedenen Ebenen:

1. Browser-Caching (Lokales Caching)

Die Daten werden direkt auf dem Gerät des Benutzers (Festplatte oder RAM) gespeichert.

• Steuerung: Erfolgt über HTTP-Antwort-Header wie Cache-Control (z. B. max-age=31536000) und ETag zur Validierung.
• Nutzen: Besucht ein Nutzer eine Seite zum zweiten Mal, müssen Bilder, CSS und JS-Dateien nicht erneut über das Mobilfunknetz geladen werden. Die Seite lädt nahezu instantan.

2. CDN & Edge Caching (Verteiltes Caching)

Ein Content Delivery Network (CDN) speichert Kopien Ihrer statischen Dateien auf weltweit verteilten Servern (Edge-Servern).

• Nutzen: Anfragen werden geografisch am nächstgelegenen Standort des Nutzers abgefangen. Die physische Distanz, die die Datenpakete zurücklegen müssen, sinkt. Dies verkürzt die Roundtrip-Zeiten (RTT) und entlastet den Ursprungsserver (Origin Server).

3. Serverseitiges Caching

Bevor Daten an den Browser gesendet werden, laufen auf dem Webserver Prozesse ab (z. B. Datenbankabfragen oder das Generieren von HTML).

• Page Caching: Der Server speichert das fertig generierte HTML einer Seite und liefert dieses bei der nächsten Anfrage direkt aus, ohne die Applikationslogik (z. B. Java oder PHP) erneut auszuführen.
• Object Caching (z. B. mit Redis): Speichert häufig benötigte Datenbank-Abfrageergebnisse im RAM, um langsame Festplattenzugriffe zu vermeiden.

---

Cache-Strategie nach Ressourcentyp

Nicht jede Datei darf gleich lange zwischengespeichert werden. Die folgende Tabelle zeigt bewährte Vorgaben:

Ressourcentyp	Empfohlene Cache-Control	Begründung
HTML-Dokument	no-cache	Inhalte ändern sich, Revalidierung nötig
Gehashte CSS/JS	max-age=31536000, immutable	Dateiname ändert sich bei Updates
Bilder/Schriften	max-age=2592000	selten geändert, lange cachebar
API-Antwort (privat)	private, no-store	nutzerspezifisch, nicht teilbar

Vorher/Nachher: Wiederbesuch einer Seite

Ohne Caching lädt ein Wiederbesucher sämtliche 1,8 MB Assets erneut – die Seite braucht über das Mobilnetz mehrere Sekunden. Mit korrektem Caching (gehashte Assets, immutable) werden Bilder, CSS und JS aus dem lokalen Cache bedient; nur das kleine HTML-Dokument wird neu validiert. Das Ergebnis: Die Seite erscheint nahezu sofort, und der Server überträgt statt 1,8 MB nur wenige Kilobyte.

---

Best Practices für die Caching-Konfiguration

• Cache-Busting erzwingen: Vergeben Sie für alle statischen Assets (CSS, JS) gehashte Dateinamen (z. B. styles.h8f2.css). Dies erlaubt es Ihnen, die Browser-Cache-Dauer auf das Maximum (max-age=31536000, 1 Jahr) einzustellen. Ändern Sie den Code, generiert der Build-Prozess einen neuen Dateinamen, und der Browser lädt die Datei sofort neu herunter.
• HTML-Caching restriktiv handhaben: HTML-Dateien sollten nicht über lange Zeiträume starr im Browser gecached werden, da Nutzer sonst inhaltliche Updates verpassen. Nutzen Sie Cache-Control: no-cache kombiniert mit ETags.
• Vary-Header mitsenden: Stellen Sie sicher, dass Ihr Server Vary: Accept-Encoding sendet, damit CDNs komprimierte (Brotli/Gzip) und unkomprimierte Versionen der Dateien sauber trennen.

[!TIP] Die richtige Caching-Strategie entscheidet darüber, ob eine Website unter Last stabil bleibt und blitzschnell lädt. Prüfen Sie die Caching-Effizienz und die Header Ihrer Website mit dem PageSpeed Check auf balou.tools.