Geschrieben von Christian Schnettelker

Schlagwörter:

Immer Ärger mit dem Cache

Der Cache, genauer gesagt der Browser-Cache, ist eigentlich eine praktische Sache. Wurde eine Webseite kürzlich bereits aufgerufen lädt der Browser die Seite nicht erneut aus dem Netz, sondern zeigt die gespeicherte Fassung ohne weitere Verzögerungen sofort an.
Speicher-Chips
Das klappt auch meistens sehr gut, leider gibt es auch hier wie immer einen Haken an der Sache.

Warum wurde meine Seite nicht geändert?

Bei meiner Arbeit wiederholt sich regelmäßig folgendes Szenario: der Text oder ein Bild auf einer Webseite soll geändert werden. Der Kunde hat die zu ändernde Seite natürlich vorher angesehen, d.h. diese ist in seinem lokalen Browser-Cache gespeichert.

Man beauftragt mich per Email, telefonisch oder manchmal auch noch per Fax, die gewünschten Änderungen vorzunehmen, was ich schnellstmöglich tue, meist innerhalb von 24-48 Stunden. Ich antworte dann dem Kunden – als Bestätigung für die durchgeführte Änderung – mit einer Email; diese enthält dann Deep-Links auf die geänderten Seiten.

Regelmäßig erreichten mich dann ein paar Tage später verwunderte Anrufe, die Seite sei immer noch im alten Zustand. Den Grund können Sie sich jetzt sicher denken: die ungeänderte Fassung der Seite befand sich noch im Browser-Cache des Rechners des Kunden und wird diesem als aktuell angezeigt.

Gegenmaßnahmen

Theoretisch sollte der Browser auch feststellen können, ob eine Webseite zwischenzeitlich geändert wurde, nur scheint das nicht immer zu klappen. Eigentlich klappt das sogar sogut wie nie.

Als erste Maßnahme hatte ich mir daher vor ein paar Jahren angewöhnt, unter jeden Link in den Bestätigungs-Emails den folgenden Satz zu setzen:

!!! Wichtiger Hinweis: Ihr Browser speichert eine bereits angezeigte Seite für eine Zeit zwischen, Sie sehen uU durchgeführte Änderungen nicht. Aktualisieren Sie daher IMMER JEDE oben aufgeführte Seite mit F5 oder rechte Maustaste / aktualisieren !!!

Oft wurde dieser Hinweis im Eifer des Gefechts aber überlesen. Eine Möglichkeit, das Problem zu lösen, ist, mittels spezieller Meta-Tags im Head-Bereich der betroffenen Seiten das „Caching“ komplett abzuschalten. Beispielsweise so:

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Dadurch würde man dann aber auch auf die großen Geschwindigkeits-Vorteile verzichten und es kann zu einem unschönen „Flackern“ kommen, wenn Hintergrundgrafiken etc. immer wieder neu geladen werden müssen.

Auch ist man gezwungen, alle HTML-Dateien von Hand zu ändern – insgesamt keine schöne Lösung.

.htaccess

Die mE beste und eleganteste Möglichkeit, den Browser-Cache zu beeinflussen, ist der Weg über eine angepasste .htaccess-Datei. Ich benutze dabei zwei Einstellungen:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 2 hours"
</IfModule>

Damit gelten bereits geladene Dateien für zwei Stunden nach dem Zugriff (access) als gültig und werden in diesem Zeitraum nicht erneut überprüft. Sie „verfallen“ (expire) automatisch nach Ablauf der zwei Stunden und sollen dann auf eine mögliche Veränderung hin geprüft (siehe nachfolgend) und wenn nötig neu geladen werden.

Hier finden sich im Netz für Bilder, CSS-Stylesheets etc. oft wesentlich längere Zeit-Angaben, bevor die Ressourcen verfallen. Da ich aber sicherstellen möchte, dass der Benutzer stets auch die ggf. geänderten Bilder und ein geändertes Layout sieht, habe ich mich persönlich für einen Zeitraum von nur zwei Stunden entschieden.

