Home Menü

Website Analyse – Ist-Zustand und Tools

Wie bei allen Projekten in der Industrie oder auch im Web muss unmittelbar nach Projektstart der Ist-Zustand des jeweiligen Arbeitsgegenstands analysiert und festgehalten werden, um am Ende die Ergebnisse auch auswerten zu können. In diesem Artikel stelle ich Ihnen die wichtigsten Tools zur Analyse Ihrer Website im Bezug auf die Performance vor und gebe Ihnen einen Einblick in die aktuellen Ladezeiten von Blog IT-Solutions.

Dieser Artikel ist Teil der Guideline High-Performance Websites mit WordPress.

Da sich diese Guideline bevorzugt an WordPress-Nutzer richtet, die zu einem großen Teil Ihr Blog in der Freizeit oder semi-professionell betreiben, möchte ich gezielt auf den Einsatz von kostenpflichtigen Tools verzichten. Sie finden in diesem Artikel somit ausschließlich kostenfreie Tools, was aber keinesfalls bedeuten muss, dass die Qualität darunter leidet.

Website Analyse – Ladezeiten der Webseite im Detail

Um die Ladezeiten der Webseite im Detail zu erfassen, bedienen wir uns eines Tools, welches die Ladezeit jeder beliebigen Webseite mittels eines Wasserfall-Diagramms darstellt. Das Tool findet man unter webpagetest.org. Für diesen Test habe ich als Test-Location Falkenstein, Germany und als Browser Firefox gewählt. Da die meisten unserer Besucher aus Deutschland kommen und von dort auch die Seite aufrufen, ist diese Einstellung für diese Webseite am repräsentativsten. Die angebotenen Einstellungen unter Advanced Settings bleiben im Moment noch unberücksichtigt.

Website Analyse - Ist-Zustand und Tools - Wasserfall Diagramm

Was können wir aus den von webpagetest.org gelieferten Daten ableiten?

Back-End vs. Front-End

Zum einen sehen wir, dass das Back-End im Gegensatz zum Front-End bei dieser Seite – wie übrigens bei fast allen anderen Seiten auch – eine untergeordnete Rolle spielt. Die Backend-Time ist hierbei diejenige Zeit, die benötigt wird, um das erste Byte vom Server zum Client zu transferieren. Darunter fallen typischerweise Operationen wie Datenbankabfragen, DNS-Abfragen oder bei WordPress die Generierung der Seite mittels PHP und vieles mehr.

Website Analyse - Ist-Zustand und Tools - Front-End vs. Back-End

Natürlich wird auch bei allen anderen Requests Back-End-Zeit benötigt, allerdings fasse ich diese, angelehnt an Steve Souders, in die Front-End-Zeit mit ein. Warum? Weil durch Front-End Optimierung ebendiese Requests entweder zum Teil komplett vermieden oder zumindest optimiert werden können. Die Arbeit geschieht hier vollständig im Front-End, ohne Berücksichtigung des Back-Ends.

Das Ergebnis in Zahlen:

ZeitProzent
Back-End0,202 Sekundenca. 5 %
Front-End3,721 Sekundenca. 95 %
Gesamt3,923 Sekunden100 %

Ladezeiten Empty Cache vs. Primed Cache

Besucht ein Anwender Ihre Webseite zum ersten Mal, dann wurde auf der Browser-Seite noch keine einzige Datei im Cache (Zwischenspeicher des Browsers) abgelegt (empty Cache). Das bedeutet, jedes einzelne Bild, jede CSS-Datei und JavaScript-Datei muss vom Server beim Aufruf Ihrer Website angefordert werden. Haben Sie hingegen Besucher die regelmäßig auf Ihrer Seite vorbeischauen, dann sind im Browser vielleicht bereits einige Bilder oder CSS-Dateien gecacht. Die Dateien liegen also bereits im sogenannten Primed Cache vor, was bedeutet, dass die Daten direkt aus dem Cache gelesen werden können, kein separater Request benötigt wird und die Seite somit schneller geladen wird. Die Zeiten hierfür sehen für Blog IT-Solutions wie folgt aus:

Ladezeit
Empty Cache3.923 Sekunden
Primed Cache1.106 Sekunden

Das sind – so viel kann ich an dieser Stelle bereits verraten – gar keine so schlechten Ladezeiten, was daran liegt, dass ich vor einiger Zeit bereits einige Performance-Verbesserungen auf der Seite angewandt habe. Nichtsdestotrotz bleibt nach oben noch immer jede Menge Spielraum.

Noch ein paar abschließende Worte zum Thema Browser-Cache: Auch wenn Ihre Seite sehr häufig von wiederkehrenden Anwendern heimgesucht wird, so sollten Sie sich keinesfalls auf die alleinige Optimierung der Ladezeit mittels Primed Cache verlassen. Der Grund: Eine Untersuchung von Yahoo! aus dem Jahre 2007 hat ergeben, dass etwa 40-60 % aller Anwender die Seite von Yahoo! mit leerem Cache aufrufen. Eine „signifikante Anzahl“ davon hat sogar immer einen leeren Cache. Erschwerend kommt hinzu, dass mobile Browser nur einen kleinen Cache-Speicher besitzen und somit die Wahrscheinlichkeit erheblich sinkt, dass der Anwender die Elemente Ihrer Seite noch im Cache vorrätig hat.

Document Complete vs. Fully Loaded

Eine für die Optimierung essentielle Information liefern uns noch die Statistiken zu Document Complete und Fully Loaded. Der Unterschied: Document Complete bedeutet, dass der Anwender nach dieser Zeit auf Ihrer Seite agieren kann. Er kann also bereits scrollen, Texte markieren und vieles mehr. Im Hintergrund können aber noch weitere Dateien wie beispielsweise Bilder oder oftmals JavaScript nachgeladen werden, die der Anwender im ersten Moment noch nicht benötigt. Bis diese Daten alle nachgeladen wurden vergeht noch etwas an Zeit (Fully Loaded).

