Website Performance: Caching und Expires Header von Bildern, CSS und JavaScript

Bilder, CSS- und JavaScript-Dateien haben zwei Dinge gemeinsam: Sie sind im Vergleich zu einer reinen HTML-Seite oft relativ groß und ändern sich selten oder überhaupt nicht.

Daher wäre es aus Perfomance-Sicht eine Katastrophe, wenn man bei jedem Aufruf einer Website alle Bilder und Scriptdateien komplett neu laden würde, obwohl bei dem Aufruf der Seite zuvor schon die selben Skripte und die selben Bilder (zum Beispiel das Hintergrundbilder oder der Header) geladen wurden.

Schön wäre es also, dem Browser zu sagen: Lade diese Dateien nur einmal herunter und nicht erneut, behalte sie und zeige sie immer neu an. Wie das geht, schauen wir uns in diesem Tutorial an.

Beispiel .htaccess Datei

Schauen wir uns zuerst diese Zeilen aus einer .htaccess Datei an:

<FilesMatch "\.(ico|jpg|png|js|gif|css|gz)$">
Header set Cache-Control "max-age=29030400, public"
ExpiresActive On
ExpiresDefault "access plus 29030400 seconds"
</FilesMatch>

Hier fügen wir allen Dateien mit den Endungen .ico, .jpg, .png, .js, .gif, .css und .gz einen Cache-Control-Header sowie einen Expires-Header hinzu. Damit bezwecken wir genau das, was wir erreichen wollten.

Fragt der Browser nun eine der Dateien an, bekommt er vom Server neben der eigentlichen Datei durch unsere .htaccess Datei auch noch folgende Informationen mit auf den Weg:

Cache-Control: max-age=29030400, public
Expires: Wed, 01 April 2013 22:17:51 GMT

Das bedeutet nichts anderes, als das wir dem Browser die Information geben, dass sich die Dateien bis zu dem angegebenen Datum beziehungsweise der angegebenen Anzahl von Sekunden nicht mehr verändern werden. Der Browser weiß dann, dass er die Dateien bis zum Ablauf dieser Zeitspanne aus dem Cache laden kann und nicht neu herunterladen muss.

Individuell anpassen

Wenn Sie das Beispiel oben individuell anpassen möchten, können Sie wie folgt vorgehen:

Zuerst sollten Sie sich anschauen, welche Dateiendungen genau bei Ihnen auf der Homepage mit den entsprechenden Headern versehen werden sollen. Diese Endungen können Sie in die erste Zeile des Beispiels oben mit aufnehmen oder Ihre nicht benötigten Dateiendungen aus der Aufzählung herausnehmen.

Danach müssen Sie entscheiden, wie lange die Dateien gechached werden sollen. Die Werte hinter "max-age" und "access plus" geben an, wie lange (in Sekunden) die Dateien gechached werden dürfen. Setzen Sie hier also zum Beispiel für eine Stunde 3600 ein, für einen Tag 86400, für einen Monat 2592000 und so weiter. In der Regel sollte die Cache-Zeit aber nicht länger als ein Jahr betragen.

Wenn Sie für verschiedene Dateiendungen unterschiedliche Cache Zeiten setzen möchten, können Sie einfach mehrere Blöcke für die Dateiendungen anlegen, wie zum Beispiel:

<FilesMatch "\.(ico|jpg|png|js|gif|gz)$">
Header set Cache-Control "max-age=2592000, public"
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
</FilesMatch>

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=86400, public"
ExpiresActive On
ExpiresDefault "access plus 86400 seconds"
</FilesMatch>

<Files seite.html>
Header set Cache-Control "max-age=3600, public"
ExpiresActive On
ExpiresDefault "access plus 3600 seconds"
</Files>

Hier wird für die Datei seite.html eine Zeit von 1 Stunde (3600 Sekunden) gesetzt, für alle CSS-Dateien eine Zeite von 1 Tag (86400) Sekunden und für die anderen oben angegeben Dateien 1 Monat (2592000) Sekunden.

Alternative Schreibweise

Neben der eben vorgestellten Schreibweise, kann man den Expires-Header auch mit ExpiresByType angeben. Hier ein Beispiel dafür:

ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType text/css "access plus 6 months"
ExpiresByType application/x-javascript "access plus 6 days"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/jpeg "access plus 3 months"
ExpiresByType image/gif "access plus 86400 seconds"
ExpiresByType image/x-icon A86400

In diesem Beispiel können Sie sehen, wie Sie individuell für jeden Typ einen Expires-Header setzen können. Wenn ein Typ nicht konkret angegeben wurde, wird der unter "ExpiresDefault" gesetzte Header verwendet. An diesem Beispiel kann man sehen, dass neben "seconds" auch andere Zeitangeben wie "days", "months" oder "year" möglich sind. Außerdem kann statt "access plus 86400 seconds" auch "A86400" geschrieben werden, wie es in der letzten Zeile demonstriert ist.