Was Browser-Caching macht

So funktioniert es

Der Header Cache-Control sagt dem Browser, was er mit einer Datei tun darf. Mit max-age=604800 darf er sie eine Woche (604800 Sekunden) lang verwenden, ohne nachzufragen. Mit no-cache muss er jedes Mal nachfragen, mit no-store darf er sie gar nicht speichern.

Nachfragen geht schnell, wenn der Server einen Validator mitschickt: ein ETag (eine Kennung des Inhalts) oder Last-Modified (das Änderungsdatum). Der Browser fragt dann „hat sich das geändert?“, und der Server antwortet mit 304 Not Modified ohne die Datei selbst.

bytereport prüft zwei Dinge:

• Statische Dateien. CSS, JavaScript, Bilder und Schriften, die das HTML nennt, auch die von fremden Domains, sollen Browser mindestens eine Woche behalten dürfen. Ist das bei einzelnen Dateien nicht so, gibt es eine Warnung, bei mehr als der Hälfte einen Fehler. Gelesen wird max-age, sonst Expires; no-cache und no-store zählen als gar nicht.
• Die Seite selbst. Sendet sie weder Cache-Control noch ETag oder Last-Modified, gibt es einen Hinweis.

Worauf es ankommt

• Ein Jahr für Dateien mit Hash im Namen. Ändert sich der Name mit dem Inhalt, etwa app.3f9a1c.js, kann die Datei ein Jahr bleiben; eine neue Version bekommt einen neuen Namen.
• Eine Woche für andere statische Dateien. Cache-Control: max-age=604800 reicht.
• Die Seite jedes Mal prüfen lassen. HTML ändert sich, es soll nicht lange ungeprüft im Cache liegen. Mit no-cache und einem ETag fragt der Browser jedes Mal kurz nach.
• Fremde Dateien. Ihre Cache-Dauer bestimmt der Anbieter. Sind sie das Problem, hilft nur, sie selbst auszuliefern, siehe Drittanbieter.

Cache-Control: public, max-age=31536000, immutable

Cache-Control: no-cache
ETag: "5f2b-1a3c"

So richtest du es ein

Die Header setzt der Webserver, ein CDN oder bei Shared Hosting die .htaccess; Cache-Plugins im CMS übernehmen das oft. Ob Dateinamen einen Hash bekommen, entscheidet das Build-Werkzeug oder das Theme. nginx und Apache senden für statische Dateien von sich aus ein ETag; für Seiten aus PHP oder einem CMS muss die Anwendung es setzen.

Ein Beispiel für einen Ordner /assets/ mit gehashten Dateinamen (Apache braucht mod_headers, die Zeile gehört in eine .htaccess in diesem Ordner):

location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

Header set Cache-Control "public, max-age=31536000, immutable"

Für statische Dateien ohne Hash im Namen setzt du stattdessen max-age=604800.