Document CompleteFully Loaded
ZeitRequestsBytesZeitRequestsBytes
Empty Cache3.923s45567 KB4.590s47576 KB
Primed Cache1.106s838 KB1.174s838 KB

Der wichtigste Indikator für die Schnelligkeit einer Seite ist hierbei die Zeit unter Document Complete. Denn sobald der Anwender auf der Seite agieren kann, ist er glücklich und verlässt Ihre Seite zumindest aufgrund der langsamen Ladezeit nicht mehr. Bis er anschließend den ersten Satz auf der Seite gelesen hat, ist die Seite auch vollständig geladen, ohne dass der Anwender es mitbekommen hat.

Website Analyse – Back-End Zeiten überwachen

Für die Überwachung der Back-End-Zeit, wie Sie hier per obiger Definition angewandt wird, bediene ich mich des kostenlosen Monitoring-Tools von Pingdom. Für Blog-IT-Solutions sieht der Verlauf in Pingdom in den letzten 30 Tagen wie folgt aus.

Hinweis: Der Filter für die Response-Time wurde hier nur auf Deutschland (Dusseldorf und Frankfurt 2) gesetzt, da diese Werte für unsere Zielgruppe am aussagekräftigsten sind.

Website Analyse - Ist-Zustand und Tools - PIngdom

Was wird hier gemessen? Laut Pingdom wird hier die Antwortzeit eines einzelnen GET-Requests gemessen, was den HTML-Code und Header beinhaltet. Bilder, Flash, JavaScript und ähnliches bleiben hier vollkommen unberücksichtigt. Nehmen wir nun Bezug auf das vorgestellte Wasserfall-Diagramm, so entspricht die gemessene Zeit exakt der Zeit, die für den ersten Request des HTML-Dokuments (erste Zeile im Wasserfall-Diagramm) benötigt wird. (Im Beispiel sind dies 217ms, der Durchschnitt bei Pingdom zeigt 283ms an)

Die Statistik adressiert auch gleich zu Beginn ein großes Problem: Die Response Time des Servers schwankte in den letzten 30 Tagen zwischen 95ms und 518ms, was einer Abweichung von zum Teil über 500% entspricht. Das mit diesen Werten im Back-End keine anständige Analyse der weiteren Performance dieser Webseite möglich ist, ist schnell klar. Um Ihnen jedoch im weiteren Verlauf der Guideline auch anständige und nachvollziehbare Zahlen liefern zu können, werde ich mein Blog zuerst zu einem anderen Provider umziehen, der konstantere Werte im Back-End liefert.

Pingdom bietet unter Tools auch noch ein weiteres, nettes Analyse-Programm an, mit dem Sie ebenfalls – analog zu webpagetest.org – ein Wasserfall-Diagramm mit zahlreichen Informationen erzeugen können.

Website-Analyse mit Google Pagespeed

Ein wirklich tolles Tool, welches vor allem für die Leser unter Ihnen interessant sein sollte, die die Ladezeit Ihrer Webseite aus Gründen von SEO verbessern wollen, ist Google Pagespeed Insights. Dort wird Ihnen nach Analyse einer Webseite genau aufgezeigt, was man im Bezug auf die Performance noch verbessern kann. Eine ausführliche Hilfe sowie zahlreiche Tipps finden sich dort ebenfalls. Blog IT-Solutions erreicht im Test folgende Wertungen:

MobileDesktop
Google PageSpeed8489

Firebug und YSlow als Add-On für Firefox

Unverzichtbar für diejenigen, die sich mit Webentwicklung und insbesondere Web Performance Optimization (WPO) beschäftigen, sind die beiden Firefox Add-Ons Firebug und YSlow. Für letzteres wird allerdings Firebug vorausgesetzt, es handelt sich hierbei sozusagen um ein Add-On des Add-Ons. Als Hilfe zur Installation der Add-Ons unter Firefox kann ich Ihnen den Artikel Firefox – Add-Ons installieren empfehlen.

Da die Welt des WPO immer noch ziemlich klein ist, kommt an dieser Stelle wieder der WPO-Papst Steve Souders ins Spiel. Er ist nämlich der Entwickler von YSlow. Ein kurzer Test der eigenen Webseite mit YSlow liefert zum aktuellen Zeitpunkt folgendes Ergebnis:

Website Analyse - Ist-Zustand und Tools - YSlow

Das Ergebnis:

PunkteGrade
YSlow84B

Fazit

Jede Menge Tools und noch mehr Werte, die den jeweiligen Tools zugeordnet werden können. Jedes dieser Anwendungen bietet allerdings so seine eigenen, kleinen Tipps und Möglichkeiten, weshalb ich versucht habe, Ihnen die wichtigsten in diesem Artikel vorzustellen. Selbstverständlich gibt es noch eine Unmenge ähnlicher Tools, welche Sie gerne in den Kommentaren noch ergänzen können. Eines hat diese Ist-Analyse aber auf jeden Fall schon gezeigt: Alleine durch den Einsatz von unterschiedlichen Tools ergeben sich zum Teil bereits Erkenntnisse, die eine Optimierung der eigenen Webseite im Bezug auf die Performance sehr einfach machen.

Veröffentlicht von Josef Seidl

Josef Seidl ist Unternehmer und hat an der TU München und der Stanford University Wirtschaftsinformatik studiert. Er ist begeistert von Technik, schätzt performante Webseiten und ist gerne in den Bergen unterwegs. Zu finden ist er auch bei LinkedIn.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


DSGVO Cookie Consent mit Real Cookie Banner