Moderne Browser bieten mit ihren integrierten Entwickler-Tools Analysemöglichkeiten für die Performanceoptimierung. Mit diesen Werkzeugen lassen sich Webseiten bei der Erstellung clientseitig analysieren und im Hinblick auf die Ladezeit optimieren. Dazu wird eine Webkonsole bereitgestellt, die eine direkte Manipulation der Webseite in dem Browser ermöglicht [KR13]. Des Weiteren wird der Netzwerkverkehr protokolliert und in Form eines Wasserfalldiagramms visuell aufbereitet (siehe Abbildung 2.4).
Google Chrome
Die Entwickler-Tools werden von den Browser-Herstellern unterschiedlich bezeichnet und lassen sich entweder in den Einstellungen des jeweiligen Browsers oder über eine Tastenkombination aktivieren. In dieser Arbeit wird Google Chrome in der Version 46 verwendet. Die Aktivierung der Entwickler-Tools erfolgt dort über das Menü unter dem Punkt Anzeigen –> Entwickler –> Entwicklertools oder mittels der Tastenkombination ALT + CMD + I.
Nach dem Aufruf der Entwickler-Tools stehen im oberen Bereich der Ansicht mehrere Karteireiter zur Verfügung. Für die Performanceoptimierung relevante Informationen sind unter den Reitern Network und Audits zu finden. In Abbildung 2.4 wird der Ablauf bei dem Laden einer Webseite als Wasserfalldiagramm in der Network-Ansicht dargestellt. Die Fußzeile der Entwickler-Tools gibt Auskunft über die Anzahl der HTTP-Anfragen, das übertragene Datenvolumen und die benötigte Ladezeit.
Mitte 2015 wurde eine Filmstreifen-Ansicht eingeführt. Diese zeigt den Fortschritt der visuellen Darstellung beim Ladevorgang an und wird mit Hilfe der Tastenkombination CMD + R gestartet. In dieser Ansicht lassen sich darüber hinaus die HTTP-Header der einzelnen Ressourcen analysieren (siehe Abbildung 2.5). Beachtet werden sollte, dass die Übertragung der Daten per GZIP komprimiert erfolgt und die Funktion Keep-Alive eine bestehende Verbindung offen hält. Somit lässt sich ein erneuter Verbindungsaufbau, während des Ladens der einzelnen Ressourcen von der gleichen URL, vermeiden. Anhand dieser Übersicht können außerdem ergänzende Informationen zum Browser-Caching angezeigt und ausgewertet werden.
Über den Reiter Audits lassen sich Informationen zu Verbesserungspotentialen anzeigen (siehe Abbildung 2.6). Des Weiteren werden, nach einem Klick auf den Pfeil in der Auflistung, Hinweise zur Umsetzung der einzelnen Verbesserungen angegeben.
Die Entwickler-Tools in Google Chrome ermöglichen die Auswahl verschiedener Endgeräte und Netzwerkverbindungen, um das Laden und die Darstellung der Webseite mit unterschiedlichen Konstellationen zu testen, beispielsweise bei dem Abruf über mobile Datennetzwerke mit verschiedenen Round Trip Times, wie in Abbildung 2.7 gezeigt.
YSLOW
Neben den bereits integrierten Entwickler-Tools der Browser existiert mit YSLOW eine Browser-Erweiterung zur Performanceoptimierung. YSLOW wurde von Yahoo! entwickelt und basiert auf einem Regelwerk von Kriterien, die für schnelle Websites gelten [Sou07]. Die Einhaltung dieser Kriterien wird geprüft und anschließend eine Bewertung, anhand der Noten A bis F, mit konkreten Handlungsempfehlungen zur Verbesserung der Webseite ausgegeben (siehe Abbildung 2.8).
In einer weiteren Übersicht werden die geladenen Ressourcen von YSLOW zusammengefasst und eine statistische Übersicht gezeigt, in der die Anzahl der Anfragen und das Datenvolumen bei dem Abruf der Webseite ausgewertet werden (siehe Abbildung 2.9).
PageSpeed Insights
Google bietet mit PageSpeed Insights eine ähnliche Web-Anwendung, mit der eine Bewertung anhand der von Google als relevant erachteten Kriterien für schnelle Webseiten erfolgt. Auf Basis von 0 bis 100 Punkten wird ein PageSpeed Score gebildet.
PageSpeed Insights berücksichtigt, im Gegensatz zu YSLOW, die Optimierung der Darstellung auf mobilen Endgeräten und vergibt, zusätzlich zu der in Abbildung 2.10 gezeigten Bewertung für die Desktop-Ansicht, eine Bewertung mit Verbesserungsvorschlägen für die Ansicht und Nutzererfahrung auf den mobilen Endgeräten (siehe Abbildung 2.11).
Zur Bewertung werden von PageSpeed Insights, neben der Page Load Time, auch die HTML-Struktur, die Verwendung und Kompression von Bildern sowie eingesetzte externe Ressourcen, wie Cascading Style Sheets und JavaScript-Dateien, herangezogen [Gooc]. Einfluss auf die Bewertung hat darüber hinaus die Above the Fold Time (AFT). Hierbei handelt es sich um die erforderliche Zeit, alle Inhalte in dem sichtbaren Bereich, die ohne zu scrollen erreicht werden können, zu laden und darzustellen [Gooa]. Damit die Nutzer so schnell wie möglich mit der Webseite interagieren können [Gooa].
Für mobile Endgeräte ist dies, aufgrund der geringeren Netzwerkgeschwindigkeit, ein entscheidender Faktor, mit dem sich die vom Nutzer wahrgenommene Ladezeit bewerten lässt [Ber15]. Aus Sicht der User Experience ist die AFT ein wichtigeres Kriterium zur Bewertung als die Page Load Time [Ber15]. Durch die Auslieferung der sichtbaren Inhalte wird bei dem Nutzer der Eindruck erweckt, dass die Webseite komplett geladen ist. Ein verzögertes Nachladen nicht sichtbarer Inhalte nimmt er hingegen nicht wahr.
