RUM: Technischer Einsatz im Web

Die JavaScript Umgebung bietet seit ein paar Jahren verschiedene Möglichkeiten um so genannte Timings des Enduser zu erfassen. Timings sind eine Art Stoppuhren, um die Dauer einer bestimmten Aktion oder eines Prozesses zu erfassen. Dabei ist zu aller erst das Navigation Timing zu nennen, welches die Zeiten zwischen verschiedenen Surf/Klick Aktionen (also Navigation) des Enduser misst, z.B. dem Klick auf den Suchen Button (unload / navigationStart Event) bis die komplette Suchergebnisseite geladen ist (load Event). Eine weitere Möglichkeiten ist das Erfassen der Resource Timings, wobei hier Metriken zu den in die Seite integrierten Ressourcen gemessen werden. Unter Ressourcen versteht man Objekte wie Bilder, Skripte, Schriften, CSS, etc. die in die Seite eingebunden sind. Mit den User Timings können dann eigene Stoppuhren in der Webseite gestartet und gestoppt werden, um so z.B. die Laufzeit einer Search-Completion zu messen.

 

Da diese Funktionen noch nicht so allzu lange Teil von JavaScript sind (W3C Recommendation seit Dez. 2012), sind sie in älteren Browsern nicht verfügbar. Einige Hersteller tun sich ebenfalls schwer die Funktionalitäten komplett zu unterstützen, so sind z.B. in allen Apple Browsern die Resource Timings nicht verfügbar. Welche Browser ab welcher Version was unterstützen, kann man sehr gut bei caniuse.com herausfinden.

 

Insbesondere Navigation und Resource Timings bieten mit ihrer Vielzahl an Standardevents viele Möglichkeiten ein Timing zu erfassen. Um genau zu sein, wird hier nicht jedes mal eine eigene Stoppuhr gestartet und gestoppt, sondern wenn ein Event eintritt, wird vom globalen Timer die Zeit genommen und diesem Event zu geordnet. Die Subtraktion zwischen dem gestoppten Zeitpunkt und der Zeit vom Start Event ergibt dann die zeitliche Länge der Aktion.

 

In der Grafik unten erkennt man diese vielen Events des Navigation Timings, die als Standard definiert sind. Die Dauer vom navigationStart bis hin zum loadEventEnd Event entspricht dem Klassiker der Annahme der Ladezeit einer Seite, wie sie allgemein verstanden wird bzw. wurde. Also vom Klick auf einen Link, welches den Start der Navigation zu einer anderen Seiten entspricht, bis hin zum vollständigen Laden aller Objekte dieser neuen Seite. Diese Annahme (Achtung: keine Definition!) stimmt mittlerweile nicht mehr, vieles wird heutzutage asynchron geladen, um die Zeit bis zur Interaktion mit der Seite zu verkürzen. Wie erwähnt ist die Zeit bis zum loadEvent heute nicht mehr das Maß der Dinge, um die Ladezeit einer Webseite zu bestimmt. Viel interessanter ist die Zeit bis der Enduser wirklich mit der Seite interagieren kann, um z.B. etwas in den Warenkorb zu legen. D.h. es ist nicht entscheidend, dass alles geladen ist. Aus technischer Sicht kann der Enduser mit dem Auftretens des domInteractive Events die Seite verwenden, z.B. auf Links klicken. Daher wäre die Zeit von navigationStart bis domInteractive  eine sehr interessante Metrik.

Ein weiteres Beispiel:
Bei vielen Webshops gibt es eine so genannte Browser-Weiche, die erkennt welche Art von Gerät, z.B. Mobile, Tablet, Desktop, die Seite anfragt und eine entsprechende Seite passend für den Screen des Geräts ausliefert. Oft führt diese zu einem oder mehreren Redirects, die alle wertvolle Zeit kosten, während dieser der Enduser keinerlei Aktion sieht, sondern nur warten muss. Bei so einer Architektur kann es sich lohnen das redirectEvent zu erfassen – eventuell auch für einzelne Objekte wie JavaScripts.

 

Zusammenfassung:
Wie man sieht, gibt eine Vielzahl von Möglichkeiten, welche Timings man erfasst. Die Auswahl welche geeignet sind, hängt auch immer davon ab wie die Web-Application verwendet und technisch umgesetzt wird. Es gibt aber ein paar Faustregeln wie das Erfassen von domInteractive, die dabei helfen die Performance und das Verhalten des Endusers besser zu verstehen. Diese Feld bietet viel Raum zu Experimentieren, wie die meisten Bereiche im neuen Medium Web. Der Einsatz und das Verständnis der Faustregeln kann aber schnell zu sehr guten Erfolgen führen, auf die man aufbauen kann.

 

Links:

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.