Jörg Kruse Webprogrammierung
und SEO seit 2005
☰ Menü

Expires-Header

aktualisiert:

Damit eingebundene Dateien nicht bei jedem Aufruf einer HTML-Seite neu vom Webbrowser geladen werden, kann man für diese ein Ablaufdatum definieren, so dass der Browser diese bis dahin aus seinem Cache lädt. Wenn mod_expires in der .htaccess Datei zur Verfügung steht, kann man dies z.B. folgendermaßen:


<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 24 hours"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
</IfModule>

CSS-, JavaScript-Dateien sowie GIF-, JPEG- und PNG-Dateien sollen hier einen Monat, alle übrigen Dateien 24 Stunden lang gecached werden. Der Webserver sendet dann einen entsprechenden HTTP-Header mit dem Ablaufzeitpunkt in 30 Tagen (in diesem Beispiel am 15. März 2017):


Expires: Fri, 14 Apr 2017 21:09:02 GMT

Vorzeitiger Refresh von CSS- und JavaScript-Dateien

Was ist aber, wenn man zwischenzeitlich CSS- und JavaScript-Dateien ändert und möchte, dass sich diese Änderungen bei allen Webseitenbesuchern sofort bemerkbar machen? In dem Fall kann man bei der Einbindung der Dateien einen Versionsparameter an die URL hängen:


<link href="style.css?v=42" rel="stylesheet">
<script src="script.js?v=42"></script>

Nach der nächsten Änderung wird die Versionsnumme einfach um einen Zähler erhöht:


<link href="style.css?v=43" rel="stylesheet">
<script src="script.js?v=43"></script>

Da die URL sich geändert hat, lädt der Browser die betreffenden CSS- und JavaScript-Dateien nicht mehr aus seinem Cache, sondern fordert diese vom Webserver neu an.

Wird die Seite durch ein PHP-Script generiert, kann man den Versionsparameter auch als Konstante definieren und diese dann an den betreffenden Stellen einbauen, so dass man die Versionsnummer nur an einer prominenten Stelle anpassen muss:


<?php

define('SCRIPT_VERSION', 42);

 ?>
<link href="style.css?v=<?= SCRIPT_VERSION ?>" rel="stylesheet">
<script src="script.js?v=<?= SCRIPT_VERSION ?>"></script>