Browser-Werkzeuge und Erweiterungen

Mod­erne Brows­er bieten mit ihren inte­gri­erten Entwick­ler-Tools Analy­semöglichkeit­en für die Per­for­manceop­ti­mierung. Mit diesen Werkzeu­gen lassen sich Web­seit­en bei der Erstel­lung client­seit­ig analysieren und im Hin­blick auf die Ladezeit opti­mieren. Dazu wird eine Webkon­sole bere­it­gestellt, die eine direk­te Manip­u­la­tion der Web­seite in dem Brows­er ermöglicht [KR13]. Des Weit­eren wird der Net­zw­erkverkehr pro­tokol­liert und in Form eines Wasser­fall­dia­gramms visuell auf­bere­it­et (siehe Abbil­dung 2.4).

Abbil­dung 2.4: Net­work-Über­sicht in den Entwick­ler-Tools von Google Chrome

Google Chrome

Die Entwick­ler-Tools wer­den von den Brows­er-Her­stellern unter­schiedlich beze­ich­net und lassen sich entwed­er in den Ein­stel­lun­gen des jew­eili­gen Browsers oder über eine Tas­tenkom­bi­na­tion aktivieren. In dieser Arbeit wird Google Chrome in der Ver­sion 46 ver­wen­det. Die Aktivierung der Entwick­ler-Tools erfol­gt dort über das Menü unter dem Punkt Anzeigen –> Entwick­ler –> Entwick­ler­tools oder mit­tels der Tas­tenkom­bi­na­tion ALT + CMD + I.

Nach dem Aufruf der Entwick­ler-Tools ste­hen im oberen Bere­ich der Ansicht mehrere Karteire­it­er zur Ver­fü­gung. Für die Per­for­manceop­ti­mierung rel­e­vante Infor­ma­tio­nen sind unter den Reit­ern Net­work und Audits zu find­en. In Abbil­dung 2.4 wird der Ablauf bei dem Laden ein­er Web­seite als Wasser­fall­dia­gramm in der Net­work-Ansicht dargestellt. Die Fußzeile der Entwick­ler-Tools gibt Auskun­ft über die Anzahl der HTTP-Anfra­gen, das über­tra­gene Daten­vol­u­men und die benötigte Ladezeit.

Mitte 2015 wurde eine Film­streifen-Ansicht einge­führt. Diese zeigt den Fortschritt der visuellen Darstel­lung beim Lade­vor­gang an und wird mit Hil­fe der Tas­tenkom­bi­na­tion CMD + R ges­tartet. In dieser Ansicht lassen sich darüber hin­aus die HTTP-Head­er der einzel­nen Ressourcen analysieren (siehe Abbil­dung 2.5). Beachtet wer­den sollte, dass die Über­tra­gung der Dat­en per GZIP kom­prim­iert erfol­gt und die Funk­tion Keep-Alive eine beste­hende Verbindung offen hält. Somit lässt sich ein erneuter Verbindungsauf­bau, während des Ladens der einzel­nen Ressourcen von der gle­ichen URL, ver­mei­den. Anhand dieser Über­sicht kön­nen außer­dem ergänzende Infor­ma­tio­nen zum Brows­er-Caching angezeigt und aus­gew­ertet wer­den.

Abbil­dung 2.5: Ansicht des Head­ers ein­er über­tra­ge­nen Ressource

Über den Reit­er Audits lassen sich Infor­ma­tio­nen zu Verbesserungspo­ten­tialen anzeigen (siehe Abbil­dung 2.6). Des Weit­eren wer­den, nach einem Klick auf den Pfeil in der Auflis­tung, Hin­weise zur Umset­zung der einzel­nen Verbesserun­gen angegeben.

Abbil­dung 2.6: Audit-Über­sicht mit Infor­ma­tio­nen zu Verbesserungspo­ten­tialen

Die Entwick­ler-Tools in Google Chrome ermöglichen die Auswahl ver­schieden­er Endgeräte und Net­zw­erkverbindun­gen, um das Laden und die Darstel­lung der Web­seite mit unter­schiedlichen Kon­stel­la­tio­nen zu testen, beispiel­sweise bei dem Abruf über mobile Daten­net­zw­erke mit ver­schiede­nen Round Trip Times, wie in Abbil­dung 2.7 gezeigt.

Abbil­dung 2.7: Auswahl eines Endgerätes und der Net­zw­erkverbindung in den Entwick­ler-Tools

YSLOW

Neben den bere­its inte­gri­erten Entwick­ler-Tools der Brows­er existiert mit YSLOW eine Brows­er-Erweiterung zur Per­for­manceop­ti­mierung. YSLOW wurde von Yahoo! entwick­elt und basiert auf einem Regel­w­erk von Kri­te­rien, die für schnelle Web­sites gel­ten [Sou07]. Die Ein­hal­tung dieser Kri­te­rien wird geprüft und anschließend eine Bew­er­tung, anhand der Noten A bis F, mit konkreten Hand­lungsempfehlun­gen zur Verbesserung der Web­seite aus­gegeben (siehe Abbil­dung 2.8).

Abbil­dung 2.8: Bew­er­tung ein­er Web­seite mit Hand­lungsempfehlun­gen durch YSLOW

In ein­er weit­eren Über­sicht wer­den die gelade­nen Ressourcen von YSLOW zusam­menge­fasst und eine sta­tis­tis­che Über­sicht gezeigt, in der die Anzahl der Anfra­gen und das Daten­vol­u­men bei dem Abruf der Web­seite aus­gew­ertet wer­den (siehe Abbil­dung 2.9).

Abbil­dung 2.9: Sta­tis­tis­che Über­sicht der gelade­nen Ressourcen ohne und mit Brows­er-Caching

PageSpeed Insights

Google bietet mit Page­Speed Insights eine ähn­liche Web-Anwen­dung, mit der eine Bew­er­tung anhand der von Google als rel­e­vant erachteten Kri­te­rien für schnelle Web­seit­en erfol­gt. Auf Basis von 0 bis 100 Punk­ten wird ein Page­Speed Score gebildet.

Page­Speed Insights berück­sichtigt, im Gegen­satz zu YSLOW, die Opti­mierung der Darstel­lung auf mobilen Endgeräten und vergibt, zusät­zlich zu der in Abbil­dung 2.10 gezeigten Bew­er­tung für die Desk­top-Ansicht, eine Bew­er­tung mit Verbesserungsvorschlä­gen für die Ansicht und Nutzer­erfahrung auf den mobilen Endgeräten (siehe Abbil­dung 2.11).

Abbil­dung 2.10: Bew­er­tung und Hand­lungsempfehlun­gen durch Google Page­Speed Insights

Zur Bew­er­tung wer­den von Page­Speed Insights, neben der Page Load Time, auch die HTML-Struk­tur, die Ver­wen­dung und Kom­pres­sion von Bildern sowie einge­set­zte externe Ressourcen, wie Cas­cad­ing Style Sheets und JavaScript-Dateien, herange­zo­gen [Gooc]. Ein­fluss auf die Bew­er­tung hat darüber hin­aus die Above the Fold Time (AFT). Hier­bei han­delt es sich um die erforder­liche Zeit, alle Inhalte in dem sicht­baren Bere­ich, die ohne zu scrollen erre­icht wer­den kön­nen, zu laden und darzustellen [Gooa]. Damit die Nutzer so schnell wie möglich mit der Web­seite inter­agieren kön­nen [Gooa].

Abbil­dung 2.11: Bew­er­tung der Darstel­lung und Nutzer­erfahrung auf mobilen Endgeräten

Für mobile Endgeräte ist dies, auf­grund der gerin­geren Net­zw­erkgeschwindigkeit, ein entschei­den­der Fak­tor, mit dem sich die vom Nutzer wahrgenommene Ladezeit bew­erten lässt [Ber15]. Aus Sicht der User Expe­ri­ence ist die AFT ein wichtigeres Kri­teri­um zur Bew­er­tung als die Page Load Time [Ber15]. Durch die Aus­liefer­ung der sicht­baren Inhalte wird bei dem Nutzer der Ein­druck erweckt, dass die Web­seite kom­plett geladen ist. Ein verzögertes Nach­laden nicht sicht­bar­er Inhalte nimmt er hinge­gen nicht wahr.