My slides from my session @ Regionale Webwinkeldagen... 7 performance strategy tips you should care about

2. @jeroentjepkema
Performance :: Analytics :: Optimization

3. Performance strategy:
7 performance tips you should care about...
Regionale Webwinkeldagen,
November 22, 2012

4. Online Analytics

5. Every website has goals

7. Organic Search
Campaigns
Ad Network
Transactional site
Visitor
Offer
€"
Abondenment)
Upselling
Reach
Purchase step 1
€"
Purchase step 2
€"
Mailing,
alerts,
€" promotions
Conversion
€"
Disengagement) Enrolment
Impact)on)site)
€" Negative €" Positive

9. €"
Media site
Enrolment
Targeted
€"
embedded add
Add Network
Visitor
€"
€"
Advertiser site
Departure(
Impact(on(site(
€" Negative €" Positive

10. Analytics is the measurement of movement towards the goals

11. A simple analytics model
A$en'on" Engagement( Conversion(
NEW
VISITORS
GROWTH CONVERSION
SEARCHES RATE
PAGES TIME
TWEETS
MENTIONS
NUMBER
OF VISITS
PER
VISIT
ON
SITE
x"
ADS SEEN ORDER
LOSS VALUE
BOUNCE
RATE

13. But, look closer...

14. Why did customers drop off?
‣Price
‣Functional errors?
‣Performance issues?

15. Why did customers drop off?
‣Price
‣Functional errors?
‣Performance issues?
What’s the business impact?
‣Lost customers?
‣Revenue risked?
‣In Euros?

16. What we need is context!

17. Complete Web Monitoring

18. Web Analytics
(what did they do on
the site?)
Complete Web Monitoring

19. Web Analytics Usability
(what did they do on (how did they
the site?) interact with it?)
Complete Web Monitoring

20. Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring

21. Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring
VoC
(what were their
motivations?)

22. Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring
VoC Social Media
(what were their (what were they
motivations?) saying?)

23. Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring
VoC Social Media Competition
(what were their (what were they (what are they up
motivations?) saying?) to?)

24. “Hard” data
Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring
VoC Social Media Competition
(what were their (what were they (what are they up
motivations?) saying?) to?)
“Soft” data

25. “Hard” data
Web Analytics Usability Performance
(what did they do on (how did they (could they do what
the site?) interact with it?) they wanted to?)
Complete Web Monitoring
VoC Social Media Competition
(what were their (what were they (what are they up
motivations?) saying?) to?)
Source: Complete Web Monitoring, Sean Power/Alistair Croll, 2009
“Soft” data

26. Why performance
matters...

27. How fast does it need to be?
5
4
3
2
1
0
Desktop Tablet Mobile
Source: Strangeloopnetworks.com: Engaging the tablet user; What to expect from web sites?

28. Would you retry?
0x
1x 2x 3x 4x
6% 24% 46% 17% 7%
Source: Compuware: Engaging the tablet user; What to expect from web sites?

29. Less likely to visit site again 49%
Visit competitor? 46%
Brand impact? 28%
Tell others? 21%
Contact Customer Service? 16%
Loyalty?
Source: Compuware: Engaging the tablet user; What to expect from web sites?

30. Study conducted by MeasureWorks & idr1, Emerce, 2012
Dutch eRetail100 Dutch eTravel30 Dutch eFinance50
4% 6%
12%
Social sentiment

31. How we perceive performance...

32. “ Flow ”is an
“optimal experience”
that is
“intrinsically enjoyable”

33. Globe Neckermann Sunweb
D-reizen Arke
Rendering a homepage

34. Sunweb D-reizen Arke Globe Neckermann
4,3
3,1
2,8
2,05
1,45
Start render
Start page Homepage Sun Detailed Page Booking Page

35. Sunweb D-reizen Arke Globe Neckermann
5,25
5,05
4,9 4,9 4,9
4,8
4,6
4,3 4,2
3,1
2,8 2,8 2,9
2,3 2,4
2,05 2,1
1,9 1,9
1,45
Start render
Home page Landingpage Sun Detailed Page Booking Page

36. Myth busted?

37. Perceived Technology
1 Sunweb Sunweb
2 D-reizen Globe
3 Neckermann Neckermann
4
Arke D-reizen
5
Globe Arke
Busted? Study conducted by MeasureWorks, Emerce, eTravel 2012

38. Perceived Technology
1 Sunweb Sunweb
2 D-reizen Globe
3 Neckermann Arke
4
Arke D-reizen
5
Globe Neckermann
Confirmed? Study conducted by MeasureWorks, Emerce, eTravel 2012

39. Business issue

40. Performance strategy:
7 performance tips you should care about

41. 1. Determine what matters most?

42. Look into your web analytics tool...

43. Find your goals

44. Organic Search
Campaigns
Ad Network
Transactional site
Visitor
Offer
€"
Abondenment)
Upselling
Reach
Purchase step 1
€"
Purchase step 2
€"
Mailing,
alerts,
€" promotions
Conversion
€"
Disengagement) Enrolment
Impact)on)site)
€" Negative €" Positive
Goals = Customer journeys

