For the Velocity Conference Europe 2012 workshop day this presentation is about the essentials for creation and building a Web Performance dashboard. This with ultimate goal of providing the audience a framework for designing and building a web performance dashboard. The session will cover the following 3 items:
Design guidelines: What defines a web performance dashboard? How to make sure it’s actionable and for people to actually use it on day to day basis?
Data collection: Why performance data? The various ways there are to collect data (e.g. synthetic versus RUM data, Webpagetest, Mobile) and how to correlate the different types of data and tools
Building the dashboard: How to build the actual dashboard, providing an overview of the tools/techniques used
At the end of the workshop you will be able to design and build your own dashboard based on the framework provided, or to optimize the current dashboards within your organization.
3. a Web Performance Dashboard,
up & running in 90 minutes
Key concepts for measuring and presenting performance data
Velocity Conference Europe
October 2, 2012
32. Trending
Future
Big picture
Actionable
Capacity
Optimization
33. Service Levels Trending
Future
Big picture
Actionable
Capacity
Optimization
34. Service Levels Trending
Yesterday Future
How did we perform? Big picture
Versus targets? Actionable
Historical context Capacity
Optimization
35. Real Time Service Levels Trending
Yesterday Future
How did we perform? Big picture
Versus targets? Actionable
Historical context Capacity
Optimization
36. Real Time Service Levels Trending
Now Yesterday Future
Everything working? How did we perform? Big picture
Is it me or the internet? Versus targets? Actionable
How to solve it? Historical context Capacity
Simple Optimization
0hours 24hours 7days 1Quarter
37. Real Time Service Levels Trending
Now Yesterday Future
Everything working? How did we perform? Big picture
Is it me or the internet? Versus targets? Actionable
How to solve it? Historical context Capacity
Simple
Data for dashboard Optimization
0hours 24hours 7days 1Quarter
79. Technology:
Responsiveness:
How End Users End User Experience How we build,
measure & optimize
perceive (front-end)
performance performance
@jeroentjepkema, MeasureWorks
80. Complexity of a typical web transaction
Source: Compuware Gomez @jeroentjepkema, MeasureWorks
81. (CLOUD) DATA CENTER INTERNAL USERS INTERNET CUSTOMERS
Third-party/
Cloud Services
Storage DB Servers Web Servers Major Local
This is what you control... Network What you’re blamed for..
ISP
Content
ISP
Delivery Mobile
Load Networks Carriers
Middleware App Balancers
Mainframe Servers Servers
Web Performance Delivery Chain
@jeroentjepkema, MeasureWorks
82. Measuring End User Experience is not
easy...
@jeroentjepkema, MeasureWorks
83. Measuring End User Experience is not
easy... You need diagnostic details for things you can
control and/or change
@jeroentjepkema, MeasureWorks
84. Measuring End User Experience is not
easy... You need diagnostic details for things you can
control and/or change
You need insights in the things you can control, but
do impact your bottom line
@jeroentjepkema, MeasureWorks
85. Measure End User Experience? Outside-in,
from the browser perspective...
@jeroentjepkema, MeasureWorks
103. Synthetic monitoring
Metrics collected Cons
Easy collection of data No real user data, unlimited bandwith
while testing
Heartbeat collection of data over time
Combination with CDN
Testing without actual visitor traffic
Detects macro outages, not user
Test from multiple locations
events
Object level details
Detects only what you script
Detailed alerting via Text, Mail or SNMP
No measurement of traffic volume
Root cause analysis data, with error codes,
Places load on the site under test
screenshots, source code and waterfall data
Maintenance of tests takes time
104. Synthetic monitoring
Vendors When selecting:
Alertsite Ease of use with recording scripts
Gomez
Check the API functionalities
Keynote
Level of detail with alert messages
Catchpoint
Global versus local coverage
Siteconfidence
IP Label Reliability of sending alert messages
Websitepulse
Pingdom
Etc...
105. Synthetic monitoring
Vendors When selecting:
Alertsite Ease of use with recording scripts
Gomez
Check the API functionalities
Keynote
Level of detail with alert messages
Catchpoint
Global versus local coverage
Siteconfidence
IP Label Reliability of sending alert messages
Websitepulse For Native Apps:
Pingdom Gomez
Keynote
Etc... ...
109. Real User
Real User Benchmark
Monitoring
Performance Data collection @jeroentjepkema, MeasureWorks
110. Navigation timing
2 ways of measuring...
Browser RUM
Disclaimer: There’s also third category Datacenter RUM, this will not be
covered in this out of the presentation. Contact me if your want details
111. h"p://www.w3.org/TR/naviga2on32ming/5
Some background info:
Navigation timing
http://66.7percentangel.com/2011/12/breaking-down-onload-event-performance-bookmarklet/
http://www.html5rocks.com/en/tutorials/webperformance/basics/
http://www.w3.org/TR/2011/CR-navigation-timing-20110315/#nt-dom-content-event-start
113. 1 2 3 4
As pages execute, After onload tag send
Insert tag (.js file) into Pages are requested
tag collects detailed report for
(mobile) web pages from browser/device
performance metrics further analysis
tag.js
tag.js
tag.js
tag.js
Browser RUM
120. Real User monitoring
Metrics collected Cons
Measure ALL pages from ALL users No traffic is no data
Measures traffic as well as performance Needs change to application code
Quantative performance data to analyse user May require physical installation of
satisfaction data storage or data reporter
Data can be directly correlated with Web Sample rate
Analytics
Great for trending and creating the big picture
121. Real User monitoring
Vendors When selecting:
Lognormal Do I need to build my own datastorage?
Gomez Check the API functionalities
Keynote How long is raw data stored
Torbit Interface
Google Analytics Mobile support
Boomerang.js
Oracle
Etc...
122. Real User monitoring
Vendors When selecting:
Lognormal Do I need to build my own datastorage?
Gomez Check the API functionalities
Keynote How long is raw data stored
Torbit Interface
Google Analytics Mobile support
Boomerang.js
Oracle For Native Apps:
Google Analytics
Etc... Gomez
Localytics
123. Ultimately, Real User Monitoring shows you how many
users are affected by bad performance...
124. Real User
benchmarking
Performance Data collection @jeroentjepkema, MeasureWorks
133. Real User benchmarking
Metrics collected Cons
Variety of real browsers and real devices Can be difficult to setup
available for testing
Requires physical installation
Repetitive collection of real usage scenario’s
Scripting (is difficult)
Collect optimization metrics, waterfall and
page speed score
Great for trending and creating the big picture
134. Ultimately, Real User benchmarking gives you periodic
insight in real usage scenario’s...
135. Synthethic monitoring Real User Monitoring Real User benchmarking
Performance Data collection @jeroentjepkema, MeasureWorks
136. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for...
Heartbeat, runs without traffic
Test specific customer journeys
Object level detail
Collect detailed alerts, including
root cause analysis
Desktop/Mobile Site
Gomez
Keynote
Watchmouse
Alertsite
Mobile Apps
Gomez
Keynote
Performance Data collection @jeroentjepkema, MeasureWorks
137. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for... Used for...
Heartbeat, runs without traffic Real usage information from
Test specific customer journeys all users!!
Object level detail Trending/Optimization
Collect detailed alerts, including Business impact
root cause analysis
Desktop/Mobile Site Desktop/Mobile Site
Gomez Gomez
Keynote LogNormal
Watchmouse Torbit
Alertsite Google Analytics
Mobile Apps Mobile Apps
Gomez Gomez
Keynote Localytics
Google Analytics
Performance Data collection @jeroentjepkema, MeasureWorks
138. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for... Used for... Used for...
Heartbeat, runs without traffic Real usage information from Periodic testing of user scenario’s
Test specific customer journeys all users!! with real devices and bandwith
Object level detail Trending/Optimization Optimization details
Collect detailed alerts, including Business impact Competitive scan
root cause analysis
Desktop/Mobile Site Desktop/Mobile Site Desktop/Mobile Site
Gomez Gomez Webpagetest
Keynote LogNormal
Watchmouse Torbit
Alertsite Google Analytics
Mobile Apps Mobile Apps Mobile Apps
Gomez Gomez Perfecto Mobile
Keynote Localytics Device Anywhere
Google Analytics
Performance Data collection @jeroentjepkema, MeasureWorks
157. First thing is to establishing a baseline:
A pre-defined set of metrics
158. First thing is to establishing a baseline:
A pre-defined set of metrics
that describes normal behavior
159. First thing is to establishing a baseline:
A pre-defined set of metrics
that describes normal behavior
in order to detect variancies
160. First thing is to establishing a baseline:
A pre-defined set of metrics
that describes normal behavior
in order to detect variancies
and to be comparable within historic context
162. Purchasing a book, Customer journey
must be completed (speed), Metric: Speed
where every page loads under 4 sec., Target: Sec
using IE8 and higher, User scenario
from any location in the Netherlands, User locations
for 95% of all users, Percentile
every day between 6am and 12pm, Window
measured with Real User Monitoring. Collection type
Source: Metrics 101, Velocityconf 2010
169. Layered approach
Online brand Bol.com
Books
Music
Products Toys
etc.
Search
Services per product Reviews
Purchase
Discounts
170. Layered approach
Online brand Bol.com Overall performance
Books
Music
Products Toys
etc.
Search
Services per product Reviews
Purchase
Discounts
171. Layered approach
Online brand Bol.com Overall performance
Books
Music
Products Toys Detailed performance
etc.
Search
Services per product Reviews
Purchase
Discounts
172. Layered approach
Online brand Bol.com Overall performance
Books
Music
Products Toys Detailed performance
etc.
Search
Services per product Reviews Root cause
Purchase
Discounts
173. Layered approach
Big Picture
Online brand Bol.com Overall performance
Books
Music
Products Toys Detailed performance
etc.
Search
Services per product Reviews Root cause
Purchase
Discounts
Detailed level of performance
178. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
179. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
Business context
180. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
Business context Customer Journey
181. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
Page views
Bouncerate
Business context Customer Journey
Affected users sessions
Competition
182. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
Page views
Bouncerate
Business context Customer Journey
Affected users sessions
Competition
Real Time Performance
183. Displayed in dashboard Metrics Group information
Threshholds
Functionality Service Levels
Real Users versus Synthethic
Page views
Bouncerate
Business context Customer Journey
Affected users sessions
Competition
Real Time Performance Delivery chain
184. Displayed in dashboard Metrics Group information
Threshholds
Functionality Real Users versus Synthethic
Service Levels
Page views
Bouncerate
Business context Customer Journey
Affected users sessions
Competition
Speed
Application errors
Real Time Performance Content errors Delivery chain
Third party errors
Downtime
186. Custom reports Mobile Performance
(SLA/Trending) application dashboard
4 4
5
Authentication layer
Vendor API used for both real time
1 information as raw data download
API for data upload to mobile app / 2
2 dashboard 3
3 Import HTML alert mail Alert
Datawarehouse 3
message
Authentication mechanism for both
4 login as selective data transfer
1 1 1 1
Remote access to Datawarehouse for SLA
5 or Trend reporting, based on same data as
real time dashboard
WPT Synthethic RUM Analytics
216. 1. Look into your webanalytics
Become a dashboard rockstar...
217. 1. Look into your webanalytics
2. Define a performance baseline
Become a dashboard rockstar...
218. 1. Look into your webanalytics
2. Define a performance baseline
3. Start with synthethic monitoring
Become a dashboard rockstar...
219. 1. Look into your webanalytics
2. Define a performance baseline
3. Start with synthethic monitoring
4. Design your dashboard
Become a dashboard rockstar...
220. 1. Look into your webanalytics
2. Define a performance baseline
3. Start with synthethic monitoring
4. Design your dashboard
5. Build a report based on your design
and collect feedback
Become a dashboard rockstar...
221. 1. Look into your webanalytics
2. Define a performance baseline
3. Start with synthethic monitoring
4. Design your dashboard
5. Build a report based on your design
and collect feedback
6. Build a dashboard
Become a dashboard rockstar...
222. 1. Look into your webanalytics
2. Define a performance baseline
3. Start with synthethic monitoring
4. Design your dashboard
5. Build a report based on your design
and collect feedback
6. Build a dashboard
7. Add rum and other datasources
Become a dashboard rockstar...
233. Data Visualization:
Noah Iliinsky/Julie Steel: Desiging Data Visualizations - http://oreil.ly/SryQyV
Real User Monitoring:
Wednesday Oct 3, 11.20am - The 3.5s dash for attention and other stuff we found in RUM
WebPage test:
Thursday Oct 4, 15.30pm - WebPage test, beyond the basics
Join a Web Performance meetup:
Go to www.meetup.com and search for web performance.
For Netherlands go to http://www.meetup.com/Dutch-Web-Operations-Meetup/