Die 3. Google Analytics Konferenz D-A-CH fand vom 7. bis 9. Oktober 2013 im Schloß Schönbrunn in Wien statt. International renommierte Webanalyse-Experten präsentierten an drei Tagen aktuelle Themen rund um Google Analytics. Alle weiteren Veranstaltungen, e-Books und Informationen rund um Webanalyse, Conversion-Optimierung und Search sind auf http://www.e-dialog.at zu finden.

1. 22.10.2013
Speed Analyse & Optimierung
Alexander Knett / e-dialog
Über mich
• 15 Jahren Erfahrung im
Online Business
• Seit 2 Jahren als Senior
Web-Consultant bei e-dialog
• Schwerpunkte
– Conversion-Optimierung
– Landingpage-Optimierung
– Sitespeed-Improvement
– Frontend Design
1

2. 22.10.2013
Agenda
 Warum Sitespeed wichtig ist
Was wird gemessen, Konfiguration, Reports
Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
Fragen & Antworten
Zahlen und Fakten
JEDE SEKUNDE ZÄHLT
2

3. 22.10.2013
1 Sekunde Verzögerung* bedeutet
↓7%
Conversions
↓16%
↓11%
Pageviews
KundenZufriedenheit
Eine Commerce Website, die im Schnitt pro Tag €75.000 umsetzt
kann einen Verlust von bis zu €1,8 Million pro Jahr verzeichnen.
Quelle: gomez.com, akamai.com, strangeloopnetworks.com
* bei mehr als 3 Sekunden Ladezeit
Die Ansprüche Ihrer Besucher steigen
Shopping Site Besucher
47%
79%
40%
47% der Besucher
erwarten, dass die
Seite in rund
2 Sekunden geladen
ist
40% der Besucher
verlassen eine
Website, wenn diese
länger als 3-4
Sekunden lädt
79% der Besucher die
mit dem Speed der
Website unzufrieden
sind, werden
wahrscheinlich nicht
mehr kaufen
Quelle: gomez.com, akamai.com, strangeloopnetworks.com
3

4. 22.10.2013
Die Ansprüche Ihrer Besucher steigen
Shopping Site Besucher
52%
44%
52% der Besucher
geben an, dass die
Ladezeit wichtig ist,
ob Sie wieder bei
einer Site einkaufen
16%
44% würden Ihren
Freunden über ein
„schlechtes“
Einkaufserlebnis
berichten
Eine Ladezeit von
mehr als 3-4
Sekunden senkt die
Zufriedenheit des
Kunden um 16%
Quelle: gomez.com, akamai.com, strangeloopnetworks.com
Höhere Komplexität der Seiten
1995
Seitengröße
Objekte
2010
2013
14,1kb
498kb
1095kb
3
75
91
Quelle: strangeloopnetworks.com, radware.com
4

5. 22.10.2013
Ladezeiten steigen immer mehr
Top 500 Commerce Sites

9
13,7%
8
7
6
5
4
7,65
7,36
6,79
3
7,72
2
3
1
0
Durchschnittliche Ladezeit in Sekunden / Chrome / Erstbesucher
Ideal <3s
Frühling 2012
Herbst 2012
Frühling 2013
Sommer 2013
Quelle: radware.com
Ein Ranking- (SEO) & Qualitätsfaktor (SEA)
• Seit 2009/2010 einer von vielen SEO Faktoren
• Google definiert schnelle Sites mit einer Ladezeit von
1,5 bis 2 Sekunden ;-) ( ja, die sind Optimisten)
• Keine klare Aussage wie das Ranking beeinflusst wird
(wie bei allen anderen Faktoren)
• Fix: Schlechte Ladezeiten über einen langen Zeitraum
wirken sich negativ auf SEO Ranking & AdWords QF aus
Ehemals in den
Webmaster
Tools jetzt nur
mehr in Google
Analytics
Quelle: http://googlewebmastercentral-de.blogspot.de/2009/12/anzeige-der-website-performance-in-den.html
5

6. 22.10.2013
Zusammengefasst
Sitespeed wirkt sich aus auf
Eine gute Ladezeit verbessert
• Die User-Experience: BounceRate & Engagement-Rate
• SEO: Google wertet langsame
Sites zunehmend ab  TrafficVerlust
• den Qualitätsfaktor bei
AdWords-Kampagnen und
beeinflusst damit die
Klickpreise
• die Anzahl der Conversions
• Das Ranking Ihrer Seite
• kann den organischen
Traffic erhöhen
• die Nutzungsdauer und Tiefe
• die Klickpreise verringern
• den Umsatz  mehr
Conversions / Abschlüsse
SPEED MATTERS!
6

7. 22.10.2013
Agenda
 Warum Sitespeed wichtig ist
 Was wird gemessen, Konfiguration, Reports
Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
Fragen & Antworten
Welche Aspekte der Latenz werden erfasst
WAS WIRD GEMESSEN
7

8. 22.10.2013
Die eigentliche Ladezeit der Seite
•
•
•
•
•
•
Durchschnittliche Seitenladezeit
Durchschnittliche Dauer der Weiterleitungen
Durchschnittliche Domain-Suchzeit
Durchschnittliche Server Verbindungszeit
Durchschnittliche Server Antwortzeit
Durchschnittliche Seiten Downloadzeit
Standard, keine Konfiguration nötig
DOM Timings
Wie lange der Browser benötigt, um das
Dokument zu analysieren und für
Nutzerinteraktionen zur Verfügung zu stellen
• Durchschnittliche Dokument-Interaktivitätszeit
• Durchschnittliche Dokumentinhalt-Ladezeit
Standard, keine Konfiguration nötig
8

9. 22.10.2013
Nutzer Timings
Die Ausführungsgeschwindigkeit oder Ladezeit von
Ereignisse oder Nutzerinteraktionen, die Sie
erfassen möchten z.B.
-
Ladegeschwindigkeit von Bildern
Ausführungszeit von JavaScript
Reaktionsdauer von Klicks
Usw.
Kein Standard!
Muss selbst implementiert werden!
KONFIGURATION
9

10. 22.10.2013
Was wird benötigt
Google Analytics Basiscode
Standard oder Universal
…. fertig 
Wie erfolgt die Messung
In Browsern, welche die Navigation
Timing Schnittstelle unterstützt
In Browsern, welche die Google Toolbar
installiert haben
•
•
•
•
•
• Für frühere Versionen des
Internet Explorers
Google Chrome
Firefox 7 & höher
Internet Explorer 9 & höher
Browser von Android >= 4.0
Achtung Safari leider nicht!
mobiler Traffic von iOS!
Details:
http://caniuse.com/nav-timing
10

11. 22.10.2013
Wie viele Samples werden erfasst
Standardmäßig besteht die Datensammlung, mit
der die Messwerte für das Seitentiming ermittelt
werden, immer aus
1%
der Besucher Ihrer Website.
Wenige Besucher  Wenige Samples!
11

12. 22.10.2013
Sampling Rate anpassen
• Standard Analytics
_gaq.push(['_setSiteSpeedSampleRate', 5]);
_gaq.push(['_trackPageview']);
• Universal Analytics
ga('create', 'UA-XXXXX-Y', {
'cookieDomain': 'xxxxxx.com',
'siteSpeedSampleRate': 100
});
…
ga('send', 'pageview');
Einbindung immer vor trackPageview oder ga(send)
Hinweis: Für Websites mit mehr als 1 Mio. Hits ist keine Erhöhung der Rate möglich!
Sampling Rate angepasst
• Vor der Anpassung
• Nach der Anpassung
12