45. Select your top customer journeys

46. 2. Define how fast it needs to be?

47. Establishing a baseline:

48. Establishing a baseline:
A pre-defined set of metrics

49. Establishing a baseline:
A pre-defined set of metrics
that describes normal behavior

50. Establishing a baseline:
A pre-defined set of metrics
that describes normal behavior
in order to detect variancies

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

52. Example...

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

54. Repeat this for every customer journey defined...

55. 3. Collecting performance data

56. (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

57. Measure End User Experience?

58. Measure End User Experience? Outside-in,
from the browser perspective...

59. Performance measurement toolkit

60. Synthethic
Real User Benchmark
Monitoring

61. Simulate business transactions

62. Via multiple devices & browsers

63. From where multiple locations...

64. Used for error detection & Root Cause Analysis

65. Used for error detection & Root Cause Analysis

66. Used for error detection & Root Cause Analysis

67. Ultimately, synthetic monitoring shows you
if your site’s working or not...

68. But, synthetic isn’t enough...

69. Synthetic heartbeat
Real Users
But, synthetic isn’t enough...

70. Real User
Real User Benchmark
Monitoring

71. 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
Disclaimer: There also other options like
Browser RUM Datacenter RUM or navigation timing, this will
not be covered in this out of the presentation

72. Gomez

73. Lognormal

74. Relies on navigation timing API, custom variables can be added
Google Analytics

75. Ultimately, Real User Monitoring shows you how many
users are affected by bad performance...

76. Real User
benchmarking

77. First view
11.349s
Real usage
Repeat view
4.357s

78. Webpagetest.org

79. Object level
!
!
Optimization tips Webpagetest.org
!

80. Webpagetest.org

81. Ultimately, Real User benchmarking gives you periodic
insight in real usage scenario’s...

82. Synthethic monitoring Real User Monitoring Real User benchmarking

83. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for...
Heartbeat, runs without traffic
Test specific customer journeys
Object level details
Collect detailed alerts
Desktop/Mobile Site
Gomez
Watchmouse
Alertsite
Mobile Apps
Gomez
Keynote

84. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for... Used for...
Real usage information from
Heartbeat, runs without traffic
all users!!
Test specific customer journeys
Trending/Optimization
Object level detail
Business impact
Collect detailed alerts
Desktop/Mobile Site Desktop/Mobile Site
Gomez Gomez
Watchmouse LogNormal
Alertsite Google Analytics
Mobile Apps Mobile Apps
Gomez Gomez
Keynote Localytics
Google Analytics

85. Synthethic monitoring Real User Monitoring Real User benchmarking
Used for... Used for... Used for...
Real usage information from Periodic testing of user scenario’s
Heartbeat, runs without traffic
all users!! with real devices/bandwith
Test specific customer journeys
Trending/Optimization Optimization details
Object level detail
Business impact Scan competitors
Collect detailed alerts
Desktop/Mobile Site Desktop/Mobile Site Desktop/Mobile Site
Gomez Gomez Webpagetest
Watchmouse LogNormal
Alertsite Google Analytics
Mobile Apps Mobile Apps Mobile Apps
Gomez Gomez Perfecto Mobile
Keynote Localytics Device Anywhere
Google Analytics

86. 4. Performance across all devices used

88. Touch & Gesture

89. Example 1: DWDD - Desktop

90. Example 1: DWDD - iPad

91. Why is this important?

93. Internet Explorer 8:
3,78 sec.
Firefox 4:
2,54 sec.
Chrome 8:
2,54 sec.
Safari 4:
2,64 sec.
Measured via webpagetest.org

94. Mobile? Should we just go with our regular website?

95. IE8: 5.73 sec.
Chrome: 2.54 sec.
Measured with webpagetest.org

96. IE8: 5.73 sec. iPhone: 9.37 sec.
Chrome: 2.54 sec. Android: 9.33 sec.
Measured with webpagetest.org

97. In terms of Multi Channel Experience?

98. 9
8
7
Page Load Time (sec.)
6
5
8,5 8,9
4 7,9
3
4,6 4,6 4,8
2 3,7 3,8
3,5
3
1 2,3 2 2,3
1,8
1,2 0,9 1,3
0,6
0
MoneYou ING IEX Binck Alex ABN Amro
Desktop Mobile
Native
Multi Channel Experience

99. Some examples...

100. iPhone
The good....

101. iPad
iPhone
The good....

102. Desktop
iPad
iPhone
The good....

103. iPhone
The bad....

104. iPad
iPhone
The bad....

105. iPad
iPhone
Desktop
The bad....

106. 5. Be ready for more visitors...

108. Good
campaign

109. Good
gone
campaign

110. Good
gone BAD!
campaign

111. Source: John Allspaw, Flickr.com
....know what your limits are

112. Source: John Allspaw, Flickr.com
Business:
What do you need?
....know what your limits are

113. Source: John Allspaw, Flickr.com
IT:
What you have left
Business:
What do you need?
....know what your limits are

114. Source: John Allspaw, Flickr.com
IT:
What you have left
Capacity
Planning
Business:
What do you need?
....know what your limits are

115. Web%traffic%%(Pageviews)!
1.000.000!
1.200.000!
200.000!
400.000!
600.000!
800.000!
0!
Mei;09!
jun;09!
jul;09!
aug;09!
sep;09!
okt;09!
nov;09!
dec;09!
jan;10!
feb;10!
mrt;10!
apr110!
mei10!
jun;10!
jul;10!
aug;10!
sep;10!
okt;10!
nov;10!
dec;10!
Jan;11!
feb;11!
Max.%number%of%pageviews%per%hour%!
mrt;11!
apr;11!
Christmas/EOY%
mei;11!
MAX!capacity!
Safety!capacity!
Traffic!Realized!
Traffic!Forecast!
jun;11!
jul;11!
aug;11!
sep;11!
okt;11!
nov;11!
Capacity planning
dec;11!

116. 6. Continuous performance diet

117. Vrijuit.nl

118. Performance optimization
Low hanging fruit More advanced optimization
‣ Reduce page size ‣ Non-blocking scripts
‣ Enable Gzip ‣ Optimizing images
‣ Reduce the number of roundtrips ‣ Splitting payloads
‣ Structure the page to improve ‣ Asynchronous loading
rendering & download ‣ Pre-loading
‣ Enable caching ‣ Etc.
‣ Clean up & remove duplicates
‣ Minify javascript

119. Page size:
1660 Kb
# requests:
89
Time to render:
1,29 sec.
Document complete:
3,68 sec.
Not Optimized

120. Page size: Page size:
1660 Kb 498 Kb
# requests: # requests:
89 48
Time to render: Time to render:
1,29 sec. 1,10 sec.
Document complete: Document complete:
3,68 sec. 1,54 sec.
Not Optimized Optimized

121. 7. Correlate your (performance) data

123. What does it mean?

124. What does it mean?
Why is it important?

125. What does it mean?
Why is it important?
Next best action?

126. Mix & Match your data...

127. Speed vs. Bounce rate
11
9,9 90%
8,8
80%
7,7
6,6 65%
5,5 70% 80%
60%
4,4
3,3
50% 50%
2,2
1,1
35%
0
Page 1 Page 2 Page 3
Tolerated Median Frustrated

128. Revenue risked 10.000 visitors
Optimale flow
Speed (s)
Availability (%)
Bouncerate (%)
Conversie
Page 1
5,5
100
70
3000
Page 2
13,0
100
75
750
Page 3
2,0
100
60
300
Page 4
3,5
88,5
5
252
10.000 visitors
Actual flow
Speed (s)
Availability (%)
Bouncerate (%)
Conversie
Page 1
8,0
100
75
2500
Page 2
15,5
100
80
500
Page 3
2,0
100
60
200
Page 4
8,0
88,5
5
168

129. Would you recommend me?

130. Performance vs. Sentiment

131. Ask yourself:
Are we causing any slowdowns on our website?

132. Become a performance rockstar...

133. 1. Find out what is important
Become a performance rockstar...

134. 1. Find out what is important
2. Define a performance baseline
Become a performance rockstar...

135. 1. Find out what is important
2. Define a performance baseline
3. Select the right toolset
Become a performance rockstar...

136. 1. Find out what is important
2. Define a performance baseline
3. Select the right toolset
4. Measure across all devices used
Become a performance rockstar...

137. 1. Find out what is important
2. Define a performance baseline
3. Select the right toolset
4. Measure across all devices used
5. Be prepared for your visitors
Become a performance rockstar...

138. 1. Find out what is important
2. Define a performance baseline
3. Select the right toolset
4. Measure across all devices used
5. Be prepared for your visitors
6. Continuous performance diet
Become a performance rockstar...

139. 1. Find out what is important
2. Define a performance baseline
3. Select the right toolset
4. Measure across all devices used
5. Be prepared for your visitors
6. Continuous performance diet
7. Correlate, analyse, take action
Become a performance rockstar...

140. Don’t forget, business drives experience....

141. Questions?

142. Recommended...

143. Data Visualization:
Noah Iliinsky/Julie Steel: Desiging Data Visualizations - http://oreil.ly/SryQyV
Mobile Strategy:
Luke Wroblewski: Mobile First - http://bit.ly/UTFo6T
Online Analytics:
Alistair Croll/Sean Power: Complete Web Monitoring - http://oreil.ly/WktuE7
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/

144. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl