trans500-20

Dies ist der zweite Teil unserer Serie über Webseiten-Optimierung. In diesem Beitrag wollen wir Euch zeigen, welche Tools wir verwendet haben, um unsere eigene Webseite wie ein Crawler zu lesen und zu analysieren.

Teil 1: Unser Einstieg in die Webseiten-Optimierung
Teil 2: Tools zur Webseiten-Analyse
Teil 3: Unsere Umsetzung der Webseiten-Optimierung

Die Daten der Analyse-Tools sind der Ausgangspunkt für Optimierungen an der Webseite. Zum Teil geben die Tools auch konkrete Hinweise, die man umsetzen kann. Wer nach „Webseitenoptimierung“ googelt, erhält eine Flut von Tools und kleinen Helferlein. Browser bringen jedoch schon eigene Werkzeuge mit oder lassen sich mit Plugins erweitern, mit denen man jede Webseite die man aufruft, genauer unter die Lupe nehmen kann.

Als Einstieg zeigen wir Euch die drei Tools, die wir für die Optimierung unserer eigenen Seite in den letzten Wochen eingesetzt haben. Die Tools nutzen die interne Mechanik der jeweiligen Browser, daher liefern sie leicht unterschiedliche Zahlen. Alle drei Tools sind kostenlos.

1. Entwicklertools von Google Chrome + Plugin PageSpeed Insights
Google bietet mit rechte Maustaste / Element untersuchen Zugriff auf die Entwicklertools. Diese haben wir mit dem Plugin PageSpeed Insights aus der Werkzeugkiste von Google Developers ergänzt.

hitzestau-webseitenoptimierung-2-1-600
Für Vollansicht hier klicken

2. Firebug für Firefox + YSlow von Yahoo
Das Plugin Firebug ist das Pendant zu den Google Entwicklertools, welches wir mit YSlow von Yahoo ergänzt haben. YSlow gibt es auch für Google Chrome, aber es war uns wichtig, mit zwei unterschiedlichen Browser zu arbeiten.

hitzestau-webseitenoptimierung-2-2-600
Für Vollansicht hier klicken

3. Pingdom Website Speed Test
Pingdom bietet mehr als einen simplen Ping-Dienst, sondern eine umfangreiches Analysetools ähnlich wie PageSpeed Insights und YSlow.

hitzestau-webseitenoptimierung-2-3-600
Für Vollansicht hier klicken

Die Tools zeigen, wie ein Crawler eine Webseite liest, analysiert und bewertet. Die Kunst besteht jetzt darin, dies in konkrete Verbesserungen an der Webseite umzusetzen. Auch wenn die Tools zum Teil direkte Umsetzungsvorschläge machen, ist auch immer eine rechte Portion Trial-and-Error mit dabei. Wir haben schon öfters erwähnt, dass es gewisse Kriterien gibt, auf die unser Crawler achtet. Schauen wir uns doch mal ein paar Beispiele an.

Beginnen wir mit 20min.ch, einer der grössten Schweizer Newsseiten. Wir haben sie mit den Entwicklertools von Google Chrome angeschaut und zwar einmal mit und einmal ohne Werbung, die wir mit einem Adblocker ausgeblendet haben.

hitzestau-webseitenoptimierung-2-4-900hitzestau-webseitenoptimierung-2-5-900hitzestau-webseitenoptimierung-2-6-900hitzestau-webseitenoptimierung-2-7-900
Für Vollansicht hier klickenFür Vollansicht hier klickenFür Vollansicht hier klickenFür Vollansicht hier klicken

trans500-20

Mit oder ohne Werbung hat keinen grossen Einfluss auf die Server-Wartezeiten. Auf die Anzahl Requests aber schon, da ja die Banner auch alles Dateien sind, die geholt und geladen werden müssen. Ohne Werbung bringt es die Startseite auf 217 Requests. Die 3.1 MB Datenmenge brauchen 3.09 Sekunden bis sie geladen sind. Mit Werbung hingegen bringt es die Startseite auf 268 Requests, 3.4 MB Daten und unglaubliche 6.7 Sekunden Ladezeit.

„Wow, also 3.4 MB für eine Startseite und fast 300 Requests sind auch nicht von schlechten Eltern.“ (Monk-Trader von hitzestau)

Die drei Tools PageSpeed Insights, YSlow und Pingdom analysieren eine Webseite nicht nur, sie bewerten sie auch jeweils mit einem Gesamt-Score und machen Optimierungs-Vorschläge. Im Folgenden haben wir drei grosse Newsseiten 20min.ch, nzz.ch und tagesanzeiger.ch mit jeweils allen drei Tools getestet. Wenn Ihr die gemachten Vorschläge der Tools untereinander vergleicht, stellt Ihr fest, dass jedes Tools die Webseiten etwas anders bewertet. Darum ist auch bei jedem der drei Tools eine andere Seite als die Beste gewertet. Hier sind die Ergebnisse:

20min.ch, nzz.ch und tagesanzeiger.ch mit PageSpeed Insights

hitzestau-webseitenoptimierung-2-8-900hitzestau-webseitenoptimierung-2-9-900hitzestau-webseitenoptimierung-2-10-900
Für Vollansicht hier klickenFür Vollansicht hier klickenFür Vollansicht hier klicken

trans500-20

20min.ch, nzz.ch und tagesanzeiger.ch mit YSlow

hitzestau-webseitenoptimierung-2-11-900hitzestau-webseitenoptimierung-2-12-900hitzestau-webseitenoptimierung-2-13-900
Für Vollansicht hier klickenFür Vollansicht hier klickenFür Vollansicht hier klicken

trans500-20

20min.ch, nzz.ch und tagesanzeiger.ch mit Pingdom

hitzestau-webseitenoptimierung-2-14-900hitzestau-webseitenoptimierung-2-15-900hitzestau-webseitenoptimierung-2-16-900
Für Vollansicht hier klickenFür Vollansicht hier klickenFür Vollansicht hier klicken

trans500-20

Die Anzahl Requests ist ein Kriterium, das von allen drei Tools zur Optimierung der Seite vorgeschlagen wird. Je weniger Requests an den Server gestellt werden müssen, desto schneller lädt die Seite. Eine Möglichkeit zur Reduktion der Anzahl Requests ist beispielsweise die Zusammenfassung einzelner Grafikelemente in ein Sprite. Was das genau ist, erklären wir Euch im dritten Teil dieser Serie.

Die Komprimierung der Daten, die zwischen Webserver und Browser verschickt werden, ist ebenfalls eine gängige Massnahme zur Verbesserung der Ladezeit. Dies verlangt zwar etwas Rechenpower auf beiden Seiten, aber die ist heute in genügendem Ausmass vorhanden. Eine geringere Datenmenge bedeutet weniger Zeit für die Übertragung, auch bei niedriger Bandbreite. Insbesondere im Mobile-Bereich kann dies wichtig sein, wenn man zum Beispiel ein Abo mit einem limitierten Datenvolumen hat. Webseiten, die ihre Daten komprimiert an den Browser senden, gelten in den Augen des Crawlers als mobiltauglich und das ist heute sicher ein Pluspunkt. In den Screenshots von YSlow wird dazu jeweils der Dienst gzip vorgeschlagen, der zu den am meist verbreiteten gehört.

Ladet Euch die Plugins doch mal herunter und prüft eure eigene Webseite (oder auch eine andere) und schaut, welche Anstrengungen zur Optimierung dort schon unternommen wurden. So bekommt Ihr ein besseres Gespür für das Thema Webseitenoptimierung und könnt die Vielzahl von Kriterien und Anforderungen entdecken, die man heute als Webseitenbetreiber beachten muss. So ist es auch interessant zu sehen, in welcher Reihenfolge die einzelnen Elemente einer Webseite geladen werden. Die Tools zeigen auch, wie lange diese jeweils brauchen und welche unter Umständen sehr lange benötigen und damit das fertige Laden der Seite verzögern. So können beispielsweise die Social Plugins von Facebook manchmal mehrere Sekunden benötigen, bis sie fertig geladen sind.

Im nächsten Teil unserer Serie zeigen wir Euch, was wir konkret für unsere eigene Webseite umgesetzt haben.


Die Kommentarfunktion ist auf Grund der DSGVO geschlossen!