HTML Meta – cache-control, expires und pragma

HTML Meta Tags für Cache

Meta-Tags wie cache-control, expires und pragma richten sich nicht an die Suchmaschinen, sondern an den Browser und den Server..

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Cache für schnelles Laden der Seiten

Cache steht für einen mehr oder minder kurzlebigen Zwischenspeicher, der von den Browsern und von Webservern aufgesetzt wird, um Ladezeiten zu verkürzen und den Transfer zwischen Browser und Server zu reduzieren.

Der Browser speichert beim ersten Besuch der Webseite alle Daten in seinem Cache auf dem lokalen Rechner. Statt bei einem erneuten Aufruf alles erneut vom Server zu laden, prüft der Browser erst, ob die Seite zwischenzeitlich geändert wurde.

Bei dynamisch erzeugten Seiten kann der Browser aber nicht ohne Weiteres erkennen, ob die Seite zwischenzeitlich geändert wurde: Die Webseite hat zwischenzeitlich nur den Inhalt geändert, aber der Zeitstempel der Datei ist unverändert.

Und nicht nur der Browser greift auf die Daten in seinem Cache zurück, auch Server und Proxyserver legen einen Cache an, um Webseiten bei zukünftigen Aufrufen schneller zu übergeben. Das sehen wir z.B. in der .htaccess Datei oder in der Konfiguration eines NGINX-Servers:

# Dauer der Gültigkeit von Bildern, Favicons, CSS und Javascript auf 7 Tage setzen 
location ~* \.(ico|css|pdf|jpg|jpeg|png|gif|js|xml|js|woff|woff2|ttf|svg|eot)$ {
	expires 7d;
}

Wenn der Cache im Weg ist

Der Cache ist nicht immer erwünscht. Einige neue Inhalte sollen immer aktuell an den Browser ausgeliefert werden, Webentwickler wollen Änderungen sofort sehen und nicht bei einem Reload der Seite zweifeln, ob ihre Änderungen tatsächlich wirken.

Meta-Tags wie cache-control, expires und pragma sollen den Browser bewegen, nicht auf den lokalen Cache zurückzugreifen.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Sat, 01 Jan 2000 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Jetzt nur nicht gleich die ganze Liste einsetzen, denn das zweite Meta-Tag überschreibt das erste, das vierte ist auch nur eine Variante des dritten Meta-Tags.

Die modernen Browser scheren sich nicht zuverlässig um dererlei Direktiven. Dynamische Webseiten – z.B. aus WordPress, Joomla oder Drupal – geben Dateien darum einen Zeitstempel.

Webdesigner und Developer

Am zuverlässigsten ist immer noch der Weg über die Menüs der Browser. Für Safari gibt es im Entwickler-Menü den Punkt "Cache löschen", der nur den Cache dieser Seite löscht, Daten wie Cookies und Anmeldedaten intakt lässt.