Site-Optimierung Teil 1: Expires-Header

Teilen

Da ich mir ja immer gerne Challenges liefere, wer die schnellste Site hat, und es mich öfters mal stolz macht, wenn ich mal wieder eine schnelle Website online habe, habe ich meinen Blog heute ein wenig unter die Lupe genommen. Es geht hierbei erst um den ersten Part: Den Expires-Header.

Was viele Mittelschicht-Webprogrammierer nicht wissen, oder zum Teil verdrängen, ist die einfache Tatsache, dass man nicht immer alles vom Server nachladen sollte. Hier besteht auf sehr vielen Webpräsenzen erheblicher Handlungsbedarf. Wozu, beispielsweise, sollte es notwendig sein, ein Bild vom letzten Urlaub bei jedem Aufruf neu vom Server zu laden ? Oder – noch schlimmer – Iconsets in voller Größe vom Server zu laden, bei jedem Siteaufruf ? Es ist nicht notwendig. Man sollte den Browsercache des Users lieber klug nutzen.

Und hier setzt der Expires-Header an. Expires ist ein Header-Feld, welches in der HTTP/1.1 Protokollspezifikation festgelegt ist. Es gibt an, wann ein Objekt im Cache verfällt und wird vom Webserver an den Client gesendet. Und hierzu benötigt es zumeist eine kluge Strategie. Dynamische Dateien sollten natürlich nicht gecachet werden, Tracking-Applications dürfen es auf keinen Fall, und Javascript-Libraries wie jQuery sollten auf jeden Fall gecachet werden.

Im Grundsatz bedeutet dies: Je seltener ein statisches File geupdatet wird, bzw je seltener sich der Content eines dynamischen Files ändert, desto später sollte die Zeit im Expires-Header liegen.

Heute ist der 03.02.2011, derzeit ist es 22:57 Uhr, ein kluger Expires-Header für eine Javascript-Datei, die nicht oft geändert wird wäre:
Expires: Thu, 17 Feb 2011 22:57:00 GMT

Was bedeutet, dass der Browser diese Datei erst nach dem 17.Februar 2011 um 22:57:00 nach Greenwich Mean Time geupdatet wird. Der Vorteil liegt hier klar auf der Hand: Große Dateien, wie jQuery Libraries, werden nur alle 14 Tage neu vom Server geladen, nicht mehr bei jedem Aufruf einer neuen (Unter-)Seite.

Hinzugefügt werden kann der Expires-Header über mehrere Methoden. Der Apache Webserver (httpd) bietet hierzu beispielsweise das Modul “mod_expires”, welches beispielsweise so konfiguriert werden kann:


ExpiresActive on
ExpiresDefault "access plus 7 days"

ExpiresByType image/jpg “access plus 1 months”
ExpiresByType image/gif “access plus 1 months”
ExpiresByType image/jpeg “access plus 1 months”
ExpiresByType image/png “access plus 1 months”

ExpiresByType text/css “access plus 14 days”
ExpiresByType text/javascript “access plus 7 days”
ExpiresByType application/javascript “access plus 7 days”
ExpiresByType application/x-shockwave-flash “access plus 14 days”

Beispielsweise “ExpiresByType text/css “access plus 14 days” bedeutet hier, dass eine CSS-Datei erst 14 Tage nach jedem Access (Server-Abruf der Datei) neu geladen wird.

In PHP kann man den Expires-Header selbst setzen, indem man in einer PHP-Datei folgendes hinzufügt:


header("Expires: Thu, 17 Feb 2011 00:00:00 GMT");

Mit dem obigen Code würde diese PHP-Datei erst in 14 Tagen wieder geladen werden.

Es gibt außer mod_expires und dem header-Befehl in PHP natürlich noch genügend andere Methoden, gerade spezifisch zum eingesetzten Webserver, welche noch genutzt werden können. Die obigen zwei stellen einer der populärsten Methoden dar, zumal der Apache-Webserver, sowie die dynamische Web-Programmiersprache PHP die populärsten ihrer Zunft sind.