Website Cache – was ist das?

Viele kennen das Problem: Die Website wurde aktualisiert, aber die Änderungen sehen beim Neuladen der Website seltsam und kaputt aus. Elemente tauchen auf einmal an seltsamen Stellen auf oder fügen sich so gar nicht in das Design der Website ein. Oder Sie haben ein Update veranlasst, aber die Website zeigt partout die alte Version an. Gut möglich, dass es sich hierbei um den Cache handelt. Doch was ist das überhaupt? Und ist Cache gleich Cache?

Was ist Caching?

Der Cachespeicher ist in der Informatik eine schneller Zwischenspeicher. Dieser kommt immer dann zum Einsatz, wenn man Informationen, die man häufiger braucht schnell erreichen will. Man stelle sich vor, die Information ist eine Visitenkarte. Statt immer zur Druckerei zu rennen, wenn man eine Visitenkarte weitergeben will, holt man eine fertige Version aus der Hosentasche. Da sich die Daten hier nicht laufend ändern, ergibt das absolut Sinn.

Welche Probleme kann der Cache verursachen?

Bleiben wir beim Beispiel mit den Visitenkarten. Nehmen wir an Sie sind umgezogen: Die Adresse ändert sich also. Wenn wir jetzt eine neue Visitenkarte drucken würden, wäre dort bereits die neue Adresse aufgedruckt. Wir haben jedoch in unserer Hosentasche noch eine alte Version. Wenn wir nun unsere Visitenkarte weitergeben, haben wir veraltete Informationen. Es wird höchste Zeit, in die Druckerei zu gehen und neue Visitenkarten mitzunehmen. Die sind dann wieder gut bis zur nächsten Änderung.

Welche Arten von
Cachespeicher gibt es?

Grundsätzlich gibt es viele Cachespeicherarten. Festplattencache, Prozessorencache, der Cache einer Anwendung. Wir wollen uns hier aber auf den Cache beschränken, die direkten Einfluss auf eine Website haben. Und das sind schon mehr als genug.

Browsercache

Für Webentwickler die nervigste Cachingart (weil nicht ohne weiteres beeinflussbar) und für Websitebesucher*innen gleichzeitig der Cache, den man am meisten beeinflussen kann. Der eigene Browser (z.B. Firefox oder Chrome) legt von besuchten Seiten eine temporäre HTML Datei an. Wenn wir die gleiche Seite öfter besuchen, müssen viele Ressourcen dann nicht immer wieder neu aus dem Internet geladen werden, sondern sind bereits lokal vorhanden. Das macht Websites ungemein schneller. Jedoch gibt es auch hier keine Garantie, dass Seiten inzwischen aktualisiert wurden.

Wie Sie den Browsercache leeren können, erfahren Sie weiter unten oder über die Sprungmarke.

Servercache

Der Server (also der Computer, über den die Website abgerufen wird oder auf der die Website liegt) kann Anfragen (also die Frage nach einer bestimmten Seite einer Website) auch cachen. Der Server kann darüberhinaus auch noch die Dateien (Websites sind ja im Grunde eine Vielzahl von Dateien) effektiver abschicken indem er diese komprimiert und zipped. Wenn hier alles richtig konfiguriert ist, sollte der Servercache aber nur selten Probleme bei der Ausgabe bereiten.

Anwendungscache

Ebenfalls auf dem Server läuft der Anwendungscache. Jedoch liegt die Verantwortung dafür nicht beim Server selber, sondern beim Programm, welches für die Ausgabe erforderlich ist (WordPress z.B. ist ein Programm, um die Website zu verwalten und auszugeben). Statt die Seite immer wieder neu zu zeichnen (rendern), wird eine HTML Version (z.B. der Startseite) in der Datenbank – oder häufiger – als HTML Datei gespeichert. Statt also alle Inhalte neu zu berechnen, wird einfach nur eine Datei geholt und diese Weitergegeben.

Hier ist es besonders wichtig, nach dem Hochladen von neuem Programmcode, den Cache der Website zu leeren. Je nach CMS, Plugins oder Extensions kann das ganz unterschiedlich funktionieren. Sowohl WordPress (mit Plugins) als auch TYPO3 haben dafür aber in der Kopfzeile entsprechende Buttons dafür.

Objektcache

Auch Datenbanken können cachen. Wenn zum Beispiel aus der Datenbank eine Liste aller User angefordert wird, kann die Datenbankengine entweder die Frage immer wieder neu formulieren, oder die Engine merkt sich diese häufige Anfrage, und speichert das Ergebnis im Zwischenspeicher. Bei der nächsten identischen Anfrage wird einfach das zwischengespeicherte Ergebnis ausgegeben.

CDN Cache

Eine weitere Methode ist das Caching über CDN (Content Delivery Network). Das bedeutet, dass die Website die Anfrage an einen CDN Server weiterleitet, der in der Regel auf Geschwindigkeit optimiert ist un möglichst nah an der Quelle der Anfrage steht. Hier muss man allerdings aufpassen, dass nur Inhalte über das CDN gecashed werden, die keine dynamischen Parameter erhalten, da sonst die Ergebnisse nicht mehr stimmen.

Von allen Möglichkeiten des Cachings bin ich bei CDN für die gesamte Website am ehesten kritisch eingestellt, da CDN Seiten gerne auch über Anbieter aus dem Ausland (z.B. USA) laufen und wir nicht wissen, was mit den Daten dort passiert.

Wie leere ich den Browsercache?

Hier hilft es, die Seite neu zu laden mit der Aufforderung, alle Dateien nochmal zu holen. Das klingt kompliziert, ist aber ganz einfach. Das Neuladen einer Seite kann man zum Beispiel mit der Taste F5 erreichen. Mit der Tastenkombination Strg + F5 gibt man dem Browser den Befehl, die Seite mit frischen Daten neuzuladen.

Wenn alles nicht hilft, kann man außerdem alle zwischengespeicherten Daten über die Einstellungen löschen. Doch auch das ist keine Garantie, denn es gibt noch viele andere Cachingarten bei Websites.

Den Cache mit Versionierung aushebeln

Das Neuladen der Seite hat leider den Nachteil, dass der/die Websitebesucher*in es aktiv machen muss. Da man sich darauf aber natürlich nicht verlassen kann, gibt es noch einen anderen Weg, den Cache auszuhebeln.

Wenn es öfter zu Updates auf einer Website kommt, empfiehlt es sich, CSS- und JS-Dateien zu versionieren und so den Cache zu umgehen. Dazu erstelle man eine Konstante für die Jeweilige Theme Version. So hat man nicht nur einen übersichtlichen Verlauf in der Versionskontrolle, sondern kann diesen Wert auch für den Cache verwenden. Da eine neue Versionsnummer die URL der CSS, nicht aber deren Inhalt verändert, wird die CSS Datei neu geladen.

Statt also im Head zu schreiben:

<link rel="stylesheet" href="path/to/theme/styles.min.css" type="text/css" media="all" />

… hängen wir noch eine Version als GET Parameter an den Pfad zur CSS-Datei. Das Ganze würde dann so aussehen:

<link rel="stylesheet" href="path/to/theme/styles.min.css?version=1.0.2" type="text/css" media="all" />