Zur Agentur | UX Showcase

6 Kommentare | 18. März 2011, Oliver Schmid

Speed Optimierung für Websites

Leopard

Google hat längst bestätigt, dass die Geschwindigkeit einer Webseite nun auch ein Faktor für die Platzierung einer Website im Suchergebnis ist. Zudem hat Google eine eigene Firefox Erweiterung (Google Page Speed) für Firebug herausgegeben, welche den Programmierer bei der Optimierung helfen soll. Gut möglich, dass dieser Faktor noch an Einfluss gewinnen wird. Gemäss dem Chef Technicker der Firma Blaze Software sei Google bezüglich Geschwindigkeit absolut fanatisch.
Auch wenn der Geschwindigkeitsunterschied vielleicht nicht direkt bemerkt wird, so bleibt einem eine schnelle Website unbewusst doch in besserer Erinnerung und man besucht sie gerne wieder. Technisch gesehen braucht eine optimierte Website weniger Server Ressourcen und verursacht weniger Traffic.

Meine Erfahrung mit Speed Optimierung?

Kürzlich habe ich die Website der Webagentur Webgarten (ruhig mal testen) neu erstellt. Da Design und Inhalt übernommen wurden konnte ich mich voll auf einen sauberen, zeitgemässen und speed optimierten Code konzentrieren. Danach war die Website 2x schneller beim ersten Aufruf und 20x schneller beim zweiten Aufruf (gemessen mit PageTest). Am Server wurde nichts verändert. Hier meine Tipps:

  1. Geschwindigkeit hängt nicht vom CMS ab. Wer eine wirklich schnelle Website will muss eine Cache Erweiterung verwenden. Diese produziert regelmässig ein statisches HTML File aller Seiten. Dieses wird dann beim Aufruf der Webseite angezeigt. Dadurch wird das langsame „on the fly zusammenbauen“ der Website verhindert. Die Website wird massiv schneller und benötigt weniger Rechnerleistung.
  2. Progressive Enhancement: Nutzer neuer Browser sollen von neuen Funktionen profitieren können solange diese auf alten Browsern keine funktionalen Probleme verursachen. Ich verwende HTML5, welches einige kürzere Tags zulässt.
  3. Um unnötige Requests zu vermeiden verwende nur je ein JavaScript und CSS File. Im HTML Code sollen alle Kommentare und Umbrüche entfernt werden. Zudem sollte man das CSS komprimieren.
  4. JavaScript und CSS sollten auf der Seite nur eingebunden werden, wenn diese wirklich benötigt werden. Es macht keinen Sinn, wegen eines Formulars die ganzen CSS Anweisungen auf allen Seiten zu laden. Auch ein JS Framework wie jQuery muss nur dann geladen werden, wenn es auch gebraucht wird!
  5. Optimierung mit Google Page Speed. Einfach die Seite mit dem Plugin testen und den Anweisungen folgen. Hier kann einiger Aufwand anfallen. Alle Punkte müssen am Ende grün sein!
  6. Testen mit PageTest
  7. Überwachen mit Google Webmasters Tools

Werden die Kunden für all den Aufwand bezahlen?

Bei meiner Site habe ich wohl etwa 2 Tage für Speed Optimierung eingesetzt. Bei komplexeren Projekten kann der Aufwand sogar noch wesentlich grösser werden. Insbesondere die Cache Erweiterung kann in Kombination mit anderen Erweiterungen Probleme verursachen.
Oft findet der Kunde seine eigene Website bereits schnell, denn diese ist intern längst gecached oder die Website liegt sogar auf einem Server innerhalb des eigenen Firmennetzwerk.
Soll man den Aufwand trotzdem betreiben? Ja, ich denke man sollte es dem Kunden als Option offerieren. Will er über die Website Umsatz generieren wird er wohl künftig darum nicht herumkommen. Ist die Website nur da um die Adresse nachzuschlagen benötigt er sicher keine Speed Optimierung. Was denkt ihr darüber?

Es ist wie wenn ein Formel1 Fahrer vor dem Rennen nochmals das letzte Staubkorn entfernt. Es mag überflüssig erscheinen, aber es kann am Ende zwischen Sieg und Niederlage entscheiden.

6 Antworten zu “Speed Optimierung für Websites”

  1. Danke für den Artikel Oliver. Deine Website macht technisch „von vorne“ wirklich einen guten Eindruck und die Geschwindigkeit ist bemerkenswert gut.
    Eine Sache, die du hier anführst und die auch Page Speed so zu sehen scheint ist: „Remove unused CSS“.
    Es soll also möglichst für eine Seite nur das an CSS ausgeliefert werden, was tatsächlich gebraucht wird. Das bedeutet, dann doch aber auch, dass ich beim Aufruf einer zweiten Seite eine neue CSS-Datei laden muss, die entweder die erste ersetzt oder ergänzt.
    In der Summe ergeben sich also mehr HTTP-Requests, die für die Performance normalweise schlechter sind, als eine Datei die vielleicht 5kb zu groß ist.

    Wie siehst du das?

  2. Hi Sebastian, mhh.. interssanter Gedanke. Ich denke es macht nur dann Sinn, wenn eine einzelne Seite relativ viel eigenes CSS benötigt. Bei mir waren das die Fallbeispiele und das Formular. Da habe ich die zusätzlichen Styles einfach als zweites CSS eingefügt. Ich denke die Mehrheit der Besucher gelangt gar nicht auf diese Seiten und profitiert daher. Der Startseite und den Seiten auf dem ersten Level gebe ich darum höchste Priorität und möchte nicht dass da unnötig Styles geladen werden.

  3. Andreas sagt:

    Hallo Oliver!

    Interessanter Blogpost.

    Ist das Google Page Speed Tool besser als YSlow von Yahoo?
    http://developer.yahoo.com/yslow/
    Was sind deine Erfahrungen?

    Hier noch eine Website um die Geschwindigkeit zu testen.
    http://loads.in/
    Vorteil: Nicht nur IE und Chrome als mögliche Browser.
    Nachteil: Keine Vorschläge wie man das Laden der einzelnen Inhaltsteile verbessern kann.

  4. Hallo Andreas, danke für die Tipps. YSlow habe ich noch nicht getestet. Dass Page Speed von Google ist passt mir ganz gut. Denn ich gehe davon aus dass die Google Suche ähnliche Verfahren anwendet.

    Sehr gut dass bei loads.in auch Chrome gewählt werden kann. Denn bis und mit IE8 muss bei HTML5 noch ein Script geladen werden :-(

  5. Da habe ich wieder mal etwas gelernt. Ich wusste bisher absolut nicht das man css komprimieren kann. Sind echt ein paar gute Ansätze in dem verlinkten Onlinetool. Jetzt bräuchte ich nur noch ein Cache-Plugin das die dynamischen Seiten in komplett statische htmls wandelt und in die entsprechenden Ordner legt, das wäre optimal imho aber ich glaube da gibt es keins das genau das macht, zumindest nicht für wp

  6. I really appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again!

Einen Kommentar schreiben

Folge uns per Twitter | Facebook Fan werden
© 2010 by Webgarten GmbH, Haldenstrasse 5, CH - 6340 Baar, Schweiz, +41 (0)41 500 07 67