Browser Caching

Definition

Browser Caching bezeichnet das lokale Speichern von Webressourcen wie Bilder, CSS, JavaScript und Schriften im Browser-Cache des Nutzers, um bei Folgebesuchen Ladezeiten zu reduzieren. Der Server gibt über HTTP-Response-Header vor, wie lange Ressourcen gecacht werden dürfen. Gut konfiguriertes Browser Caching verbessert sowohl die User Experience als auch Core Web Vitals wie LCP erheblich.

Erläuterung

Die Caching-Steuerung erfolgt hauptsächlich über den Cache-Control-Header mit Direktiven wie max-age=31536000 (ein Jahr), public (auch von CDNs cachebar) und immutable (Ressource ändert sich nie). Der ETag-Header ermöglicht konditionelle Anfragen: Der Browser sendet den gespeicherten ETag mit und der Server antwortet entweder mit 304 Not Modified (kein erneuter Download nötig) oder der aktuellen Version. Cache-Busting durch versionierte Dateinamen (Hashes im Dateinamen, z. B. style.abc123.css) erlaubt lange Cache-Zeiten bei gleichzeitiger sofortiger Aktualisierung nach Deployments. Lighthouse und PageSpeed Insights weisen auf fehlerhaftes Browser Caching hin und geben konkrete Empfehlungen. Ressourcen, die nie gecacht werden sollten (HTML-Dokumente, API-Responses mit nutzerindividuellen Daten), erhalten Cache-Control: no-cache oder no-store.

Praxistipp: Konfigurieren Sie für alle statischen Assets (Bilder, CSS, JS) ein Cache-Max-Age von mindestens einem Jahr und führen Sie bei neuen Releases einen Build-Prozess durch, der Hashes in Dateinamen einbettet. Setzen Sie HTML-Seiten niemals auf langfristiges Caching, da Nutzer sonst keine aktuellen Inhalte sehen.