Browser-Caching: Cache-Control-Header richtig setzen

Warum das wichtig ist

Wer deine Seite zum zweiten Mal öffnet oder auf eine Unterseite klickt, braucht dasselbe Stylesheet und dieselben Skripte wie beim ersten Aufruf. Mit einem langen Cache-Header holt der Browser sie aus dem eigenen Speicher, ohne beim Server überhaupt anzufragen. Das spart Datenvolumen und macht jeden weiteren Seitenaufruf spürbar schneller.

Fehlt der Header, rät der Browser. Er nimmt dann oft das Änderungsdatum der Datei als Anhaltspunkt und speichert sie für eine kurze, schwer vorhersagbare Zeit. Oder er fragt bei jedem Aufruf nach, ob sich etwas geändert hat. Diese Rückfrage ist klein, kostet auf dem Handy aber pro Datei eine Runde zum Server.

Zur Ehrlichkeit gehört: Beim allerersten Besuch bringt Caching nichts. Genau diesen Erstbesuch simuliert der Performance-Wert von Google, die Zahl steigt durch Caching also kaum. PageSpeed Insights weist in den Diagnosen trotzdem auf zu kurze Cache-Zeiten hin. Der Gewinn liegt bei wiederkehrenden Besuchern und bei allen, die sich durch mehrere Seiten klicken, in einem Shop also bei fast jedem.

So prüfst du es selbst

Auf der Kommandozeile geht es mit curl -I https://deine-domain.de/pfad/style.css.

Mit dem kostenlosen Check von checkfrei geht es ohne Entwicklertools. Wir lesen den Cache-Control-Header einer eigenen CSS- oder JS-Datei aus. Ab einer Woche (max-age=604800) oder mit immutable ist es gut, kürzer gibt eine Warnung, ganz ohne Angabe einen Fehler.

1. 01Öffne deine Seite, drück F12 und geh in den Reiter Netzwerk.
2. 02Lade die Seite neu und klick eine CSS- oder JS-Datei von deiner eigenen Domain an.
3. 03Such unter Response Headers (Antwort-Header) nach cache-control. Steht dort max-age=31536000, sind das 365 Tage in Sekunden.

So behebst du es

Vorher eine Sache, die viele übersehen: Ein langer Cache ist nur dann unproblematisch, wenn sich die Adresse einer Datei ändert, sobald du sie änderst. Sonst sehen Stammbesucher nach einem Design-Update wochenlang das alte CSS. WordPress hängt deshalb an eingebundene Dateien ?ver= mit einer Versionsnummer an, moderne Build-Tools schreiben einen Hash in den Dateinamen (app.3f9c2a.js). Pflegst du Dateien von Hand, änderst du bei jeder Änderung den Namen oder einen Parameter wie style.css?v=2.

Die HTML-Seite selbst cachst du im Browser nicht lange. Sie soll bei jedem Besuch frisch sein, sonst tauchen neue Inhalte erst verspätet auf.

Bei Shopify, Wix und Jimdo kommen die Dateien über das CDN der Plattform, eigene Header kannst du dort nicht setzen. Die Cache-Zeiten sind dort in der Regel vernünftig. Meldet checkfrei trotzdem etwas, bleibt nur der Support.

# Browser-Caching für statische Dateien
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType text/javascript "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(css|js|webp|avif|jpe?g|png|svg|woff2)$">
    Header set Cache-Control "public, max-age=31536000"
  </FilesMatch>
</IfModule>

location ~* \.(css|js|webp|avif|jpe?g|png|svg|woff2)$ {
    expires 1y;
}

# Variante mit immutable, nur bei versionierten Dateinamen:
# location ~* \.(css|js)$ {
#     add_header Cache-Control "public, max-age=31536000, immutable";
# }

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/bilder/:pfad*",
        headers: [{ key: "Cache-Control", value: "public, max-age=2592000" }],
      },
    ];
  },
};

Typische Fehler

• ·Lange Cache-Zeiten ohne Versionierung. Danach wundert sich jemand, warum der Kunde das neue Logo nicht sieht.
• ·Die HTML-Seite für Stunden im Browser cachen. Neue Blogartikel und geänderte Preise erscheinen dann verspätet.
• ·no-cache für "nichts speichern" halten. Es bedeutet "vor jeder Nutzung beim Server nachfragen". Wirklich nichts speichern heißt no-store.