1. Why people don’t wait for you website to load
(and how to fix that)
@jeroentjepkema
DrupalJam 2014

2. Waiting = Engagement

10. Mobile browsing...

18. “Both offline and online consumers
associate long wait times with
poor customer service”

19. Click away slide
Performance tolerance

20. 0
10
20
30
40
50
60
70
80
90
100
0 1 2 3 4 5 6 7 8 9 10
Bouncerate per pagetype/sessionBouncerate(%)
Page load time (sec.)
Median Campaign Product search

21. 0
10
20
30
40
50
60
70
80
90
100
0 1 2 3 4 5 6 7 8 9 10
Bouncerate(%)
Page load time (sec.)
Median Campaign Product search
Bouncerate per pagetype/session

22. Purpose vs. Context

23. Online users often lack context for delays...

24. ...and see no other option than to click away

25. Good Design
+
Fast Delivery
=
Great User Experience

26. NS Hispeed: Site optimization
0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

27. Load time
Availability
Homepage
Transaction time
Availability
Ticket ordering funnel (7 steps)
Before After
11,5s
95,61%
3,8s
99,52%
Before After
43,2s
88,72%
35,7s
97,65%
30% higher
site success
rate
NS Hispeed: Site optimization

28. Design vs. Speed?

29. 0
25
50
75
100
1 2 3 4 5
Slow Average Fast
%ofrespondentsthatratedtheactualwebsitespeed
Design score (1=bad - 5=beautiful)
Over 60% of people that experienced a slow website ranked
design 2 points lower compared to a fast experience

30. So... why doesn’t everybody have a
fast website?

31. Trouble is stickyness?
Gum/Shoe
How to make performance stick?

33. Design for experience!

34. Source: Jakob Nielsen
99% of time online is spent on other sites
than yours...

35. Experience vs. surfing online....

36. Always compared to past experiences
Experience vs. surfing online....

37. Task completion has positive impact
Always compared to past experiences
Experience vs. surfing online....

38. Task completion has positive impact
Slow downs have more impact
Always compared to past experiences
Experience vs. surfing online....

39. 15-20% worse than reality
Task completion has positive impact
Slow downs have more impact
Always compared to past experiences
Experience vs. surfing online....

40. Consumers visit 18-23 travel websites
before they finally convert
Source: TNS/Nipo

41. Search/Orientation phase
Perception of experience
1
Performance influence cycle
http://twinkle100.measureworks.nl

42. Delivered
experience
Your website
3
5
2
Stimulate content/
conversion
4
Performance influence cycle
Search/Orientation phase
Perception of experience
1
http://twinkle100.measureworks.nl

43. The waiting experience

45. Performance vs.

46. Performance vs. Content

47. What’s your time to first tweet?
https://blog.twitter.com/2012/improving-performance-on-twittercom

48. 3 (performance) design questions to ask...

49. Above the fold?

50. Which priority?

51. Improving which metrics?

52. Why do we need that Carousel?

54. Priority 1

55. Priority 1
Priority 2

56. Priority 1
Priority 2
Priority 3

57. Priority?
Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)

58. Performance vs. Perception

59. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0

60. http://answers.yahoo.com/question/index?qid=1005081200005

61. nytimes.com/2004/02/27/nyregion/27BUTT.html

64. Perception = Fast Experience

65. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed

66. @jeroentjepkema, MeasureWorks
How fast should I be?

67. “Speed is at it’s best when it creates the feeling
that you don’t have to work to achieve your goal”

68. 0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!

69. 1
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...

70. 1
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...

71. 1
3
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...
Mmm, shall I click away?

72. 10
1
3
0,3
Instantaneous: I like it!
Interaction: Let’s conversate...
Mmm, shall I click away?
Only if the task/content is relevant
0 Source: Jakob Nielsen

73. Don’t stop with one page:
Flow state

74. Provide relevant content to
support task completion...

75. ...deliver it fast, focus on perception!

76. The bottom line...

77. Performance vs. Diet

78. WiFi 4G 3G
What happens if I don’t optimize?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

79. Responsive Web Design?
WiFi 3G
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

80. A typical webpage...

81. A set of resources to be fetched from a server...
The browser performs it’s job...
This results in the page being displayed on your
screen
1
2
3

82. 1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout
9. Render

83. 1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout
9. Render
Server

84. 1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout
9. Render
Network
Server

85. 1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout
9. Render
Network
Client
Server

86. 1. DNS resolution
2. TCP connection
3. Send request
4. Wait for response
5. Download response
6. Parse (DOM, CSSOM)
7. Execute JS/Apply CSS
8. Compose Layout
9. Render
85-90% of performance
happens in the browser
Network
Client
Server

87. When it comes to optimization...

88. ...we have our own golden rules
visit www.stevesouders.com for more background or check your site via
https://developers.google.com/speed/pagespeed/insights/

89. Size reduction, Quality, Latency

90. Low hanging fruit...

91. Images

92. 63 17
6
16
57
24
6
13
49
38
7
6
Retail Travel Finance
HTML CSS Javascript Images
% type of element per webpage/industry
(avg. homepage/productpage from benchmark.measureworks.nl)

93. Reduce image size
(tool imgoptim.com)