13. 22.10.2013
Nutzer Timings
• Die eigentliche Messung muss selbst
implementiert werden
• Die Messwerte können dann ähnlich einem
Event übergeben werden
• Methoden
– _gaq.push([‚_trackTiming‘….];
– ga('send', 'timing', …)
_trackTiming
• category
Kategoriename, z.B. Javascript
• variable
Name der Variablen, z.B. CallBack_Timeout
• time
Lade/Ausführungszeit in ms
• opt_label
Zusätzliche Information zur Kategoresierung
• opt_sampleRate
Anzahl wie viel % der Messungen aufgezeichnet
werden. Standard ist die gleiche Rate die auch für
Sitespeed verwendet wird (1%)
13

14. 22.10.2013
ga('send', 'timing');
• timingCategory
Kategoriename, z.B. Javascript
• timingVar
Name der Variablen, z.B. CallBack_Timeout
• timingValue
Lade/Ausführungszeit in ms
• timingLabel
Zusätzliche Information zur Kategorisierung
Implementierung Nutzer Timings
var startTime = new Date().getTime();
setTimeout(myCallback, 200);
function myCallback(event) {
var endTime = new Date().getTime();
var timeSpent = endTime - startTime;
_gaq.push(['_trackTiming', ‚Javascript', 'callback_timeout',
timeSpent, 'animation']);
ga('send', 'timing', ‚Javascript', timeSpent, 'animation');
}
14

15. 22.10.2013
WICHTIGE REPORTS
Einstieg
Verhalten > Website-Geschwindigkeit > Übersicht
15

16. 22.10.2013
Übersichten Browser / Land
Warum
YaBrowser?
IE ist schneller als
Chrome?
Dies ist eine .at Site die
in DE gehostet wird.
Warum sind alle
anderen Länder
schneller?
Übersicht Seite
Extrem schnelle
Ladezeiten kann
das sein?
16

17. 22.10.2013
Übersichten lügen nicht, oder doch?
• YA Browser?
• IE ist schneller als Chrome?
– Ja, weil die Website eine Animation auf der
Startseite verwendet, welche der IE nicht darstellt
und die Seite somit schneller gerendert ist. Da die
Startseite die meisten Samples hat fällt dies bei
der Bewertung stark ins Gewicht
Übersichten lügen nicht, oder doch?
• Andere Ländern sind schneller als AT/DE?
• Seiten laden extrem schnell
17

18. 22.10.2013
Nein, Sie wissen es nur nicht besser, daher …
• Achten Sie immer auf die Anzahl der Samples
• Zweistellige Anzahl an Samples sind nicht
aussagekräftig, je mehr um so besser
• Ein einzelnes extrem schlechtes Sample ist
genauso nicht signifikant wie ein extrem gutes
• Und selbst wenn die Anzahl passt hinterfragen
Sie immer die Werte (Bsp. IE / Chrome)
• Analytics zeigt Ihnen nicht alles!
Seiten-Timings Explorer / Website-Nutzung
Schnelle
Übersicht der
Performance
Ihrer Top
Seiten
18

19. 22.10.2013
Seiten-Timings Explorer / Website-Nutzung nach Browser
Die Website ist
nicht für Mobile
optimiert!
Seiten-Timings Explorer / Technische Info.
Diese Werte
helfen um
Probleme im Netz
zu identifizieren
19

20. 22.10.2013
Seiten-Timings Explorer / Dom-Timings
Hohe Werte
zeigen Probleme
beim Rendern des
DOMs
Hohe Werte
zeigen Probleme
beim Ausführen /
Parsen von JS
Seiten-Timings Explorer / Dom-Timings
IE interpretiert das
DOM schneller,
weil er die
Animation nicht
berücksichtigt
Safari ist am
schnellsten ;-)
Wird von GA nicht
erfasst
20

21. 22.10.2013
Seiten-Timings Verteilung / Seitenladezeit
Im Bereich 3 bis 7
Sekunden gibt es
Optimierungsbedarf
Fast 19%
Besser als die
Standard
Seiten-Timing
Ansicht
Zeigt Schnell, ob
man Probleme hat
Seiten Timings Karten Overlay / Technische Info
Schafft einen schnellen Überblick, ob es
(Netzwerk) Probleme aus einem Land gibt.
Ansicht „Technische Info“
21

22. 22.10.2013
Empfehlungen zur schnellen Anzeige einer Website
Überprüft die
Seiten nach
PageSpeed Insights
Best Practice
https://developers.google.com/speed/pagespeed/insights/
Empfehlungen Desktop
22

23. 22.10.2013
Empfehlungen Mobile
Nutzer-Timings
Gerne im F & A Teil
23

24. 22.10.2013
WEITER MÖGLICHKEITEN
Dashboards nutzen
https://www.google.com/analytics/web/permalink?uid=2AmqTj65QyybBdMCpVnmIQ
24

25. 22.10.2013
Schneller & einfacher Überblick
•
•
•
•
•
•
•
•
•
•
Durchschnittliche Ladezeit
Durchschnittliche Server Antwortzeit
Durchschnittliche Server Antwortzeit nach Land
Durchschnittliche Domain Lookup Zeit
Durchschnittliche Domain Lookup Zeit nach Land
Besucher Caching Info (New vs Returning)
Weiterleitungszeit nach Land
Durchschnittliche mobile Seitenladezeit
Ladezeit nach Browser
Ladezeit der Top-Seiten
Alerts einrichten
25

26. 22.10.2013
Agenda
 Warum Sitespeed wichtig ist
 Was wird gemessen, Konfiguration, Reports
 Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
Fragen & Antworten
Stärken
+
•
•
•
•
•
•
•
•
It‘s free ;-)
Funktioniert „Out of the Box“
Integriert sich nahtlos in GA
Schnelle Identifizierung von
Problemen
Erfasst Mobile & Desktop
Auswertung nach Browsern inkl.
Versionen
Geografische Auswertung
Erweiterung über Nutzer-Timings
möglich
26

27. 22.10.2013
Schwächen
-
• Sampling Rate
• Keine gezielte Überwachung von Seiten
möglich
• Aggregierte Daten
• kein Snapshot zum Zeitpunkt wenn das
Problem auftritt
• Keine „Waterfall“ Charts
• Keine Auswertung der Ressourcen (Bilder,
JS, usw.) möglich
• Keine Aussage was der Benutzer „Above
the fold“ schon sieht
• Nur Tagesbasis (keine Std/Min/Sek)
• Kein Export der Rohdaten
Case: eCommerce Site
Die Site hatte
immer in den
ersten 15
Sekunden einer
Minute „Hänger“
27

