Google ist nicht mehr wegzudenken. Schon gar nicht für Webseitenbetreiber und Agenturen. Das Ranking ist entscheidend für die Besucherzahl einer Seite.

Vor einigen Wochen hat Google die schockierende Nachricht publiziert, dass Webseitengeschwindigkeit einen Einfluss auf die Position der Ergebnisse nehmen soll.

Vorerst ist der Parameter für die Geschwindigkeit nicht wesentlich relevant, da dieser bisher nur auf google.com und auch nur für weniger als 1% der Suchabfragen angewandt wird. Doch hat Google auch angekündigt den Parameter in allen Google-Suchmaschinen anzuwenden. Daher bietet die beliebteste Suchmaschine Webseitenentwicklern an, Tools zuverwenden, die Seiten auf ihre Geschwindigkeit testen und zur Optimierung verhelfen sollen.

Page Speed:
Das erste Tool, dass nun vorgestellt wird, ist das von Google empfohlene Page Speed. Dieses Tool ist ein Open Source Add-on für Mozilla Firefox – Firebug. Es dient zur Evaluierung der Performance.

pagespeed_02

Mit einem Klick auf den Button “Analyze Performance” werden die einzelnen Performancetests durchgeführt und nach kurzer Zeit dargestellt. Schon erhält man den Page Speed Score: xxx / 100. Wenn die Zahl hoch ist und einen grünen Hacken als Kennzeichen trägt, ist die Seite optimiert. Zusätzlich zu der allgemeinen Score-Bewertung erhält man eine Liste der 25 durchlaufenen Tests, die von schlechtester bis zur besten Bewertung sortiert ist. Die Faktoren, die ein Ausrufezeichen als Symbol neben sich stehen haben, besitzen das meiste Potential zur Verbesserung der Seite. Fährt man mit der Maus über das Symbol, erhält man für den einzelnen Test eine Bewertung. Klickt man nun auf dieses, erscheint ein Verbesserungsvorschlag.

Unter dem Menüpunkt “Ressources” lassen sich die Antworten des Servers der angeforderten Dateien (doc, js, css, images, cssimages, iframe, objects usw.) beobachten und vergleichen. Somit erkennt man sofort, ob eine JavaScript Datei zu groß ist oder welcher Status-Code der Server zurückliefert. Zusätzlich wird die File Size und die Transfer Size angezeigt. Leider hat Page Speed bei unseren Tests keine File Size anzeigen können (Stand: 19.04.2010).

Das Ergebnis lässt sich unter “Exportieren” auch als .json-Format auf den eigenen Desktop speichern.

Als Page Speed Installiert wurde, wurden zwei neue Menüpunkte im Firebug angelegt. Neben dem bereits erläutertem Punkt “Page Speed” existiert ein weiterer: “Page Speed Activity”.
Dieser Punkt zeichnet sämtliche Aktivitäten der jeweiligen Seite auf und unterteilt diese durch entsprechende Farben. So kann ein Administrator sofort erkennen an welchem Punkt die Abfrage zu Verzögerungen kam.

Fazit:
Page Speed hat seine Vorteile und Nachteile. Für Page Speed spricht auf alle Fälle die schnelldurchgeführten Tests und die Tatsache, dass es einfach als Add-on von Firebug schnell aufrufbar ist. Da Page Speed von Google empfohlen wird, könnte der Score dem Ranking-Faktor für die Geschwindigkeit ähnlich sein. Doch Leider bietet Page Speed keine Statistik oder eine druckbare übersichtliche Anzeige an.

YSlow:
YSlow ist eine ältere Variante von Yahoo. YSlow ist ebenfalls ein Firebug – Add-on und nutzt das amerikanische Notensystem von A(1) bis F(6). Zusätzlich bietet YSlow eine strukturiertere Oberfläche und ebenfalls einen Score Wert.

yslow

Der Vorteil an YSlow ist der Filter, der die einzelnen Testergebnisse in unterschiedliche Spaten ein ordnet. So erkennt man leichter an welchen Bereichen man nochmal Hand anlegen sollte. Durch die 6-stufige Bewertung des Notensystems sind die Test genauer dargestellt, wie das von Page Speed benutzte Ampel System. Das Tool bietet weitere Menüpunkte (Grade, Components, Statistics und Tools) an.

Unter dem Reiter “Components” sind sämtliche Komponenten der aktuellen Seite aufgelistet. In der ersten Zeile steht die Gesamtanzahl der angeforderten Komponenten und dessen Gesamtgröße. Zusätzlich zeigt dieser auch für jede einzelne Datei die “File Size” “GZIP Size”, “Cookie Received”, “Cookie Sent”, “Headers”, “URL”, “Expires”, “Response Time”, “ETAG” und “Action” an. Somit lässt sich am schnellsten herrauslesen an welcher Datei man noch schnellere Ladezeiten erreichen kann.

