Tokenlabor

Cache-Control-Generator

Der Cache-Control-Generator erzeugt den Cache-Control-Header mit max-age, s-maxage, no-store, immutable und stale-while-revalidate, mit Snippets für nginx, Apache und PHP.

    –

     

    Header und Server-Konfiguration
    DirektiveBedeutung

    Vorhandenen Header erklären

    DirektiveWertBedeutung

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    Cache-Control richtig einsetzen

    Der Cache-Control-Generator stellt den Cache-Control-Header zusammen, mit dem ein Server festlegt, ob und wie lange Browser, CDNs und Proxys eine Antwort zwischenspeichern dürfen. Die wichtigsten Direktiven: max-age gibt die Frische in Sekunden an, s-maxage überschreibt sie für gemeinsame Caches wie ein CDN, no-cache erlaubt das Speichern, verlangt aber vor jeder Nutzung eine Rückfrage beim Server, und no-store verbietet das Speichern ganz. Grundlage ist RFC 9111.

    Für Dateien, deren Name sich bei jeder Änderung ändert, etwa app.3f9a1c.js, ist public, max-age=31536000, immutable üblich: ein Jahr frisch, und der Browser fragt auch beim Neuladen nicht nach (RFC 8246). HTML-Seiten bekommen meist no-cache, damit neue Inhalte sofort ankommen, während ETag oder Last-Modified unnötige Übertragungen sparen. stale-while-revalidate nach RFC 5861 erlaubt, kurz eine veraltete Kopie auszuliefern, während im Hintergrund eine frische geholt wird.

    Der Generator liefert den Header zusätzlich als Zeile für nginx, Apache, PHP und Node.js und erklärt jede Direktive. Unten können Sie einen vorhandenen Header einfügen und zerlegen lassen. Grenzen: CDNs haben teils eigene Regeln und Header wie CDN-Cache-Control; prüfen Sie deren Dokumentation. Einen kompletten Server-Block mit Caching für statische Dateien erzeugt der Nginx-Config-Generator.

    Anleitung: Cache-Control-Generator in 5 Schritten

    1. Eine Vorlage wählen, etwa „Statische Dateien mit Versions-Hash“ oder „HTML-Seiten (immer prüfen)“, oder eigene Werte einstellen.
    2. Festlegen, wer speichern darf (public oder private), und max-age, s-maxage, stale-while-revalidate sowie stale-if-error mit Einheit angeben.
    3. Schalter wie no-store, no-cache, immutable oder must-revalidate setzen.
    4. Header und Server-Konfiguration für nginx, Apache, PHP oder Node.js kopieren.
    5. Zum Prüfen eines bestehenden Headers den Wert unter „Vorhandenen Header erklären“ einfügen.

    Typische Anwendungsfälle

    • Statische Dateien mit Hash im Dateinamen ein Jahr lang im Browser zwischenspeichern lassen.
    • Konto- und Warenkorbseiten mit private oder no-store vor dem Speichern in gemeinsamen Caches schützen.
    • Auslieferung über ein CDN: Seiten mit s-maxage länger im CDN halten als im Browser.
    • Einen fremden Header aus den Entwicklertools einfügen und Direktive für Direktive verstehen.
    Fragen

    Häufige Fragen

    Was ist der Unterschied zwischen no-cache und no-store?

    no-cache erlaubt das Speichern, aber vor jeder Nutzung muss der Cache beim Server nachfragen, ob die Kopie noch aktuell ist. no-store verbietet jedes Speichern, die Antwort wird bei jedem Aufruf vollständig neu geladen.

    Welcher Cache-Control-Header passt für CSS und JavaScript?

    Wenn der Dateiname einen Versions-Hash enthält: public, max-age=31536000, immutable. Ohne Hash im Namen besser eine kurze Frische oder no-cache, sonst sehen Besucher nach Änderungen alte Dateien.

    Was bewirkt immutable?

    immutable sagt dem Browser, dass sich die Datei während ihrer Frische nie ändert. Er verzichtet dann auch beim Neuladen der Seite auf die Rückfrage beim Server. Sinnvoll ist das nur zusammen mit einem langen max-age und versionierten Dateinamen.

    Wofür ist s-maxage?

    s-maxage gilt nur für gemeinsame Caches wie CDNs und Proxys und hat dort Vorrang vor max-age. So kann ein CDN eine Seite eine Stunde halten, während Browser sie nach einer Minute neu prüfen.

    Ersetzt Cache-Control den Expires-Header?

    Ja. Wenn beide vorhanden sind, hat max-age Vorrang vor Expires. Expires braucht man nur noch für sehr alte Caches. nginx setzt mit der Anweisung expires übrigens beide Header.

    Wie prüfe ich den Cache-Control-Header einer Seite?

    In den Entwicklertools des Browsers im Tab Netzwerk die Anfrage anklicken und die Antwort-Header ansehen. Auf der Kommandozeile zeigt curl -I https://example.com die Header. Den Wert können Sie unten im Werkzeug erklären lassen.

    Was bedeutet must-revalidate?

    Ist eine Kopie abgelaufen, darf der Cache sie erst nach erfolgreicher Rückfrage beim Server wieder ausliefern, auch wenn der Server gerade nicht erreichbar ist. Solange die Kopie frisch ist, wird sie normal genutzt.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 358 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen