Nico Steiner - Frontend-Entwicklung und -Architektur

Nico Steiner - Frontend-Entwicklung und -Architektur

Navigation

Expires Header besser verstehen

100.000 SenSEO-Downloads

Archive

Blog abonnieren

Suche

Kalender

Verwaltung des Blogs

Blogroll

Projects/Web

vCard

Sonntag, 7. Februar 2010

Anhand eines unserer aktuellen Projekte möchte ich zeigen, wie die genannte Technologie in Hinblick auf die Performance einer Website zu verstehen ist.

Folgende Statistik habe ich mit der Firefox Extension YSlow erstellt. Oben ist die Verteilung der Ressourcen bei einem ersten Request mit leerem Cache zu sehen. Der Bereich darunter zeigt die Verteilung bei einem zweiten Request unter Ausnutzung des Caches.

YSlow Weight Graphs

Der obere Bereich zeigt die typischen Ressourcen einer Seite. Etwas ungewöhlich sind die 2 XML-HTTP-Requests. Dahinter verbergen sich JavaScripte, welche asynchron mit der Managed XHR Technik von Steve Souders in die Seite integriert werden.

Interessanter in Bezug auf die erwähnte Technologie ist der untere Bereich, nutzt man Expires Header doch, um das Caching-Verhalten einer Seite positiv zu beeinflussen. Hier ist zu sehen, dass Scripte und Stylesheets nicht mehr aufgeführt werden. Dies ist wenig verwunderlich, da wir diese bereits mit Far Future Expires Headern versehen haben.

Expires Header für CSS und JavaScript

Das Neuladen des HTML-Dokuments ist gewollt und wird mit einem in der Vergangenheit liegenden Expires Header erzwungen. Wir erzwingen für diesen Fall das Neuladen, da das Dokument dynamisch generiert wird und sich von einem Aufruf zum nächsten verändern kann.

Neben dem HTML-Dokument erzeugen sämtliche Grafiken der Seite erneut Requests. Bei diesen steht die Auslieferung eines Expires Header momentan noch aus. Was im ersten Moment nur nach einer Einstellung in den Apache-Konfigurationen klingt, wird auf den zweiten Blick sehr viel komplexer, möchte man durch eine möglichst transparente Versionierung der Grafiken ein Neuladen bei Veränderungen erzwingen. Zumindest ist durch korrekte ETags sichergestellt, dass lediglich Requests in Form eines Conditional GET gemacht werden - die Daten selbst werden also nicht erneut übertragen. Allerdings braucht solch ein Request für den gesamten Roundtrip auch etwas Zeit - bei 40 Requests macht das in einem modernen Browser wie dem Firefox immer noch ganze 2 Sekunden aus!

Donnerstag, 4. Februar 2010

Nach 2 Monaten hatte ich den 1000sten Download von SenSEO gefeiert. Nach einem weiteren Jahr wurde meine Extension heute zum 100.000sten Mal heruntergeladen. Für diesen Anlass habe ich gestern eine neue Version released. Im Hintergrund fand ein komplettes Code-Refactoring statt - der alte YSlow-Code, auf dem SenSEO bisher basierte, wurde dank dieses Tutorials durch eigenen Code ersetzt. Die gesamte Oberfläche wurde ebenfalls überarbeitet. Ich habe diverse CSS3-Regeln genutzt, um einen neuen, attraktiven Look zu gestalten. Da die Extension nur im Firefox läuft, konnte ich aus dem vollen schöpfen Runde Ecken, Box- und Schriftschatten und Verläufe sind die wesentlichen Gestaltungselemente. Diese Version ist noch nicht freigegeben, kann aber bereits experimentell heruntergeladen werden.

Februar '10