“Statistics” verschafft dem Tester ein Diagramm, an dem er erkennen kann wie groß jeder einzelne Bereich der HTTP – Requests ist. (leerer Cache und befüllter Cache)

yslow_02

“Tools” ist eine weitere Funktion von YSlow und bietet Tools, wie JSLint, dass die JavaScript Qualität der Seite überprüft, oder man hat die Möglichkeit alle JavaScript Dateien als Minified-Version oder normal anzeigen zu lassen.

Als Extras bietet das Tool eine druckbare Version und eine ausführliche Dokumentation an.
Die Rulesets lassen sich neu anlegen und verwalten. Standardmäßig sind bereits drei Rulesets angelegt (YSlow(V2), Classic(V1) und Small Site or Blog).

Fazit:
Als Fazit lässt sich sagen, dass YSlow einige Extras bietet, die man bei Page Speed vermisst. YSlow besitzt nach der Installation neben dem Firebug-Symbol (unten, rechts im Browser) ein eigenes Symbol, dass nach Ablaufen des Tests KB und Sekunden des Ladezeitraums anzeigt.

YSlow und Page Speed im Vergleich:
Es schadet nicht beide Tools zu nutzen, denn beide haben ihre Vorteile und Nachteile.

YSlow Page Speed
Schnelligkeit ja ja
Bedienung einfach einfach
Flash berücksichtigt nein nein
Druckbare Version ja nein
Individuelle Einstellung ja nein
Export JSON nein ja
Statistik ja nein
Minified (CSS, JS) ja ja
Aufzeichnen der Aktivitäten nein ja
Ressourcenansicht ja ja
Verbesserungsvorschläge ja ja

gtmetrix

Beide Tools lassen sich gut auf der Seite gtmetrix.com gegenüber stellen und diese ist auch perfekt für Nutzer, die kein Firebug bzw. Firefox installiert haben. Nur ist uns aufgefallen, dass die Werte, die auf gtmetrix.com, nicht ganz mit den Werten des Add-ons übereinstimmen. Das könnte daran liegen, das die Hosts, mit denen getestet wird ,von unterschiedlichen Orten stammen oder gtmetrix.com eine andere Version nutzt. Doch haben die Werte meist nur +- 2 Scorepunkte Unterschied.

WebPagetest
Zuletzt stellt sich webpagetest.org vor. Diese Seite macht es möglich ohne irgendwelche Installationen Performancetests mit sehr vielen Einstellungsmöglichkeiten durchzuführen.

webpagetest

Diese Seite bietet einen Screenshot, eine Zeitleiste mit allen Zeiten von den geladenen Komponenten, eine Optimierungscheckliste und Details an denen man erkennen kann, wo genau es zu Verzögerungen kommt. Eine Request-Detail-Liste findet man unter den grafisch dargestellten Zeitbereichen. Nachteilig an der Seite ist, dass sie sehr unübersichtlich ist. Aber trotzdem bietet webPagetest die meisten Einstellungsmöglichkeiten an. Man kann zum Beispiel meherere Testdurchläufe eingeben oder den Standort der Tests wählen, doch liegen diese alle außerhalb Europas und sind daher für Seiten, die meist nur in Deutschland besucht werden, nicht optimal.

Allgemeine Tipps zur Webseitenbeschleunigung:

  • Statische JavaScript- und CSS-Dateien, die nicht verändert werden, als Minified-Version schreiben. D. h. Alle Kommentare und Funktionen die nicht verwendet werden entfernen und alles in einer Zeile schreiben. Dadurch kann man schon einiges an Datengröße minimieren.
  • Möglichst viele Kommentare im Quelltext entfernen.
  • Mehrere JavaScript- und CSS-Dateien in eine große Datei zusammenfügen. Dadurch wird nur eine Anfrage für eine Datei gestellt.
  • Bilder als CSS-Sprites verwenden. (SpriteMe!, CSS Sprite Generator)
  • Viele Datenbankanfragen vermeiden.
  • Bilder und Objekte sollten von der Datengröße gering gehalten werden.
  • Bilder und Objekte sollten immer eine definierte Breite und Höhe haben.

Google hat eine klare Ansage gemacht und wir sollten dem folgen. Früher lagen die großen Verzögerungen meist an der schlechten Bandbreite, doch heutzutage ist das Internet schneller denn je. Deshalb liegt es an einem selbst, wenn die eigene Seite eine Ewigkeit in Anspruch nimmt um geladen zu werden. Wir können dafür sorgen, ein schnelleres und benutzerfreundliches Internet zu formen.

Alle Links im Überblick:

ähnliche Einträge
Danny
über den Autor:

Danny studiert Medientechnik mit Schwerpunkt Medieninformatik. Er macht sein Praxissemester bei coma.