Browser-Caching statischer Dateien

Was geprüft

Für eigene statische Dateien (CSS, JavaScript, Bilder) wird gelesen, ob Cache-Control (max-age bzw. s-maxage) oder Expires eine Cache-Dauer angibt; no-store, no-cache oder fehlende Angaben zählen als keine Dauer. Dazu ein bedingter Abruf mit ETag oder Last-Modified, der 304 („nicht geändert“) liefern sollte. Dauern unter 7 Tagen sind nur ein Hinweis. Ohne eigene statische Dateien trifft der Punkt nicht zu.

Wie relevant

Mittel, wenn eigene Dateien keine Cache-Dauer haben oder der bedingte Abruf nicht mit 304 antwortet. Bleibt der bedingte Abruf ohne Antwort, ist das keine Messung und fließt nicht in die Wertung ein.

Warum

Ohne Cache-Dauer laden wiederkehrende Besucher und jeder Seitenwechsel dieselben Dateien erneut. Das kostet Zeit und Serverlast, obwohl sich die Dateien nicht geändert haben.

Wie beheben

Setzen Sie für versionierte statische Dateien eine lange Cache-Dauer (z. B. ein Jahr mit „immutable“) und ändern Sie bei Updates den Dateinamen oder einen Versionsparameter. Für nicht versionierte Dateien eignen sich kürzere Dauern mit funktionierendem ETag oder Last-Modified.

Nebenwirkung: Lange Cache-Dauern ohne Versionierung führen dazu, dass Besucher nach einem Update alte Dateien sehen. Prüfen Sie vorher, ob Theme und Plugins Dateinamen versionieren (z. B. „style.css?ver=1.2“). HTML selbst nicht lange cachen.

WordPress: WordPress hängt bei korrekt eingebundenen Dateien „?ver=“ an, das eignet sich für lange Cache-Dauern. Cache-Plugins und Hoster setzen oft eigene Regeln; doppelte Regeln in .htaccess und Plugin führen zu unklaren Ergebnissen.

Codebeispiel

Apache (.htaccess, mod_expires und mod_headers)

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType text/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"
</IfModule>

nginx

location ~* \.(css|js|webp|avif|jpe?g|png|gif|svg|woff2)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    etag on;
}

Cloudflare (Browser Cache TTL)

Caching > Configuration > Browser Cache TTL: "Respect Existing Headers"
oder per Rules > Cache Rules für statische Dateiendungen eine Browser TTL von 1 Jahr setzen.

Weiterführende Quellen

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Conditional_requests
• https://www.rfc-editor.org/rfc/rfc9111
• https://web.dev/articles/http-cache