David Hefendehl - Manager eCommerce Group der netzkern AG
Head of Online Marketing

Gezielte Ladezeiten Optimierung mit Hilfe von User Timings in Google Analytics


Teil unserer Arbeit im Online Marketing bei netzkern ist es auch, Seiten auf Trab zu bringen. Oftmals liegen aber keine oder nur ungenügende Zahlen hierzu vor. Google Analytics bietet uns aber eine Möglichkeit, relativ genau herauszubekommen wo es hakt, wenn die Seite gefühlt langsam ist. 

User timings in Google Analytics

User Timings erlauben es, in Google Analytics die Ladezeit einzelner Ressourcen zu messen. Jeder kennt ja Kundenanrufe wie:  „Unsere Seite ist so langsam, wenn wir die hier im Büro laden“ und die typische Antwort darauf: „Works on my machine“. 
Da beides nicht zielführend ist, nehmen wir als Data-Driven Online Markting Team bei netzkern, gerne Zahlen die aus der realen Welt kommen und nicht vom Schreibtisch des CEO oder des Lead Entwicklers. 


[Technische Ansicht der Page Speed Messungen, einer groben Übersicht der Ladezeiten]

Abgesehen von den normalen Site Speed Messungen, bietet Analytics seit einiger Zeit sog. „User Timings“ an. Diese erlauben ein wesentlich granulareres Messen der Ladezeiten. Jede Millisekunde Ladezeit zählt, um den Benutzer von der Qualität und letztendlich auch dem Image der von ihm besuchten Website zu überzeugen.
Hierzu muss man wissen, dass die meisten Browser ohne Eingreifen des Nutzers sechs Verbindungen pro Server gleichzeitig aufbauen. Bis diese abgearbeitet sind, kommen erst mal keine weiteren Anfragen durch und warten schlicht. Je mehr Dateien angefordert werden, desto länger dauert es, bis die Seite funktionsfähig ist.


[Erst wenn die beiden Dateien in (1) und (2) fertig geladen sind, können die Dateien unter (3) und (4) geladen werden. Grau markiert das sog. „Blocking“]

Oftmals werden zig Tracking Pixel, JavaScripte und CSS Dateien auf einer Seite geladen. Startseiten sollten nach Möglichkeit in unter zwei Sekunden funktionsfähig sein. Andernfalls wird die Seite als langsam empfunden. Nach den üblichen Optimierungsmaßnahmen, jQuery aus dem Google CDN laden, mini-fying der eigenen CSS Dateien etc., sollten qualitative Messungen erfolgen, ob diese einen Geschwindigkeitsvorteil gebracht haben oder nicht.
Hier kommen nun die „User Timings“ ins Spiel, die idealerweise natürlich von vorneherein erfasst wurden, um auch wirklich zu zeigen, dass es schneller geworden ist. User Timings zu messen, wird erst mal keinen Geschwindigkeitsvorteil bringen, aber es liefert Hinweise darauf, welche Dateien oder welche Verbindungen überlastet sind.
User Timings erlauben es, einzelne Skripte oder CSS Dateien zu gruppieren. In diesem Beispiel habe ich CSS und JavaScript Dateien gruppiert, zusätzlich eine Unterscheidung nach lokalen Skripten und Skripten aus dem CDN erstellt.

User Timings nach Kategorie
[Die weitere Aufschlüsselung gibt dann Hinweise darauf, wo es bei einer Seite hakt.]


Bei netzkern setzen wir so etwas natürlich gerne mit dem Google Tag Manager um. Da dies aber insgesamt eine sehr spezielle Programmierung benötigt (danke Matthias Bruch) kommen wir nicht um einige Code Changes herum.


Zunächst einmal müssen Funktionen für das asynchrone Laden von JavaScripts und CSS Dateien programmiert werden. Hier gilt es, einige Stolperfallen zu beachten, was das unterschiedliche Verhalten der Browser bei DOM-Insertations und die Statusmeldungen bzw. wann diese erfolgen, angeht.

loadByJs('//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', function(startTime) { TrackTiming('js', startTime, 'JS-Lib', 'jQuery', 'Google CDN'); }, 'js');

Dies ist der Aufruf und die CallBack Funktion, die das Ganze ins Rollen bringt. Hier werden auch die Werte für das spätere Tracking eingebaut. „Js-Lib“ als Gruppe für alle JavaScript Libraries.“jQuery“ ist die spezielle Library, die hier geladen wird und „Google CDN“ stellt später den Ort dar.

function loadByJs(url, callback, type) {
var startTime = new Date().getTime();
var done = false;
var head = document.getElementsByTagName( 'head' )[0], // reference to document.head for appending/ removing link nodes
switch (type)
{
case 'js':
var js = document.createElement('script');
js.async = true;
js.src = url;
js.onload = js.onreadystatechange = function() { //(2)
if ( done !=true && (!js.readyState || js.readyState === "loaded" || js.readyState === "complete") ) { // handle X-Browser, especially IE8
done = true;
callback(startTime);
// Handle memory leak in IE
js.onload = js.onreadystatechange = null;
if ( head && js.parentNode ) {
head.removeChild( js );
}
}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(js, s);
break;
case 'css': //(1)
link = document.createElement( 'link' ); // create the link node
link.setAttribute( 'href', url );
link.setAttribute( 'rel', 'stylesheet' );
link.setAttribute( 'type', 'text/css' );
var sheet, cssRules;
// get the correct properties to check for depending on the browser
if ( 'sheet' in link ) {
sheet = 'sheet'; cssRules = 'cssRules';
}
else {
sheet = 'styleSheet'; cssRules = 'rules';
}
var interval_id = setInterval(function() {
try {
if ( link[sheet] && link[sheet][cssRules].length ) {
clearInterval( interval_id );
callback(startTime);
}
} catch( e ) {} finally {}
}, 2 );
// insert the link node into the DOM and start loading the style sheet
head.appendChild( link );
break;
default:
alert('You are trying to load something I don\'t know of!');
}
}


Sobald diese Hürden umschifft sind, kann man das Ganze mit einem entsprechenden End-Zeitstempel versehen und an den Google Tag Manager schicken.

var dataLayer = [];
function TrackTiming(type, startTime, category, variable, opt_label) {
dataLayer.push({
timeCategory : category,
timeVariable: variable,
timeTime: new Date().getTime() - startTime,
timeLable: opt_label,
timeSamplerate: 100, // reduce depending on traffic, 100 is for testing only
event: 'trackTime'
})
 

Auch hier gilt zu beachten, dass eine einfache Regel „fire on all pages“ nicht ausreicht. Firefox scheint den dataLayer.push() gerne zu ignorieren und muss ein „event:‘trackTime‘ mitgegeben bekommen. In Google Tag Manager sieht das Ganze dann so aus:

dataLayer auslesen und Regeln setzen in GTM für User Timings

Die Daten in Google Analytics kann man dann entsprechend analysieren und wertvolle Entwicklerzeit auf die Optimierung spezieller Ressourcen verwenden.

Welche CSS Datei lädt wie lange

Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar