Cache-Control im HTTP verständlich erklärt: Caching-Direktiven

Der HTTP-Header Cache-Control ist die wichtigste Anweisung zur Steuerung des Caching-Verhaltens im Web. Er teilt Webbrowsern, Proxys und Content Delivery Networks (CDNs) mit, wie lange sie eine Ressource (wie HTML-Seiten, Bilder, CSS- oder JavaScript-Dateien) lokal zwischenspeichern dürfen, unter welchen Bedingungen diese Caches validiert werden müssen und wann ein Caching komplett verboten ist. Zusammen mit dem ETag-Header bildet Cache-Control die Grundlage für effizientes Browser- und CDN-Caching.

Die wichtigsten Cache-Control Direktiven

Cache-Control-Header bestehen aus einer kommagetrennten Liste von Direktiven. Die wichtigsten Anweisungen lassen sich in drei Kategorien unterteilen:

1. Caching-Erlaubnis und Empfänger (Sichtbarkeit)

• public: Die Antwort darf von beliebigen Caches zwischengespeichert werden – sowohl im Browser des Nutzers als auch auf öffentlichen Proxy-Servern und CDNs.
• private: Die Ressource enthält persönliche Daten und darf ausschliesslich im privaten Browser-Cache des Nutzers gespeichert werden. Zwischengeschaltete CDNs dürfen diese Daten nicht cachen.

2. Lebensdauer (Frische)

• max-age=[Sekunden]: Bestimmt die maximale Dauer in Sekunden, die eine Datei als „frisch“ gilt. Nach Ablauf dieser Zeit gilt sie als veraltet (stale) und muss neu validiert werden. Beispiel: max-age=31536000 (ein Jahr).
• s-maxage=[Sekunden]: Überschreibt die max-age-Eigenschaft, gilt jedoch ausschliesslich für Shared Caches (CDNs/Proxys).

3. Validierung und Umgehung

• no-store: Das Speichern der Antwort im Cache ist unter allen Umständen verboten. Jede Anfrage muss komplett neu vom Server geladen werden. Perfekt für hochsensible Dokumente oder Login-Seiten.
• no-cache: Die Ressource darf gespeichert werden, muss aber bei jedem Aufruf zwingend mit dem Server validiert werden (z. B. über den ETag-Header), bevor sie aus dem Cache geladen wird.
• must-revalidate: Weist den Browser an, unter keinen Umständen veraltete Cache-Daten auszugeben (z. B. bei Netzwerkstörungen), sondern zwingend eine Validierung mit dem Server durchzuführen.

---

Best Practice Konfigurationen

Je nach Dateityp sollten Webmaster unterschiedliche Cache-Control-Strategien im Webserver (Nginx/Apache) konfigurieren:

• Statische Assets (Bilder, Fonts, gehashte CSS/JS-Dateien): Da diese Dateien bei Code-Änderungen über geänderte Dateinamen (z. B. styles.a8f9b2.css) neu geladen werden, können sie extrem lange gecached werden: Cache-Control: public, max-age=31536000, immutable
• Dynamische HTML-Seiten (z. B. Startseite): Hier soll der Browser sofort inhaltliche Änderungen mitbekommen, aber unnötige Downloads vermieden werden: Cache-Control: no-cache, must-revalidate
• Sensible Benutzerdaten (z. B. Profil-Seiten, Rechnungen): Cache-Control: no-store, private

Cache-Control: HTML vs. statische Assets

Der häufigste Fehler ist eine einheitliche Caching-Regel für alle Dateitypen. HTML und gehashte Assets brauchen gegensätzliche Strategien:

Ressourcentyp	Empfohlener Header	Begründung
HTML-Seiten	no-cache, must-revalidate	Inhaltsänderungen müssen sofort sichtbar sein
Gehashte CSS/JS (app.a8f9b2.js)	public, max-age=31536000, immutable	Dateiname ändert sich bei jedem Build
Bilder & Fonts	public, max-age=2592000	Ändern sich selten, 30 Tage sind sicher
Sensible Daten (Profil, Rechnung)	no-store, private	Dürfen nie zwischengespeichert werden

Vorher/Nachher: Wirkung auf die Ladezeit

Ein Online-Shop lieferte alle Assets mit no-cache aus. Nach der Umstellung auf langlebiges Caching gehashter Dateien sank die Zahl der Server-Requests beim wiederholten Besuch deutlich:

Messwert	Vorher (no-cache)	Nachher (immutable)
Requests bei Wiederbesuch	48	3
Übertragene Datenmenge	1,8 MB	24 KB
Wahrgenommene Ladezeit	~2,4 s	~0,4 s

Das korrekte Zusammenspiel mit Kompression (siehe Accept-Encoding) und einem CDN verstärkt diesen Effekt zusätzlich. Mehr Hintergründe im Leitfaden zum Caching für PageSpeed.

[!TIP] Ein falsch konfigurierter Cache-Control-Header verlangsamt entweder Ihre Website oder verhindert, dass Nutzer aktualisierte Website-Inhalte sehen. Prüfen Sie die Caching-Header Ihrer Webseiten live mit dem HTTP Header Check auf balou.tools.