Ich weiß gar nicht, warum ich mich darauf verlassen habe, dass sich moderne Browser schon korrekt um das Caching von Internetseiten kümmern. Immer wieder wird einem versichert, dass die hunderte von Kilobyte JavaScript für Bibliotheken wie Prototype oder jQuery nur einmal geladen und dann aus dem Cache verwendet werden. Das ist nicht automatisch so. Da muss man etwas für tun!
Auf das Thema kam ich, als nach dem Relaunch kaffeeringe.de echt langsam geworden ist – wobei es nicht an den Rendering-Zeiten liegt. Die liegen außer auf der Blog-Startseite überall bei einer halben Sekunde. Auf der Startseite werden zur Zeit noch jedesmal frisch die Infos von Twitter und LastFM gezogen. Die Anfragen timen aber nach einer Sekunde out. Diese Blöcke können das System also maximal 2 Sekunden aufhalten. Trotzdem hat es manchmal ewig gedauert, bis die Seite angezeigt wurde.
Mit YSlow analysieren
Ein Forenpost hat mich dann auf YSlow gebracht. YSlow ist ein freies Tool von Yahoo, das als Plugin für Firebug, die Performance von Internetseiten analysiert. Dort habe ich erst einmal festgestellt, dass ein CSS nicht korrekt eingebunden war und ein Fehler 404 pro Seitenaufruf beschleunigt den Aufbau nicht gerade.
Yahoo hat übrigens umfangreiche Informationen zum Thema Performance zur Verfügung gestellt, in denen ich in nächster Zeit noch mehr stöbern werde.
Expires vs. Header
Und dann war da das Thema Caching: YSlow sagte mir, dass für keine der geladenen Komponenten ein Expires-Header gesetzt war. Der Browser weiß also nicht, wie lange er Dateien zwischenspeichern darf – bei CSS und JavaScript muss der die Infos ja während einer Session auf keinen Fall neu laden und auch Bilder ändern sich selten. Nur die HTML bzw PHP Seiten auf dynamischen Sites sollten stets frisch sein.
Zunächst erfuhr ich, dass beim Apache Webserver zwei Module für das setzen der Header in Frage kommen. Das eine heisst Header, das andere Expires. Welches davon auf dem eigenen Server aktiv ist, kann man zum Beispiel mit phpinfo() herausbekommen. Man kann die entsprechenden Anweisungen aber auch einfach beide in die .htaccess schreiben und mit ifmodule absichern – so kommt es nicht zu einem Server Error 500, weil die Direktiven nicht verarbeitet werden konnten.
Wie das genau aussieht, kann man sich auf askApache.com sehr gut anschauen. Die Beispiele von dort kann man sich einfach in die htaccess kopieren.
Wesentlich flotter
So hat ein für veraltet gehaltenes Thema für mich wieder hohe Aktualität erhalten. Nach meinem Eindruck lädt die Seite jetzt wesentlich schneller – wenn sie auch noch ein wenig stockt. Da muss ich noch weiter schauen. Vor allem muss ich für die Twitter- und die LastFM-Geschichte noch ein internes Caching einbauen. Das reicht, wenn die Infos alle paar Minuten aktualisiert werden.
Schreibe einen Kommentar