• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Analyse & Optimierung
 

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

on

  • 286 views

Die 3. Google Analytics Konferenz D-A-CH fand vom 7. bis 9. Oktober 2013 im Schloß Schönbrunn in Wien statt. ...

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.

Statistics

Views

Total Views
286
Views on SlideShare
286
Embed Views
0

Actions

Likes
0
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 22.10.2013 WICHTIGE REPORTS Einstieg Verhalten > Website-Geschwindigkeit > Übersicht 15
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.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
    • 22.10.2013 Empfehlungen Mobile Nutzer-Timings Gerne im F & A Teil 23
    • 22.10.2013 WEITER MÖGLICHKEITEN Dashboards nutzen https://www.google.com/analytics/web/permalink?uid=2AmqTj65QyybBdMCpVnmIQ 24
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 22.10.2013 Vielen Dank! Fragen & Antworten 36