Zwischenspeicher im Browser

Was wir prüfen

Wir laden die Startseite in einem echten Browser und schauen uns alle Bilder, Stylesheets, Skripte und Schriften an, die vom eigenen Server der Website kommen. Für jede Datei prüfen wir, ob der Server eine Cache-Vorgabe mitschickt (Cache-Control mit einer Dauer oder Expires).

• Fehlt sie bei mindestens drei Dateien und mindestens der Hälfte aller eigenen Dateien, gibt es eine Warnung.
• Fehlt sie bei einzelnen, einen Hinweis.

Dateien von fremden Diensten wie Google Fonts oder YouTube zählen nicht mit, weil sich deren Einstellungen von der Website aus nicht beeinflussen lassen.

Warum das wichtig ist

Wer die Website besucht, lädt beim ersten Aufruf alle Dateien herunter: Logo, Schriften, Stylesheets, Skripte. Beim Wechsel auf die nächste Unterseite oder beim Besuch am nächsten Tag sind die meisten davon noch dieselben.

Mit einer Cache-Vorgabe weiss der Browser, dass er sie aufbewahren darf, und verwendet sie ohne Nachfrage wieder. Die zweite Seite lädt dann fast sofort.

Ohne Cache-Vorgabe fragt der Browser bei jedem Seitenwechsel beim Server nach, ob sich etwas geändert hat, oder lädt alles neu. Das kostet Zeit und Datenvolumen, besonders auf dem Smartphone. Gerade wer sich mehrere Seiten anschaut, also ernsthaft interessiert ist, wartet dann am meisten.

So behebst Du es

Für Dateien, die sich selten ändern, ist eine lange Dauer üblich:

Dateityp	Empfohlene Dauer
Bilder, Schriften	1 Jahr
CSS und JavaScript mit Versionsnummer	1 Jahr
CSS und JavaScript ohne Versionsnummer	1 Woche bis 1 Monat
HTML	kurz oder gar nicht

Apache (.htaccess)

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

WordPress

Cache-Plugins wie WP Rocket, W3 Total Cache oder LiteSpeed Cache setzen die Cache-Vorgaben mit einem Häkchen, meist unter «Browser-Cache». WordPress hängt an Stylesheets und Skripte automatisch eine Versionsnummer an (?ver=…), sodass Änderungen trotzdem sofort ankommen.

Hosting-Panel und CDN

Viele Hoster haben eine Einstellung «Browser-Caching». Ein CDN wie Cloudflare setzt die Vorgaben ebenfalls, prüfe dort die «Browser Cache TTL».

Wix, Jimdo, Squarespace

Die Baukästen regeln das selbst. Einstellen lässt sich hier nichts.

So prüfst Du es selbst

Öffne die Entwicklertools (F12), Reiter «Netzwerk», lade die Seite neu und klick auf eine Bilddatei. Unter «Antwort-Header» sollte cache-control: max-age=… mit einer grossen Zahl (Sekunden) stehen. Lade die Seite erneut: Bei zwischengespeicherten Dateien steht in der Spalte «Grösse» dann «(Speicher-Cache)» oder «(Festplatten-Cache)».

Häufige Fragen

Sehen Besucher dann nicht veraltete Inhalte?

Nicht, wenn es richtig gemacht ist. Das HTML selbst wird nicht lange zwischengespeichert. Bilder, Stylesheets und Skripte erhalten bei jeder Änderung einen neuen Dateinamen oder eine Versionsnummer, die meisten CMS machen das automatisch.

Was ist der Unterschied zum Seiten-Cache?

Der Seiten-Cache liegt auf dem Server und spart Rechenzeit beim Zusammenbauen der Seite. Der Browser-Cache liegt beim Besucher und spart das erneute Herunterladen von Dateien. Beides ergänzt sich.