Was ist Browser-Caching?

Browser-Caching: Definition und Nutzen

Beim ersten Besuch einer Website muss der Browser jede Datei vom Server holen. Bei weiteren Seitenaufrufen ändern sich Logo, Schriften, Stylesheet und Skripte aber meist nicht. Browser-Caching sorgt dafür, dass diese Dateien auf dem Gerät des Besuchers bleiben. Folgeseiten und spätere Besuche laden dadurch spürbar schneller.

Gesteuert wird das vom Server über HTTP-Header, vor allem Cache-Control. Der Betreiber legt damit fest, welche Dateien wie lange zwischengespeichert werden dürfen. Beschrieben ist das Verfahren im HTTP-Standard RFC 9111. Ohne passende Header entscheidet der Browser selbst, was oft zu unnötigen oder zu veralteten Zwischenspeicherungen führt.

So funktioniert das Caching

Der Server schickt mit jeder Datei Header mit, die ihre Lebensdauer im Cache bestimmen. Läuft sie ab, fragt der Browser nach, ob sich die Datei geändert hat. Ist sie unverändert, antwortet der Server nur mit dem kurzen Statuscode 304 (Not Modified) und spart so die erneute Übertragung.

• Cache-Control: max-age – Dauer in Sekunden, für die eine Datei als aktuell gilt
• ETag und Last-Modified – Kennzeichen, mit denen der Browser Änderungen prüft
• no-cache – vor jeder Nutzung beim Server nachfragen
• no-store – gar nicht speichern, etwa bei sensiblen Daten
• immutable – Datei ändert sich nie, keine Nachfrage nötig

Praxis­bei­spiel: Autohaus ändert sein Design

Ein Autohaus ändert die Farben im Stylesheet seiner Website. Stammkunden sehen weiterhin das alte Design, weil ihr Browser die Datei noch im Cache hat. Die Lösung heißt Cache Busting: Statische Dateien erhalten einen Hash im Namen, zum Beispiel stil.3f9a1c.css. Ändert sich der Inhalt, ändert sich der Dateiname, und der Browser lädt die neue Version sofort.

Solche versionierten Dateien dürfen bis zu einem Jahr im Cache liegen, weil jede Änderung automatisch einen neuen Namen bekommt. Das HTML-Dokument selbst erhält dagegen eine kurze Lebensdauer oder no-cache, damit es immer auf die aktuellen Dateinamen verweist, sobald sich eine Datei geändert hat.

Vorteile, Grenzen und typische Fehler

Gutes Caching verkürzt Ladezeiten, entlastet den Server und senkt den Datenverbrauch. Es ist eine der wirksamsten Maßnahmen der Pagespeed-Optimierung, ohne dass Design oder Inhalte sich ändern. Es hilft allerdings nur wiederkehrenden Besuchern, der erste Besuch profitiert nicht davon und braucht weiterhin schlanke Dateien.

• Lange Laufzeit ohne versionierte Dateinamen: Änderungen kommen nicht an
• Gar keine Cache-Header: Jede Datei wird jedes Mal neu geladen
• Personalisierte Inhalte versehentlich öffentlich zwischengespeichert
• HTML-Seiten mit langer Laufzeit: Besucher sehen veraltete Inhalte

Umsetzung

Caching wird im Webserver (Apache, Nginx), im CDN oder per Plugin eingestellt. Nano Concepts konfiguriert die Cache-Header passend zur Anwendung, richtet versionierte Dateinamen im Build-Prozess ein und prüft mit Messwerkzeugen, ob alle Dateien richtig ausgeliefert werden und Änderungen bei den Besuchern ankommen.