Präsentation auf dem 3. Performance-Meetup in Hamburg zum Thema "Web Performance Management für Fortgeschrittene"

1. Web Performance Management
22.05.12
Web Performance Management für Fortgeschrittene
jan.vogel@di-unternehmer.com
Uwe.bessle@iteratec.de

2. WEB PERFORMANCE MANAGEMENT | SEITE 2
Ausgangssituation
„Wir sind zu langsam*!“
*Kunden, Nutzer, Mitarbeiter:  Gomez-Messung: 

3. WEB PERFORMANCE MANAGEMENT | SEITE 3
Relevanz und Einordnung von Performance
User nutzen eine (Web)-Applikation aufgrund ihrer individuellen Features
oder eines Mehrwerts.
Dabei verfolgen sie ein konkretes Ziel innerhalb des Surfprozesses
(Interaktionsziel).
Ladezeit: Hygienefaktor und Differenzierungsmerkmal
Ladezeit darf den Nutzer nicht behindern.
Die Ladezeit unterscheidet uns von Mitbewerbern.

4. WEB PERFORMANCE MANAGEMENT | SEITE 4
Ermittlung Grenzwerte
„Wir sind zu langsam!“

5. WEB PERFORMANCE MANAGEMENT | SEITE 5
Ermittlung Grenzwerte
„Wir sind zu langsam!“
„Wie schnell wollen wir sein?“

6. WEB PERFORMANCE MANAGEMENT | SEITE 6
Analyse bestehender Methoden
Google-Analytics
schlecht
gut
0 1 2 3 4 5 n Ladezeit (s)

7. WEB PERFORMANCE MANAGEMENT | SEITE 7
Analyse bestehender Methoden
Google Suchtrefferseite*
Traffic
-20%
0 0,5 1 1,5 n Ladezeit (s)
http://glinden.blogspot.de/2006/11/marissa-mayer-at-web-20.html

8. WEB PERFORMANCE MANAGEMENT | SEITE 8
Analyse bestehender Methoden
Strangeloop*
http://www.strangeloopnetworks.com/web-performance-infographics/ tml

9. WEB PERFORMANCE MANAGEMENT | SEITE 9
Analyse bestehender Methoden
APDEX*
Zufriedenheit
satisfied
tolerating
frustrating
0 T 4T Ladezeit T
Default target threshold value : T = 4 sec
+ Ableitung eines neutralen Index mit Werten zwischen 0 und
1.
http://apdex.org/index.php/about/

10. WEB PERFORMANCE MANAGEMENT | SEITE 10
Fragestellungen
Welches ist eine geeignete Meßmethode zur Datenerhebung?
Was ist der korrekte Messzeitpunkt?
(Definition Ladezeit?)
Wie ermittelt man Zufriedenheit mit Ladezeit?
Was sind relevante Grenzwerte?

11. WEB PERFORMANCE MANAGEMENT | SEITE 11
Anforderungen an Meßmethode
Realistisch (Nutzerbezogen)
Erfolge nachweisbar
Reproduzierbarkeit
Konstanz und Verlässlichkeit
Tiefgreifende Analysemöglichkeiten

12. WEB PERFORMANCE MANAGEMENT | SEITE 12
Anforderungen an Meßmethode
„Realistisch“?
Synthetische Messung vs. Passive Messung

13. WEB PERFORMANCE MANAGEMENT | SEITE 13
Anforderungen an Meßmethode
„Realistisch“?
Hier: Messung der Zeit für das Ausliefern von Content
Messpunkt G
Messpunkt Server Backbone Last Mile Client Browser Frontend Logik
Einflussfaktoren • Standort • Anbindung • Bandbreite • Hard- und • Hersteller • Codequalität
• Caching • Verbindungsart Software • Version
• CDN (DSL, UMTS, …) Ausstattung
• Auslastung • Allgemeine
• Backend- Performance
Latenzen
• ….
Elementare Einflussfaktoren auf Ladezeit werden nicht
gemessen.

14. WEB PERFORMANCE MANAGEMENT | SEITE 14
Anforderungen an Meßmethode
„Realistisch“?
Soll: Wie performt die Applikation beim Kunden?
Messpunkt G Messpunkt neu
Messpunkt Server Backbone Last Mile Client Browser Frontend Logik
Einflussfaktoren • Standort • Anbindung • Bandbreite • Hard- und • Hersteller • Codequalität
• Caching • Verbindungsart Software • Version
• CDN (DSL, UMTS, …) Ausstattung
• Auslastung • Allgemeine
• Backend- Performance
Latenzen
• ….

15. WEB PERFORMANCE MANAGEMENT | SEITE 15
Datenerhebung mit WebPagetest
Realistisch (Nutzerbezogen)
•echter Browser
•Simulation realistischer Netzwerk-
Anbindung
Private Instances mit individueller
Reproduzierbarkeit Konfiguration
•Konstanz der Messwerte Öffentlich: webpagetest.org
Tiefgreifende Analysemöglichkeiten
Open Source
•an eigene Bedürfnisse anpassbar
•keine nutzungsabhängige Kostenspirale

16. WEB PERFORMANCE MANAGEMENT | SEITE 16
Performance-Messungen mit WebPagetest
Wichtige Eigenschaften:
 Reale PC-Umgebung (Windows XP / Windows 7)
 Echte Browser (IE, FF, Chrome)
 Simulation der Internet-Anbindung (z.B. ISDN, DSL, UMTS)
 Berücksichtigung des Browser-Cache (mit / ohne Cache)
 Berücksichtigung von Cookies, JS, etc.
Relevante KPIs:
 Wann beginnt der Browser mit der Anzeige?: Start Render
 Wann ist die Seite „interaktionsbereit“ geladen?: Document Complete
 Wann sind alle Inhalte (inkl. Nachgeladene) geladen?: Fully Loaded
 Wann sind alle visuellen Inhalte geladen?: Visually Complete
 Keine Verfügbarkeitsmessung
Messzeitpunkt:
Welches ist der für Nutzer relevante Zeitpunkt eines “Seite fertig geladen” Gefühls?

17. WEB PERFORMANCE MANAGEMENT | SEITE 17
Kurzer Tool-Refresh
Bestandteile der WPT-Architektur
Beispiel

18. WEB PERFORMANCE MANAGEMENT | SEITE 18
WPT-Server und WPT-Agenten
Einzelmessungen

19. WEB PERFORMANCE MANAGEMENT | SEITE 19
Zusammenspiel der WPT-Komponenten (1/3)
Steuerung Anzeige
Server-
Komponente
WebPageTest
Jobs Ergebnisse
Agent Agent Agent
(Browser) (Browser) (Browser)
MESSUNG

20. WEB PERFORMANCE MANAGEMENT | SEITE 20
WPT Monitor
Regelmäßige Messungen
• Automatisierung von WPT-Tests als Jobs
• Verwaltung und Darstellung der Ergebnisse über die Zeit
• Links zu kompletten WPT-Ergebnissen
• Alerting bei Überschreitung definierter Ladezeiten oder Fehlern
• Benutzerverwaltung

21. WEB PERFORMANCE MANAGEMENT | SEITE 21
Zusammenspiel der WPT-Komponenten (2/3)
ERGEBNISDARSTELLUNG
WPT Monitor
Veröffentlichung
Steuerung Anzeige
Server-
Komponente
WebPageTest
Trigger
Jobs Ergebnisse
Agent Agent Agent
(Browser) (Browser) (Browser)
AUTOMATISIERUNG MESSUNG

22. WEB PERFORMANCE MANAGEMENT | SEITE 22
ShowSlow
Gesamtübersicht
• Zusammenfassung von Messwerten aus verschiedenen Quellen
– WebPagetest
– YSlow
– FireBug NetExport
– PageSpeed
– DynaTrace
– beliebige eigene Quellen

23. WEB PERFORMANCE MANAGEMENT | SEITE 23
Zusammenspiel der WPT-Komponenten (3/3)
ERGEBNISDARSTELLUNG
WPT Monitor ShowSlow
Veröffentlichung
Steuerung Anzeige
Server-
Komponente
WebPageTest
Trigger
Jobs Ergebnisse
Agent Agent Agent
(Browser) (Browser) (Browser)
AUTOMATISIERUNG MESSUNG

24. WEB PERFORMANCE MANAGEMENT | SEITE 24
WebPagetest
Reale Konfiguration
„Portal“
Showslow
extern intern
WPT-Monitor WPT-Monitor
WPT-Server1 WPT-Server2 WPT-Server
Agent 1 Agent 2 Agent 3 WPT-Agent 1 WPT-Agent 2
(IE (IE, FF, Chrome) (IE, FF, Chrome)
(FF Messung) (Alle Browser)
Messung)
automatisch Einzelmessung Automatisch / Einzelmessung
Prod. nt SEU
1
Systeme Systeme

25. WEB PERFORMANCE MANAGEMENT | SEITE 25
Messumgebung mit WPT
 Automatische Tests
 Frequenz: Alle 30 Minuten
 Messung einer typischen Klickstrecke
 Messung mit IE8 und FF7
 Simulation einer 6-Mbit DSL Leitung
 Ladezeit-KPI: „Document Complete“
Seite Seite 1 Seite 2 Seite 3 Seite 4 Seite 5 Seite 6
Ladezeit (s) 3,06 2,18 3,92 4,21 3,58 6,01
Wo liegen die Grenzwerte zu „langsam“ und „schnell“?
Wie zufrieden sind die Kunden mit den ermittelten Ladezeiten?

26. WEB PERFORMANCE MANAGEMENT | SEITE 26
Wie schnell empfindet der Kunde unsere Applikation?
Bewertungskriterium Nutzerzufriedenheit:
Erhebung der durchschnittlichen Nutzerzufriedenheit mit Ladezeit
mittels Remote-Studie

27. WEB PERFORMANCE MANAGEMENT | SEITE 27
Wie zufrieden sind die Nutzer mit der Ladezeit?
Ladezeit bei der
100% der User
zufrieden sind
Ladezeit bei der
75% der User
zufrieden sind

28. WEB PERFORMANCE MANAGEMENT | SEITE 28
Wie zufrieden sind die Nutzer mit der Ladezeit?

29. WEB PERFORMANCE MANAGEMENT | SEITE 29
Wie zufrieden sind die Nutzer mit der Ladezeit?
Gemessene Ladezeiten + Umrechnungstabelle

30. WEB PERFORMANCE MANAGEMENT | SEITE 30
Wie zufrieden sind die Nutzer mit der Ladezeit?

31. WEB PERFORMANCE MANAGEMENT | SEITE 31
Ableitung Zufriedenheitsindex
Gewichtungsfaktor Gewichtungsfaktor Gewichtungsfaktor Gewichtungsfaktor
Seitenart Tageszeit Browserverteilung XYZ
Ladezeit -> Zufriedenheit
?
Einzelzufriedenheiten
Ladezeit:
Kontinuierliche Messung der Ladezeit von relevanten Seiten unter realistischen Bedingungen und zwei echten Browsern.
Seitenart:
Berücksichtigung der PIs pro Seitenart („Je häufiger eine Seite aufgerufen wird, desto mehr stört eine langsame Ladezeit.“)
Tageszeit:
Berücksichtigung der Umsatzmengen / Traffic je Stunde („Nachts fällt eine langsame Ladezeit weniger Kunden auf als
Abends“)
Browserverteilung:
Die Ladezeiten werden mit 2 Browsern gemessen und entsprechend der Anteile bei Nutzern gewichtet.

32. WEB PERFORMANCE MANAGEMENT | SEITE 32
Ableitung Zufriedenheitsindex

33. WEB PERFORMANCE MANAGEMENT | SEITE 33
Fragestellungen
Welches ist eine geeignete Meßmethode zur Datenerhebung?
Was ist der korrekte Messzeitpunkt?
(Definition Ladezeit?)
Nach welchen Kriterien kann Ladezeit bewertet werden?
(Conversion, Umsatz, Zufriedenheit, Abbruchquote, Registrierung, Umsatz,….)
Was sind relevante Grenzwerte?

34. WEB PERFORMANCE MANAGEMENT | SEITE 34
…nächste Schritte inhaltlich
Adaption auf Mobile Applikationen
Ableitung Korrelation Ladezeit zu Umsatz
Erweiterung der Messung und Erhebung von relevanten Inhalten pro Seite
für User
Integration und Vergleich mit RUM/Passive Messungen
Abgleich mit bestehenden Untersuchungen in Wahrnehmungspsychologie
Entwicklung eines generischen Ansatzes zur Anbieter-unabhängigen
Bewertung der Performance aus Nutzersicht

35. WEB PERFORMANCE MANAGEMENT | SEITE 35
Ermittlung der für die Ladezeit relevanten Inhalte pro Seite
Seitenelemente Seitenelemente

36. WEB PERFORMANCE MANAGEMENT | SEITE 36
…nächste Schritte Tool
WPT-Server
•Umsetzung der gemessenen Zeiten in Zufriedenheitswerte
•Konfigurierbare Ermittlung des Ladezeitpunkts abhängig von ausgewählten
Seitenelementen (Kommentare in WPT-Skripten)
WPT-Monitor
•Direkte Anzeige der Zufriedenheitswerte in Charts
•Gewichtungsfaktoren einbauen (Seitenart, Tageszeit, Browser)
•Kumulierte Zufriedenheitswerte (Tag/Woche, Seitenart/komplette Site)
ShowSlow
•Anbindung Real User Monitoring