Browser-Caching aktivieren und Ladezeiten reduzieren

Wie bereits in einigen voran gegangenen Artikeln erwähnt, ist es für die Besuchererfahrung und für das SEO-Ranking von großer Bedeutung, dass eine Webseite schnelle Ladezeiten aufweist. Neben der Webseiten-Komprimierung zählt das Browser-Caching zu einer effektiven Methode den Traffic wesentlich zu reduzieren und wird auch von Google Page Speed explizit empfohlen.

Wie funktioniert Browser-Caching

Kommt ein Besucher erstmalig auf eine Webseite, so muss der gesamte Inhalt der Webseite, wie HTML-Code, Bilder, CSS-Code, Java-Scrip-Code usw. komplett herunter geladen werden. Da kann schon mal 1MB und mehr zusammen kommen. Kommt dieser Besucher zum wiederholten Male auf die Webseite, müsste er wieder alle Inhalte der Seite laden obwohl sich gar nichts oder nur wenig geändert hat. Denn gerade statische Elemente wie Bilder in einem Blogpost oder einmalig angelegte CSS-Klassen, werden nicht ständig geändert. Hier besteht die Möglichkeit dem Browser des Besuchers anzuweisen bestimmte Inhalte lokal, temporär zwischen zu speichern im sogenannten Browser-Cache. Die Speicherung erfolgt für einen bestimmten Zeitraum bezogen auf bestimmte Inhalte oder Dateitypen, welchen man den Browser mitteilt. Diese Inhalte werden dann nicht neu geladen, wenn der Webseitenbesucher die Webseite wiederholt aufruft, sondern aus dem lokalen Browser-Cache geholt. Das spart viel Ladezeit und führt zu einem besseren Surf-Erlebnis der Besucher. Dem Besucher steht es natürlich frei, jederzeit über die Browser-Einstellungen den Browser-Cache zu löschen.

Es wird somit also eine Art Ablaufdatum oder Mindesthaltbarkeitsdatum den statischen Dateien verliehen. Ist die Zeit abgelaufen, läd der Browser die betreffenden Dateien also neu aus dem Internet. Zu diesen Dateien zählen: Java-Scripte, CCS-Dateien, HTML-Dateien, Bilder (Gif, PNG, JPEG, etc.), sowie Mediendateien, wie MP4, Flash, PDF. Es wird empfohlen für statische Dateien mindesten 7 Tage oder länger für das Caching festzulegen. Im Grunde kann das auch jeder Webmaster sehr gut selbst einschätzen, da man die Änderungshäufigkeit seine Projekts für gewöhnlich sehr gut kennt.

Browser-Caching mit .htaccess anweisen (Apache-Server)

Nutzt man einen Apache-Server für sein Web-Projekt, so kann man unter Verwendung des Modules mod_expires.c das Caching über eine .htaccess-Datei aktivieren mit folgendem Code. Dieser Code lässt sich auch einfach mit dem Programm DA-HtAccess erzeugen und konfigurieren.

# BEGIN Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 4592000 seconds"
ExpiresByType image/x-icon "access plus 4592000 seconds"
ExpiresByType image/jpg "access plus 4592000 seconds"
ExpiresByType image/png "access plus 4592000 seconds"
ExpiresByType image/gif "access plus 4592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 4592000 seconds"
ExpiresByType text/html "access plus 6000 seconds"
ExpiresByType application/xhtml+xml "access plus 6000 seconds"
</IfModule>
# END Browser Caching

Durch diese .htaccess-Anweisung generiert der Server bei einer Client-Anfrage (das ist der Browser des Webseiten-Besuchers) einen entsprechenden HTTP-Header. Dieser HTTP-Header enthält die entsprechenden Ablaufdaten und wird vom Browser ausgelesen und verarbeitet.
Über die Anweisung IfModule mod_expires.c wird zuerst geprüft, ob das Modul auf dem Server vorhanden ist und dann mit der Anweisung ExpiresActive On das Caching aktiviert.
ExpiresDefault ist eine Standardangabe und wird immer verwendet, wenn keine anderen dateispezifischen Angaben vorhanden sind. Die dateispezifischen Angaben werden mit ExpiresByType gemacht.
ExpiresByType folge eine Dateiangabe und danach der Wert der Ablaufzeit in Sekunden. Neben seconds können noch weitere Zeitangaben genutzt werden, wie:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes

Es ist zu beachten, dass der Zahlenwert immer ganzzahlig (Integer) ist. Also keine Kommawerte verwenden. Es gibt nun noch die drei Basisangaben auf welche sich die Zeitangaben beziehen:

  • access
  • now
  • modification

access und now bewirken das gleich und könne äquivalent genutzt werden. Es wird also die Zeit des Zugriffs bzw. die aktuelle Zeit genommen und mit einem Wert X addiert, um die Ablaufzeit Expires zu berechnen. Bei modification wird der Zeitbezug zum Änderungsdatum/-zeit der betreffenden Datei hergestellt.

Browser-Caching beim IIS

Der IIS (Internet Information Service) von Microsoft macht das Setzen des Ablaufdatums relativ einfach über eine Windows-Bedienoberfläche möglich. Dazu geht man wir folgt vor:

  • IIS Manager starten
  • in der Baumstruktur Seite auswählen (Site) und zum Beispiel den Bilder-Ordner (images) wählen
  • dann HTTP Response Headers Icon auswählen
  • dann rechts unter Actions => Set common headers anwählen
  • über den nun erscheinenden Dialog lassen sich die Werte einstellen

Browser-Caching mittels PHP aktivieren

Es ist ebenfalls möglich, serverseitig das Browser-Caching über die Einbindung einer PHP-Datei bzw. des PHP-Codes zu realisieren:

<?php
 Header("Cache-Control: must-revalidate");

 $seconds = 604800;
 $strExp = "Expires: " . gmdate("D, d M Y H:i:s", time() + $seconds) . " GMT";
 Header($strExp);
?>

Diese Anweisung erzeugt einen Cache-Control-Header und einen Expires-Header. In diesem Fall wird eine Ablaufzeit von 7 Tagen gesetzt. Das PHP auch oft für dynamische Inhalte verwendet wird, soll manchmal das Caching bewusst unterbunden werden. In diesem Fall kann man auch ein konkretes Datum angeben, dass in der Vergangenheit liegt. Es ist zu beachten, dass der Header-Befehl bzw. Header-Ausgabe vor allen anderen Ausgaben erfolgt, damit diese wirksam werden kann.