Das wusste man auch schon im Zeitalter von < Web 0.1, deswegen haben die Browser-Herstellen den Cache (Zwischenspeicher) erfunden. Im Cache speichert der Browser HTML, CSS, JavaScript und andere Dateien, damit diese nicht erst aus dem “langsamen” Internet geladen werden müssen. Im Firefox kann man sich den Inhalt vom Cache ansehen, wenn man about:cache in die Adresszeile eingibt.

Jedoch ist das für den Browser ein Tanz auf dem Drahtseil, er muss für jede Datei entscheiden, ob diese aus dem Cache oder aus dem Internet geladen werden soll. Der Browser weiß nicht, ob die Datei im Cache noch aktuell oder inzwischen veraltet ist. Es gibt verschiedene Wege dem Browser dabei zu helfen, das Thema in diesem Post soll der Expires-Header werden.

Mit dem Expires-Header gibt man dem Browser vor bis wann eine Datei im Cache gehalten werden kann. Erst danach wird der Browser die Datei wieder aus dem Internet laden.

Das ist in der Regel aber kein Problem, wenn man in der HTML-Datei die URLs mit einem Parameter aufruft. Dieser Parameter ändert sich bei einer Änderung der Datei. Ich habe mal einen Screenshot der CSS-Includes bei der Wikipedia gemacht:

Wie man sieht hängt die Wikipedia “?165″ an die Datei, wenn die CSS-Dateien verändert werden, wird aus der 165 sicher eine 166. Beim nächsten Besuch holt der Browser sich diese “neue” Datei.

Auch WordPress ruft JavaScript -und CSS-Dateien mit einem Parameter auf. Es werden jedoch keine Expires-Header gesetzt, dies wird wahrscheinlich nicht gemacht weil es nicht unter allen Umgebungen unterstützt wird. Bei den meisten Providern wird folgende Lösung jedoch funktionieren, ein Versuch ist es auf jeden Fall wert.

Dazu muss lediglich eine .htaccess Datei unter wp-admin angelegt werden:
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"

Beim Apache-Webserver muss das Module mod_expires installiert sein, wenn es zu keinem Fehler kommt, ist es installiert.

Wenn alles funktioniert kann die .htaccess-Datei auch unter wp-includes kopiert werden. Jedoch sollte die Datei nicht unter wp-content kopiert werden.

WordPress ruft die Bilder ohne einen Parameter auf, d.h. bei einer Änderung z.B. einem Update muss der Browser-Cache gelöscht werden. Alternativ könnte man jede WordPress-Version in einen anderen Ordner installieren, das ist etwas komplizierter – vielleicht schreibe ich dazu noch einmal etwas.

Man könnte natürlich auch die Bilder ohne, bzw. mit einem geringeren Expires-Header, ausgeben:
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 day"
ExpiresByType image/jpeg "access plus 1 day"
ExpiresByType image/png "access plus 1 day"

Bringt das überhaupt etwas?

YSlow ist ein Firefox-Plugin das speziell für die Performance-Analyse von YAHOO! entwickelt wurde. YAHOO! bietet es kostenlos zum Download an.

Ohne die .htaccess Datein bekommt die “Write Post”- Seite von WordPress mit 38 Punkten eine 6, mit den beiden Dateien kommt die Seite auf 79 Punkte:

Man kann so auch ohne Google Gears bzw. die Turbo-Funktion von WordPress eine bessere Performance bekommen.