Performance Tuning


Es gibt ja unter anderem die SEO-These, dass das google Ranking auch durch die Ladezeiten einer Website beeinflusst wird, und mit diesem Hintergedanken bekam ich neulich beim Blick in die Google Webmastertools wirklich Panik: 3,1 Sekunden, langsamer als 52 % der Websites.
Drei-Komma-Eins Sekunden?! Wtf? Messen die das aus Timbuktu? Inzwischen weiß ich, das die Messungen durch User meiner Website mit installierter Google Toolbar gemacht werden (link). Die Schlussfolgerung lautet also: Die haben alle eine ziemlich miese Internetverbindung, alte Rechner und lahme Browser… naja, und meine Website ist wohl tatsächlich langsamer als jede zweite andere.

Da ich das unmöglich auf mir sitzen lassen kann ist jetzt Extrem-Optimierung angesagt. Wenn ich die Grafik richtig deute muss ich dabei auf eine durchschnittliche Ladezeit von 1,5 Sekunden kommen um in den Olymp der 20% schnellen Websites aufzusteigen. Für den Anfang habe ich mir nur die Startseite vorgenommen (aktuell: 2,3 Sekunden).

Hilfreiche Tools hierfür sind: Page Speed (google) und YSlow (yahoo)

Hilfreichste Optimierungen:

  • CSS+JS Files mit dem YUI Compressor komprimieren, und ausschließlich die für die jeweilige Seite benötigten Scripte zu einer Datei zusammenfassen und einbinden. Auf der Startseite brauche ich z.B. keine jQuery-UI Komponenten – über 100K gespart
  • Bilder zu Sprites zusammenfassen und als Hintergrundgrafiken positionieren – 6 Grafiken in einer Datei zusammengefasst, 5 Requests gespart
  • Bilder gnadenlos komprimieren, png!=png da lässt sich sogar verlustfrei eine ganze Menge sparen. Tool: http://www.punypng.com/
  • Externe JS asynchron laden (hilft zwar glaube ich nicht bei der gemessenen Ladezeit, weil geladen werden sie ja trotzdem – allerdings kann das unter Umständen den Seitenaufbau beschleunigen) oder
  • Externe JS ganz rausschmeißen wenn nicht benötigt. Die Facebook JS-API ist so ein Fall… die tut nämlich die meiste Zeit exakt gar nichts und kostet dafür siginifikant viel Ladezeit. Als praktischer Nebeneffekt wird die Seite ohne die Tags auch wieder w3c konform. Da man sich auf der Startseite dennoch mit FB einloggen können soll, wird die jetzt erst onClick geladen. Das hat zwar auch ein paar hässliche Nebeneffekte, aber dann müssen die bisher noch recht wenigen FB-Connect User halt beim Login-Klick etwas länger warten, PopUps erlauben und unter Umständen zwei mal klicken.
    Der Analytics-Tag ist mir zwar auch noch ein Dorn im Auge, aber ich bin ja leider auch ziemlich heiß auf meine Statistiken 🙂

  • Den Netzwerk-Tab in Firebug beobachten. Bei mir hat z.B. ein .swf onload noch eine Grafik nachgeladen, was als letzter Balken nach einiger Verzögerung deutlich negativ aufgefallen ist. Die Grafik ist jetzt Bestandteil der Website und der Flashfilm legt sich transparent darüber – 200ms gewonnen.

Ich habe damit jetzt tatsächlich einen Page Speed Score von 99 und einen YSlow Score von 94 erreicht.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s