28. 22.10.2013
Agenda
 Warum Sitespeed wichtig ist
 Was wird gemessen, Konfiguration, Reports
 Stärken & Schwächen
 Weitere Tools für die Analyse
Optimierungsmöglichkeiten
Fragen & Antworten
Google PageSpeed Insights
• Analysiert Seiten auf Basis von Best Practice
• Bewertet einzelne Seiten mit einem Score >
einfache Vergleichbarkeit
• Direkte Empfehlungen für Verbesserungen
• Gibt es auch als Plugin für Chrome
• Hat eine API um Analysen zu automatisieren
• …. und es ist gratis
https://developers.google.com/speed/pagespeed/insights/
28

29. 22.10.2013
GTmetrix
• Bietet die gleichen Empfehlungen wie GPSI
• Zusätzlich bewertet es die Seiten noch nach
Yahoo Yslow
• Zeichnet Waterfall Charts auf
• Besitzt eine API um Analysen zu
automatisieren
• Berichte lassen sich automatisieren
(Gratis Registrierung nötig)
http://gtmetrix.com/
Uptrends
•
•
•
•
•
•
•
Langzeit Überwachung
Intervall bis zu einer Minute
Real Browser Monitoring
Waterfall Charts
Über 100 Messpunkte weltweit
Rohdaten können exportiert werden
Kostenpflichtig
http://www.uptrends.com/
29

30. 22.10.2013
Yottaa
• Bietet die gleichen Features wie Uptrends
• Hat leider weniger Messpunkte 
• Bietet dafür
– Auswertung der Ressourcen Größe, Domain, Art
– Page Load Visualisierung (inkl. Video)
– Testen von Mobile Experience
• Kostenpflichtig
http://www.yottaa.com/
Agenda
 Warum Sitespeed wichtig ist
 Was wird gemessen, Konfiguration, Reports
 Stärken & Schwächen
 Weitere Tools für die Analyse
 Optimierungsmöglichkeiten
Fragen & Antworten
30

31. 22.10.2013
Domains
Bilder
Server
CSS
Website
Ressourcen
JS
Bilder
•
•
•
•
•
Komprimieren Sie Ihre Bilder
Keine HTML Skalierung
Angabe von Höhe und Breite im IMG Tag
Vermeiden Sie Image Filter
Verwenden Sie CSS Sprites
31

32. 22.10.2013
JavaScript
• Vermeiden Sie document.write
• Referenzieren Sie JS Dateien immer am Ende
der Seite (wenn technisch möglich)
• Komprimieren und aggregieren Sie die
Dateien
• Wenn Sie externe Plugins (Banner, Social)
einsetzen, verwenden Sie wenn möglich
asynchrone Varianten
• Verwenden von (cacheable) GET für AJAX
Requests
CSS
• Nutzen von effizienten CSS Selektoren
• Entfernen Sie unnütze CSS Anweisungen
• Laden Sie Stylesheets immer vor allen
referenzierten JS Dateien
• Hinterlegen Sie CSS Anweisungen im Head
• Vermeiden sie @import
• Komprimieren und aggregieren Sie Stylesheets
• Vermeiden Sie CSS Expressions
32

33. 22.10.2013
Ressourcen
• Verwenden Sie „Cookieless“ Domains
• Verteilen Sie Ressourcen auf mehrere Hosts
um Browser Blocking zu vermeiden
(Subdomains, oder CDN)
• Reduzieren Sie die Anzahl der DOM Elemente
• Entfernen Sie Querstrings von Ressourcen
• Reduzieren Sie die Request-Größe
• Eindeutige URLs für Ressourcen verwenden
• Reduzieren Sie Redirects, DNS Lookups
Server
•
•
•
•
Aktivieren Sie den GZIP Kompression
Aktivieren Sie Keep Alive
Browser Caching nutzen (Lifetime)
Überprüfen Sie die ETAG Konfiguration
(besser ausschalten als falsch konfiguriert!)
33

34. 22.10.2013
Was sind die Top 3 „Killer“ für Speed
Die Top 3 „Killer“
Browser
Blocking
KEIN
GZIP oder
KEEP ALIVE
Externe
JS Plugins
ADS / SOCIAL
Zumindest unserer Erfahrung nach …..
34

35. 22.10.2013
Ein Beispiel
• Der Standard ohne
extern eingebundene
Werbe-Banner
• Halbierung der
durchschnittlichen
Gesamtladezeit
1,43s
Agenda
 Warum Sitespeed wichtig ist
 Was wird gemessen, Konfiguration, Reports
 Stärken & Schwächen
 Weitere Tools für die Analyse
 Optimierungsmöglichkeiten
 Fragen & Antworten
35

36. 22.10.2013
Vielen Dank!
Fragen & Antworten
36