Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Analyse & Optimierung

22.10.2013

1

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

22.10.2013

2

Agenda

Warum Sitespeed wichtig ist

Was wird gemessen, Konfiguration, Reports

Stärken & Schwächen

Weitere Tools für die Analyse

Optimierungsmöglichkeiten

Fragen & Antworten

JEDE SEKUNDE ZÄHLT Zahlen und Fakten

22.10.2013

3

1 Sekunde Verzögerung* bedeutet

↓7% Conversions

↓11% Pageviews

↓16% Kunden-

Zufriedenheit

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

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

Die Ansprüche Ihrer Besucher steigen

47% 40%

79% der Besucher die mit dem Speed der

Website unzufrieden sind, werden

wahrscheinlich nicht mehr kaufen

79%


Shopping Site Besucher

22.10.2013

4

52% der Besucher geben an, dass die Ladezeit wichtig ist, ob Sie wieder bei

einer Site einkaufen

44% würden Ihren Freunden über ein

„schlechtes“ Einkaufserlebnis

berichten

Die Ansprüche Ihrer Besucher steigen

52% 44%

Eine Ladezeit von mehr als 3-4

Sekunden senkt die Zufriedenheit des Kunden um 16%

16%


Shopping Site Besucher

Höhere Komplexität der Seiten

1995 2010 2013

Seitengröße

Objekte

14,1kb

3

498kb

75

1095kb

91

Quelle: strangeloopnetworks.com, radware.com

22.10.2013

5

Ladezeiten steigen immer mehr

3

6,79 7,36 7,65 7,72

0

1

2

3

4

5

6

7

8

9

Durchschnittliche Ladezeit in Sekunden / Chrome / Erstbesucher

Top 500 Commerce Sites

Ideal <3s Frühling 2012 Herbst 2012 Frühling 2013 Sommer 2013

Quelle: radware.com

13,7%

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

Quelle: http://googlewebmastercentral-de.blogspot.de/2009/12/anzeige-der-website-performance-in-den.html

Ehemals in den

Webmaster Tools jetzt nur

mehr in Google Analytics

22.10.2013

6

Zusammengefasst

Sitespeed wirkt sich aus auf

• Die User-Experience: Bounce-Rate & Engagement-Rate

• SEO: Google wertet langsame Sites zunehmend ab Traffic-Verlust

• den Qualitätsfaktor bei AdWords-Kampagnen und beeinflusst damit die Klickpreise

• die Anzahl der Conversions

Eine gute Ladezeit verbessert

• 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!

22.10.2013

7

Agenda






Fragen & Antworten

WAS WIRD GEMESSEN Welche Aspekte der Latenz werden erfasst

22.10.2013

8

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

22.10.2013

9

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

22.10.2013

10

Was wird benötigt

Google Analytics Basiscode

Standard oder Universal

…. fertig

Wie erfolgt die Messung

In Browsern, welche die Navigation Timing Schnittstelle unterstützt

• Google Chrome

• Firefox 7 & höher

• Internet Explorer 9 & höher

• Browser von Android >= 4.0

• Achtung Safari leider nicht! mobiler Traffic von iOS!

In Browsern, welche die Google Toolbar installiert haben

• Für frühere Versionen des Internet Explorers

Details: http://caniuse.com/nav-timing

22.10.2013

11

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!

22.10.2013

12

Sampling Rate anpassen

• Standard Analytics

• Universal Analytics ga('create', 'UA-XXXXX-Y', {

'cookieDomain': 'xxxxxx.com',

'siteSpeedSampleRate': 100

});

…

ga('send', 'pageview');

_gaq.push(['_setSiteSpeedSampleRate', 5]);

_gaq.push(['_trackPageview']);

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

22.10.2013

13

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%)

22.10.2013

14

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');

}

22.10.2013

15

WICHTIGE REPORTS

Einstieg Verhalten > Website-Geschwindigkeit > Übersicht

22.10.2013

16

Ü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?

22.10.2013

17

Ü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

22.10.2013

18

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

22.10.2013

19

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

22.10.2013

20

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

22.10.2013

21

Seiten-Timings Verteilung / Seitenladezeit

Besser als die

Standard Seiten-Timing

Ansicht

Zeigt Schnell, ob man Probleme hat Im Bereich 3 bis 7

Sekunden gibt es Optimierungsbedarf

Fast 19%

Seiten Timings Karten Overlay / Technische Info

Schafft einen schnellen Überblick, ob es

(Netzwerk) Probleme aus einem Land gibt. Ansicht „Technische Info“

22.10.2013

22

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.10.2013

23

Empfehlungen Mobile

Nutzer-Timings

Gerne im F & A Teil

22.10.2013

24

WEITER MÖGLICHKEITEN

Dashboards nutzen https://www.google.com/analytics/web/permalink?uid=2AmqTj65QyybBdMCpVnmIQ

22.10.2013

25

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

22.10.2013

26

Agenda






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

+

22.10.2013

27

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“

22.10.2013

28

Agenda






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/

22.10.2013

29

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/

22.10.2013

30

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






Fragen & Antworten

22.10.2013

31

Domains

Website

Bilder

CSS

JS Ressourcen

Server

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

22.10.2013

32

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

22.10.2013

33

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!)

22.10.2013

34

Was sind die Top 3 „Killer“ für Speed

Browser Blocking

KEIN GZIP oder

KEEP ALIVE

Externe JS Plugins

ADS / SOCIAL

Die Top 3 „Killer“

Zumindest unserer Erfahrung nach …..

22.10.2013

35

Ein Beispiel

• Der Standard ohne extern eingebundene Werbe-Banner

• Halbierung der durchschnittlichen Gesamtladezeit

1,43s

Agenda






Fragen & Antworten

22.10.2013

36

Vielen Dank! Fragen & Antworten

Marketing

Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Analyse & Optimierung