94. Sprite your images....

95. 84 request

96. 84 request Combine 25 to 1 sprite

97. First Byte time

98. 0
1
2
3
4
5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Median Min Max

99. 0
1
2
3
4
5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Median Min Max
Revenue riskedRevenue risked
above 15-20% variance is detected

102. 0"
2"
4"
6"
8"
10"
12"
14"
"15"april"."8"
16"
0"
"16"april"."8"
16"
0"
"17"april"."8"
16"
0"
"18"april"."8"
16"
0"
"19"april"."8"
16"
0"
"20"april"."8"
16"
0"
"21"april"."8"
16"
0"
"22"april"."8"
16"
0"
"23"april"."8"
16"
0"
"24"april"."8"
16"
0"
"25"april"."8"
16"
0"
"26"april"."8"
16"
0"
"27"april"."8"
16"
0"
"28"april"."8"
16"
0"
"29"april"."8"
16"
Uur$van$de$dag$
Laad,jden$klikpaden$(per$uur)$
Solliciteren"
Korte"naviga;e"
0"
0,5"
1"
1,5"
2"
2,5"
3"
3,5"
4"
4,5"
15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15" 23" 7" 15"
DNS"Lookup"Time"
Connect"Time"
Time"to"First"Byte"
Content"Download"
Redirect"Time"

105. Not Optimized

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

107. Page size:
1660 Kb
Time to render:
1,97 sec.
# requests:
89
Document complete:
3,68 sec.
OptimizedNot Optimized

108. Page size:
1660 Kb
Time to render:
1,97 sec.
# requests:
89
Document complete:
3,68 sec.
Page size:
498 Kb
Time to render:
1,03 sec.
# requests:
48
Document complete:
1,54 sec.
OptimizedNot Optimized

109. Page size:
1660 Kb
Time to render:
1,29 sec.
# requests:
89
Document complete:
3,68 sec.
Page size:
498 Kb
Time to render:
1,10 sec.
# requests:
48
Document complete:
1,54 sec.
OptimizedNot Optimized
Time to first visual:
1,03 sec. vs 1,97 sec.

110. Put your website on a diet...

111. Metrics to target for:*
Perception
Actionable
Flow
Time to first paint 0.5 - 1 sec.
Time to interact: 1-3 sec
Variation < 20% between pages
* For mobile the target is “screen actionable in 1 sec.”

112. But, optimization never ends...

113. Performance vs. Analytics

114. donothing.com

115. Defining Service Levels

116. A practical (and easy DIY) example:

117. Purchasing a book,
must be completed (speed),
where every page loads under 3 sec.,
from any location in the Netherlands,
for 90% of all users,
every day between 6am and 12pm,
using IE9 and higher,
Customer journey
Metric: Speed
Target: Sec
User scenario
User locations
Percentile
Service Window
measured with Real User Monitoring. Monitoring type
Read more: Metrics 101, Velocityconf 2010

118. Repeatable, End-User focused & Quantifiable

119. Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum
0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month

120. 0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month
Non-Bounce Mobile
LD50: 4.85 sec.
Baseline: 2,7 sec.
Poverty Line: 10,6 sec.
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

121. “Every release should be better or
equal to previous version”

122. Measuring the right data

123. Application Delivery Chain
INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USERS(CLOUD) DATA CENTER
Storage DB Servers Web Servers
App
Servers
Middleware
ServersMainframe
Load
Balancers
Network

124. INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USERS(CLOUD) DATA CENTER
Storage DB Servers Web Servers
App
Servers
Middleware
ServersMainframe
Load
Balancers
Network
Application Delivery Chain
This is what you control This is what you’re blamed for

125. Measuring performance?

126. Measuring performance? Always outside-
in, from the browser perspective...

127. 2 ways of measuring performance...

128. Synthetic
Monitoring

129. Periodic, simulated, measurement of performance

130. Go check your site @
Webpagetest.org
(For settings: Akamai State of the Internet)

131. Ultimately, synthetic monitoring shows you if your
site’s working or not...
(best used for operations and service reports)

132. Real User
Monitoring

133. The problem with synthetic...

134. Synthetic heartbeat
Real Users
..it’s ‘a’ user, not your end user

135. Relies on navigation timing API, custom variables can be added
Turn on
“Site Speed”
in your GA
account!
http://bit.ly/1ivGWTt

136. Or try
Soasta mPulse
http://bit.ly/I5ngs8

137. Ultimately, Real User Monitoring shows you how many
users are affected by bad performance...
(best used for capacity management and conversion optimization)

138. One truth to rule them all...

139. Questions so far?

140. The art of staying fast

141. 1. Understand your customer
The art of staying fast

142. 1. Understand your customer
2. Prioritize content
The art of staying fast

143. 1. Understand your customer
2. Prioritize content
3. Deliver fast
The art of staying fast

144. 1. Understand your customer
2. Prioritize content
3. Deliver fast
4. Design to be measurable
The art of staying fast

145. 1. Understand your customer
2. Prioritize content
3. Deliver fast
4. Design to be measurable
5. Repeat this for every iteration
The art of staying fast

146. Join the movement #fastweb

147. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
View slides: bit.ly/MW-DJAM14