Sollten Sie eine fertige Seite besitzen, an der voraussichtlich in nächster Zeit keine Veränderungen vorgenommen werden, sind für bestimmte Dateien (Bilder, PDFs etc.) höhere Verfalls-Angaben natürlich zu überlegen. Weiter:

<IfModule mod_headers.c>

# Medien-Dateien
<FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
  Header set Pragma "public"
  Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</FilesMatch>

# HTML-Dateien etc.
<FilesMatch "\\.(html|htm|xml|txt|xsl)$">
  Header set Pragma "public"
  Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</FilesMatch>

# JS/CSS-Dateien
<FilesMatch "\\.(js|css)$">
  Header set Pragma "public"
  Header append Cache-Control "public, must-revalidate, proxy-revalidate"
</FilesMatch>

# Ausschalten des Cache für dynamische Dateien wie PHP etc.
<FilesMatch "\\.(pl|php|[sf]?cgi|spl)$">
  Header set Cache-Control: "max-age=0, no-store"
</FilesMatch>

</IfModule>

Durch diese Angaben wird erreicht, dass der Browser – gesetzt den Fall, dass eine Ressource verfallen ist – bei einem erneuten Zugriff zwingend überprüft muss, ob die jeweiligen Dateien noch aktuell sind (must-revalidate). Das sollte selbstverständlich sein, wird hierdurch aber sicher gestellt.

Ist die Ressource noch aktuell kann der Browser die verfallene Datei trotzdem nutzen, andernfalls muss er sie neu laden. Letzter Absatz: dynamische Dateien (PHP etc.) sollen hingegen erst gar nicht gespeichert werden (no-store).

Das Thema „Cache / Leverage browser caching“ ist sehr komplex und es gibt tausende unterschiedlicher Meinungen und Tipps hierzu. Der obige Code ist das, was ich nach eintägigem Studium als die für meine Zwecke sinnvollste Lösung erachtet habe.

Für ein näheres Verständnis verweise ich auf den ausführlichen Beitrag „Caching-Tutorial für Webautoren und Webmaster“ von Mark Nottingham, ins Deutsche übersetzt von Thomas Hühn und auf „A Beginner’s Guide to HTTP Cache Headers“ von Kyle Young.

Browser-Cache löschen

Meine Browser – ich benutze zum Testen von Seiten neben dem Internet-Explorer noch Firefox, Firefox Developer Edition, Opera, Chrome und Yandex – habe ich übrigens alle so eingestellt, dass diese beim Programmende den Browser-Cache komplett löschen.

Dies vermeidet die meisten Probleme mit veralteten Seiten und hat den zusätzlichen Vorteil, dass die von mir besuchten Seiten nicht so einfach nachvollzogen werden können.

Wenn Sie erfahren oder den Kunden mitteilen möchten, wie man den Browser-Cache löscht, empfehle ich die Seite www.browser-cache.de. Dort wird das jeweilige Vorgehen detailliert mit Screenshots erklärt. Da ich dazu idR zu bequem bin nutze ich gerne Browser-Plugins, die mit einem Klick diese Arbeit durchführen.

Sie könnten alternativ auch den Privat- / Inkognito-Modus Ihres Browsers benutzen, hier wird alles im Browser-Cache befindliche beim Beenden gelöscht oder ein solcher Cache erst gar nicht angelegt.

Kommentare

Kommentare

  1. Christian schrieb:

    Hallo,

    vielen Dank für diesen klasse Beitrag! Du sprichst mir aus der Seele, das gleiche Problem mit im Cache gespeicherten Seiten und den Worten meiner Kunden „Es hat sich aber nichts geändert“ habe ich auch zu kämpfen. Danke auch für die Möglichkeiten, die du hier aufgezeigt hast :)

    Viele Grüße aus Mönchengladbach!

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.