Die richtige Strategie

Bei einem Shared-Hosting-Angebot sehen Sie auch in der Ausgabe des phpinfo()-Befehls, welche Apache-Module geladen sind. Die entsprechende Information steht unter der Überschrift "apache2handler" unter "Loaded Modules".Das Caching können Sie dann über Direktiven in einer .htaccess-Datei festlegen. Diese kann mit mod_expires folgendermaßen aussehen:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/
x-javascript A29030400
ExpiresByType text/css A29030400
ExpiresByType image/gif A29030400
ExpiresByType image/png A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType text/html A3600</IfModule>

Zuerst wird überprüft, ob das Modul installiert ist, dann wird es aktiviert. Für alle Dateitypen wird (nach MIME-Typen) angegeben, wie lange sie gecacht werden sollen.Ein nächstes Beispiel zeigt die Verwendung des mod_headers-Moduls:

<IfModule mod_headers.c><FilesMatch "\.(gif|jpg|jpeg|png)$">
Header set Cache-Control
"max-age=29030400"</FilesMatch><FilesMatch "\.(js|css)$">
Header set Cache-Control
"max-age=2419200"</FilesMatch><FilesMatch "\.(html|htm)$">
Header set Cache-Control
"max-age=3600"</FilesMatch></IfModule>

Hier wird ein Cache-Control-Header gesendet, und zwar jeweils entsprechend der Endung der Dateien. Für Bilder wird beispielsweise ein Jahr, für Javascript- und CSS-Dateien ein Monat und für HTML-Dateien eine Stunde als Cachingdauer festgelegt.

Die richtige Strategie

Hier wird ein Cache-Control-Header gesendet, und zwar jeweils entsprechend der Endung der Dateien. Für Bilder wird beispielsweise ein Jahr, für Javascript- und CSS-Dateien ein Monat und für HTML-Dateien eine Stunde als Cachingdauer festgelegt.

Die richtige Strategie

• "Cool URLs don't change" - dieser berühmte Spruch von Tim Berners-Lee gilt insbesondere in diesem Zusammenhang. Die beste Caching-Strategie hilft nichts, wenn dieselben Inhalte unter anderen Dateinamen noch mal auftauchen.
• Damit Last-Modified-Header und ETag auch stimmen, ist es wichtig, dass Sie bei Änderungen nur die geänderten Dateien erneut auf den Server kopieren.
• Für HTML-Dokumente, die sich oft ändern, ist ein max-age von einer Stunde sinnvoll. Falls es wirklich schnellere Aktualisierungen gibt, darf es auch weniger sein. Mindestens aber sollten Sie ihnen ein paar Minuten geben, damit die Seiten bei Klick auf den Zurück-Button nicht erneut geladen werden müssen.
• Für Bilder, CSS-Dateien, JavaScript & Co. sind lange Zeiträume empfehlenswert, bis zu einem Jahr.

Was macht man, wenn sich etwa die Javascript-Datei doch einmal ändert? Dann ändern Sie einfach den Dateinamen. Bei Ressourcen wie Javascript- oder CSS-Dateien können Sie im Dateinamen eine Angabe zur Version machen, also beispielsweise ein Datum integrieren wie script-20111005.js. Alternativ dazu kann man auch andere Zeichenketten in den Namen einbauen (URL-Fingerprinting). Damit wird automatisch die neue Datei angefordert.

Caching und Statistiken

Klassische Statistikprogramme nutzen die Serverlogdateien, zählen die Aufrufe von Seiten und basteln daraus hübsche Grafiken. Besucht jemand die Seite erneut und es wird die zwischengespeicherte Kopie benutzt, so kann das die Statistik nicht erfassen. Für Abhilfe sorgen eigens dafür vorgesehene Zählpixelbilder, die nicht gecacht, sondern immer angefordert werden.Google Analytics und ähnliche Dienste kennen das Problem nicht: Auch wenn eine gecachte Version ausgeführt wird, läuft der Google-Analytics-Code ab, der ja in Javascript geschrieben ist, und damit werden auch gecachte Seiten von der Statistik erfasst, solange eine Verbindung zum Internet besteht.

Mobiler Zugriff

Wer mobil zugreift, hat oft keinen WLAN-Zugang und damit schlechtere Verbindungsraten und große Latenzzeiten, eventuell kosten auch die übertragenen Datenmengen oder es gibt ein beschränktes Freipensum. Deswegen ist Caching gerade für mobile Websites ein zentrales Thema.Bei mobilen Seiten spielt aber auch die Dateigröße eine wichtige Rolle. Früher hieß es, dass das iPhone nur Websites cacht, die nicht größer als 15 KByte sind, dann wurde der Wert erweitert auf 25 KByte. Nach neuen Untersuchungen kommt das YUI-Team mit Steve Souders, beide bekannt für ihre Strategien für schnell ladende Webseiten, zu folgenden Empfehlungen:

• Wichtig ist es, für Expires Werte in der Zukunft anzugeben, damit die Browser keine konditionale GET-Anfrage senden müssen.
• HTML-Seiten sollten 25,6 KByte oder kleiner sein.
• CSS- und Javascript-Dateien sollten unter 1 MByte sein. Normalerweise sollten Sie natürlich wesentlich kleinere Dateien benutzen. Aber bis zu einer Größe von 1 MByte lohnt es sich, mehrere Dateien zusammenzufassen, um HTTP-Requests zu sparen.

Reichen die Möglichkeiten des klassischen Caching nicht aus, lohnt sich ein Blick auf HTML5 Application Cache, über das man Komponenten noch länger im internen Speicher, auch für die Offline-Benutzung, vorhalten kann.

Tools

Links zum Thema

www.mnot.net/cache_docs/ googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html code.google.com/intl/de-DE/speed/page-speed/docs/caching.html floern.com/webscripting/if-modified-since-nachbauen www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/ www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

Die Live HTTP Headers (https://addons.mozilla.org/de/firefox/addon/live-http-headers/ ) sind eine Firefox-Erweiterung, die sich als Sidebar integriert und bei Bedarf Anfrage- und Antwort-Header mitprotokolliert.In der Firefox-Erweiterung Firebug (https://addons.mozilla.org/en-US/firefox/addon/firebug/ ) können Sie sich über den Tab Netzwerk die HTTP-Header ansehen, müssen dafür aber die einzelnen Dateien expandieren. Dann haben Sie drei Tabs: Header, Antwort und Cache. Bei Cache sehen Sie nützliche Informationen darüber, wann das Dokument zuletzt geändert wurde, wann zuletzt aufgerufen, wann es abläuft, wie oft es abgefragt wurde und wo es zwischengespeichert ist.Übrigens können Sie über das Menü Netzwerk im Firebug praktische Einstellungen vornehmen, etwa ob die BF-Cache-Antworten ebenfalls zu sehen sein sollen. BF-Cache steht für Back-Forward Cache und ist ein Firefox-Feature, das während einer Browsersitzung automatisch alle Dateien im Cache speichert, damit der Benutzer schnell vor- und zurückblättern kann. Ausgenommen sind nur Seiten mit cache-control: no-store.Ebenfalls nützlich ist Page Speed (code.google.com/intl/de-DE/speed/page-speed/download.html ) von Google. Interpretierte Serverantworten mit wichtigen Tipps und Erläuterungen bietet redbot.org .