Websites tunen mit YSlow

Zwar werden die Netzwerkanbindungen immer schneller, aber in gleichem Masse wächst auch die zu übertragende Datenmenge: Kiloweise HTML, CSS und Javascript, dynamische Bildchen, Favicons, Ads, Cookies, Ajax, Mr. Proper und Schiessmichtot machen alleine auf diesem Blog über ein Megabyte aus. <einschub>Ich weiss noch, als ich den Teilnehmer eines Internetkurses um 1995 gesagt habe, dass 1 MB ungefähr 1 h zum Download braucht</einschub>. Ich möchte Euch Lesern ein gutes Erlebnis bieten und darum bin ich mal ans Tuning des Blogs gegangen. Mein Ziel: Möglichst rascher Download und Seitenaufbau mit minimalem Qualitäts-, Inhalts- und Informationsverlust. Die Optimierung sollte schliesslich auch gemessen werden um den Erfolg bestimmen zu können.

Werkzeuge

Ganz sicher brauchen wir den Firefox und das Firebug Add-on. Dies sind die Grundlagen für eine nette Erweiterung, die Yahoo für uns gecoded hat: YSlow. Sobald alles installiert ist und Firefox seine Restarts durchlitten hat, kann es losgehen.

Benchmarking

Will man optimieren, so empfiehlt es sich sehr zu messen, wie erfolgreich man war. Nicht selten sieht man ein Verschlimmbessern bei solchen Aktionen. Nach dem Ansurfen der Website kann auf das YSlow-Icon in der Statuszeile geklickt werden. Die Messungen sollten automatisch beginnen.

Die Werte für dieses Blog:

Perfomance grade: F (37)
Load Time (Verifiziert mit Firebug-Netzwerk): 6,081 Sec

Im Menü Tools gibt es einen Eintrag Printable View, dieser fasst auf einer Seite alles nett zusammen:

Analyse

Grober Überblick

Im Amerikanischen Notensystem ist A die Beste und F die schlechteste Note. Wir sollten uns also vorallem den F’en her aufwärts zuwenden. Leider liegt vieles ausserhalb meiner Reichweite, denn auf Google habe ich keinen Einfluss und bei vielen Hostern hat man auch keine Möglichkeiten die Details der Webserverkonfiguration zu ändern. Trotzdem lohnt es sich, die Dinge durchzugehen.

1. Make fewer HTTP Requests

Gerade hier liegt wohl das Hauptpotential. Google zeigt nur drei Werbeflächen auf einer Seite an, bei meinem Template werden sie für jeden Artikel angefragt und dann mit einem 404er HTTP-Statuscode abgeschmettert. Wenn ich das Template ändere und zähle, wie oft ich Google angefragt habe, sollten schon einige der Anfragen eliminiert werden. Huschhusch, ein bisschen PHP, die eh nicht funktionierenden Textads raus und das Ganze wäre erledigt, deutlich sichtbar im Netzwerktteil von Firebug: Dort hat es nur noch wenige rote 404er…

Ich könnte auch noch Stylesheets von Hand zusammenfassen, aber da möchte ich mir im Moment lieber die Finger nicht verbrennen.

2. Use a CDN

Ein Content Delivery Network, dass statische Inhalte näher zum User bringt, kann ich mir leider nicht leisten…

3. Add an Expires header

Hier ist nur eine Domain unter meiner Kontrolle, der Rest ist von Google. Da kann ich leider auch nichts tun…

4. Gzip components

Die Theorie ist hier, dass Computer schneller sind als das Netzwerk. Es würde sich lohnen, Inhalte gepackt über das Netz zu senden. Gerade Texte (wie HTML-Seiten und CSS) würden sich drastisch verkleinern lassen. In Apache 2 würde das mod_deflate übernehmen. Diese Möglichkeit fällt aus, da ich keinen Zugriff auf die Apache-Konfiguration habe.

WordPress konnte vor Version 2.5 selbstständig Beiträge gzippen, in späteren Versionen reaktiviert das GZippy Plugin das Ganze wieder. Hochladen und Aktivieren des Plugins reichen und YSlow ist schon viel zufriedener.

Ich habe noch etwa 12 kB CSS. Diesen rücke ich mit WP-CSS zuleibe. Hier könnte man noch mit weiterer Magie auf die CSS-Dateien einwirken, aber das lasse ich dann mal lieber, wir wollens ja auch nicht übertreiben und das laufende System gefährden…

13. Configure ETags

Einige meiner Dateien bringen schon einen ETag. Das hätte auch in der Datei .htaccess mittels FileETag All konfiguriert werden können. Leider kann dies nur für Dateien gelten und nicht für den dynamischen Part. Leider gibt es noch klein Plugin für WordPress, dass dies übernimmt.

Rest

Beim Rest hat die Seite entweder Bestnoten oder ich bin machtlos ohne Serverzugriff…

Resultat

Mit YSlow

Was stand in meiner Macht:

Perfomance grade: D (61)
Load Time (Verifiziert mit Firebug-Netzwerk): 4,06 Sec

Gewinn: Etwa 2 Sekunden. Das ist nicht schlecht, finde ich. Ausserdem wurde der ganze Netzverkehr reduziert.

Andere Herangehensweise mit Cacheing

Eine weitere Möglichkeit bietet Cacheing. Statt das bei jedem Seitenaufruf die ganze Geschichte neu generiert wird, wird das einmal gemacht und allen Browsern danach nur noch eine statische Datei geliefert. Dies hat den Vorteil einer enormen Geschwindigkeitssteigerung, aber auch den Nachteil, dass das ganze System umgestellt wird, Plugins in der neuen Umgebung rumzicken und Änderungen nur alle Stunden sichtbar werden. WP-Cache arbeitet mit meinen Plugins zusammen. Wenn man GZippy wieder entfernt und stattdessen zlib.output_compression = On in die php.ini schreibt, wird es dramatisch: Nur noch etwa 1,5 Sekunden Ladezeit. Das macht Freude. Nun muss ich allerdings mal nachsehen ob noch alles funzt 🙂 …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.