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%
Quelle: gomez.com, akamai.com, strangeloopnetworks.com
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%
Quelle: gomez.com, akamai.com, strangeloopnetworks.com
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
Warum Sitespeed wichtig ist
Was wird gemessen, Konfiguration, Reports
Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
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
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
+
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
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/
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
Warum Sitespeed wichtig ist
Was wird gemessen, Konfiguration, Reports
Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
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
Warum Sitespeed wichtig ist
Was wird gemessen, Konfiguration, Reports
Stärken & Schwächen
Weitere Tools für die Analyse
Optimierungsmöglichkeiten
Fragen & Antworten
22.10.2013
36
Vielen Dank! Fragen & Antworten