Kommunikation zwischen User und Server – und der Browsercache

Wenn man eine Webseite besucht, dann wird nicht nur der Quelltext (HTML) der Seite selbst herunter geladen. Auf nahezu jeder Webseite lassen sich eine Vielzahl weiterer Ressourcen finden, die mit jedem Seitenaufruf vom Browser beim Server angefragt werden. Beispiele hierfür sind Bilder, Grafiken, JavaScript und CSS-Dateien.

Für jede einzelne Datei wird bei einer Standard-Webserver-Konfiguration eine neue Verbindung aufgebaut. Bei diesem Verbindungsaufbau vergeht meist mehr Zeit als beim eigentlichen Download der Datei. Insbesondere finden sich auf einer Webseite viele Ressourcen, welche ohnehin bereits im Browsercache abgelegt wurden. Dort wird dann lediglich beim Webserver angefragt, ob sich die Datei geändert hat.
Sind bei einem erneuten Besuch und einem erneuten Anfragen des Webservers durch den Browser geänderte oder neue Inhalte abrufbar, werden diese heruntergeladen und der Browser erhält die Meldung 200 OK als Antwort. Sind keine neuen bzw. geänderten Seiteninhalte vorhanden, gibt der Webserver ein 304 not modified zurück und es werden die bereits heruntergeladenen Inhalte aus dem Browsercache angezeigt.

Bei jedem Request auf einer Webseite fragt der Browser also eine Vielzahl von Grafiken (Logo, Grafische Menüs, Favicon, etc) sowie CSS und JavaScript-Dateien an, welche sich während einem Besuch auf der Webseite vermutlich nicht ändern. Diese Kommunikation zwischen dem User und dem Server kostet sowohl Zeit als auch Bandbreite. Wenn man also Wert auf Performance legt, sollte man beispielsweise versuchen die Anzahl der HTTP-Requests (Serveranfragen) zu minimieren und die Möglichkeit des Browsercachings effektiv nutzen. In meinem Beitrag möchte ich den Fokus auf die Expires Header legen.

Besser wäre nämlich, im Voraus zu steuern, wann der Browser überhaupt nach einer Änderung der Datei nachfragen soll. Bei vielen Dateien kann man sicherlich im Vorfeld ausschließen, dass diese sich bis zum nächsten Besuch geändert haben. In einem solchen Fall könnte man dann auch die Ressource direkt aus dem Browsercache anzeigen. Im Firefox kann man sich die im Cache abgelegten Dateien durch die Eingabe von about:cache in die Adresszeile ansehen.

Die Webserver-Konfiguration und die Expires-HTTP-Header

Wie lange der Browser die zu cachende Datei direkt aus dem Browsercache lesen soll ohne den Webserver anzufragen kann man in der Webserver-Konfiguration einstellen. Am einfachsten geht es über Einstellungen in der .htaccess-Datei.

Die „.htaccess“-Datei wird bei jedem Seitenaufruf gelesen. Für unsere Zwecke dient sie als Anlaufstelle, um die Aktualität einer Datei/eines Dateityps festzulegen und somit ein überflüssiges Anfragen von Inhalten durch den Browser zu unterbinden. Grundvoraussetzung für diese Einstellungen bei einem Apache Webserver ist, dass das Modul mod_expires verfügbar und geladen ist. Die verfügbaren Module sind meist in der Apache-Konfiguration einsehbar, bei Debian z.B. unter: /etc/apache2/mod-available/. Laden kann man das Modul mit

a2enmod mod_expire

Danach muss der Webserver neu gestartet werden. In der .htaccess kann man dann die Konfiguration für das Modul vornehmen. Hier ein Beispiel:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 second"
ExpiresByType text/php "access plus 1 second"
ExpiresByType text/css "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/bmp "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Die If-Abfrage prüft, ob das Apache Modul verfügbar ist. Wenn ja, wird es aktiviert.

Mit ExpiresByType kann man die Dateien differenziert behandeln. Hierzu benötigt man den dazugehörigen MIME Code des Dateityps. ExpiresDefault dient als Fallback-Wert, wenn man nicht explizit alle auf der Webseite vorhandenen Dateiformate ansprechen möchte.

Durch ExpiresByType text/css "access plus 1 year" wird gewährleistet, dass der Browser den Webserver ein Jahr lang nicht erneut nach der CSS-Datei fragt, nachdem diese im Browsercache gelandet ist. Bei der Verwendung eines CMS wie z.B. TYPO3 sollte aber der Typ text/html nicht über einen Expires-Header gecached werden, da der Webserver nicht absehen kann, wann der Redakteur die Seite ändern wird.

Um den Browsercache optimal zu nutzen, sollten die Expires sorgfältig gesetzt werden. Dateien, die eine lange Aktualität genießen dürfen, wie beispielsweise Scripts oder CSS, sollten einen Zeitpunkt weit in der Zukunft zugewiesen bekommen, um die Anzahl der HTTP-Requests zu minimieren.

Bei einer Datei, die bereits im Browsercache liegt, lässt sich durch nachträgliches Abändern in der .htaccess kein neues bzw kürzeres Ablaufdatum setzen, da der Webserver für diese Datei keinen Request startet und infolge dessen das kürzere Ablaufdatum auch nicht mitgeteilt werden kann. Sind erst einmal zu lange oder falsche Expires-Header über den Webserver verteilt worden, bleibt nur die Möglichkeit, eine Änderung am Dateinamen vorzunehmen. Dann ist für diesen neuen Dateiname im Browsercache kein Eintrag vorhanden und der Browser wird die Datei mit geänderten Expires-Headern herunterladen. Die alte Datei verbleibt solange im Browsercache, bis dieser geleert wird.

TYPO3

Seit TYPO3 4.4 werden an via TypoScript eingebundene CSS- und JS-Dateien Zeitstempel angehängt, sodass man hier das jeweilige „Verfallsdatum“ weit in die Zukunft setzen kann. Der von TYPO3 generierte Zeitstempel ändert sich dabei nach jeder Änderung der Datei. Somit ist eine gute Kompatibilität mit den Expires-Headern gewährleistet.

Das TypoScript:
page = PAGE
page {
includeCSS {
file1 = fileadmin/templates/css/style.css
file1.media = all
}
}

Das Resultat im Frontend:

<link rel= "stylesheet" type="text/css" href="fileadmin/templates/css/style.css?1211043180" media="all"/>