Slides from my session at Shoppingtoday 2015, a 5 step approach to get your site fast and ready for peak volumes for your customers during the holidays season...

1. @jeroentjepkema
ShoppingToday 2015
5 must-do’s for the holiday season

3. Slides: bit.ly/MW-ST15

4. (bad) Performance triggers emotions

5. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Hour/day
Performance complaints patterns per branche/day
Retail100 Travel30
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015
Average:
179 tweets p/hour

6. 21% of social complaints are about
user experience
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015

7. 30 33 36 39 42 45 48 51 2 5 8 11 14 17 20 23 26
Week/Year (2014-2015)
Performance complaints pattern per branche/day
Retail100 Travel30
Normal average:
2398 tweets p/day
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015

8. 30 33 36 39 42 45 48 51 2 5 8 11 14 17 20 23 26
Week/Year (2014-2015)
Performance complaints pattern per branche/day
Retail100 Travel30
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015
Normal average:
2398 tweets p/day
Holiday average:
2897 tweets p/day

9. 18% increase in
performance complaints
during holiday season
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015

10. 30 33 36 39 42 45 48 51 2 5 8 11 14 17 20 23 26
Week/Year (2014-2015)
Performance complaints pattern per branche/day
Retail100 Travel30
Research from MeasureWork & Social and More. Twitter mentions collected for Twinkle100
webshops between July 1 2014 - July 1 2015
Holiday average:
2897 tweets p/day
Complaint top 3:
1. Downtime (36%)
2. Mobile readiness (21%)
3. Slow (19%)
Complaint top 3:
1. Downtime (39%)
2. Slow (29%)
3. Mobile readiness (11%)

11. Slow impacts our perception
(of design)

13. 0
25
50
75
100
1 2 3 4 5
Slow Average Fast
%ofrespondentsthatratedtheactualwebsitespeed
Design score (1=bad - 5=beautiful)

14. When users experienced a slow
website, 60% of them rated
design lower

15. ...Conversion Impact Score

16. 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
Conversionrate(%)
Category Title
Real User Monitoring: True Conversion Rate
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Retail Travel B2B

17. Real User Monitoring: True Conversion Rate
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
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
Conversionrate(%)
Category Title
Competitive Custom B2B

18. Real User Monitoring: True Conversion Rate
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
LD50: 4,3s
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
Conversionrate(%)
Category Title
Competitive Custom B2B

19. Real User Monitoring: True Conversion Rate
Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
0%
10%
Optimal Conversion: 1,8s
LD50: 4,3s
Poverty Line: 7,6s
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
Conversionrate(%)
Category Title
Competitive Custom B2B

20. On average a fast(er) experience
provides a 70% higher
conversion rate...

21. Yet, in reality...

22. ...this is a familiar sight ;-(

23. Queuing for iPhone6 launch - London 2014
Purpose vs. Context

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

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

26. For many, Performance is like the gym...

27. There’s always an excuse ;-(

28. 5 must haves
for happy customers (again)...

29. 1.
Understand & Prioritize
your feature content

30. Three (simple) performance/content checks

31. Defer non-feature content

32. A: Load carousel first B: Delayed download
20% time spent on priority content 1% time spent on priority content
http://www.nngroup.com/articles/website-response-times/

33. Yet, 83% of all Twinkle100 sites
loads menu before feature
content...

36. “The faster you can
paint your feature content,
the more engaged
your visitors will become”

37. Avoid (too much) Sequencing

38. “Provide your users the time to
understand navigation as they often
overlook things that change too fast and/or
often”

39. www.example.com

40. Consistent, simple &
user generated navigation

41. Use speed to increase perceived value

42. Fast response = Fast Experience?

43. The kayak effect: http://bit.ly/UgTneD
People prefer to wait for up
to a minute to get what they
want from an app rather
than get it instantly – if, and
it’s an important if, they
believe the app is working
for them

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

46. Show effort,
provide specific content,
build trust

47. 2.
Set your performance budget

48. Setting a performance budget:
A pre-defined set of metrics
that describe normal behavior
in order to detect variances
and to be comparable in historical context

49. Example performance budget...

50. Perception
Actionable
Flow
TtFB
Page Size
Time to first Byte 0.0 - 0.2 sec.
Speed Index 0.5 - 1 sec.
Document complete: 1-3 sec
Variation < 20% between pages in funnel
Page size < 1Mb (75 requests)
Example performance budget...

51. 3.
How fast is your (front-end) code?

52. Build for speed?

53. 53
go to http://webpagetest.org

54. 54
www.example.com
select location
select browser
Set connection speed
Capture video

55. 1: Configure test
2: Key Optimizations
3: Performance metrics
Use Akamai State of the Internet quarterly reports to select right bandwith per country: http://www.akamai.com/stateoftheinternet/

56. Responsive web?

57. http://whatismyscreenresolution.com

58. Compared to the competition?

59. No permission needed...

60. 9.76 sec. 4.75 sec. 7.09 sec. 2.31 sec.
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

61. Or the easy way: http://benchmark.measureworks.nl

62. Do you trust your third parties?

65. 4.3 sec
22.1 sec
Source: webpagetest.org

66. Anatomy of a
web page
Anatomy of a web page

67. A set of resources to be fetched from a server...
The browser renders the page...
This results in the page being displayed on your
screen
1
2
3

68. Introducing the waterfall chart

70. See also: 90 minute optimization cycle, Strangeloop, Velocity 2012

71. HTML
See also: 90 minute optimization cycle, Strangeloop, Velocity 2012

72. HTML
Resources
See also: 90 minute optimization cycle, Strangeloop, Velocity 2012

73. HTML
Resources
Start
Render
See also: 90 minute optimization cycle, Strangeloop, Velocity 2012

74. HTML
Resources
Start
Render
Document
Complete
See also: 90 minute optimization cycle, Strangeloop, Velocity 2012

75. Waterfall technique
a.k.a. show me where it hurts

76. Code Green:
Time to first byte?

78. Code Orange:
Too many connections

79. 106 Connections
(almost one per request)

80. Code Blue:
Too many bytes (page bloat)

81. 81

82. Code Grey:
Bad repeat view

83. First view Repeat view

84. Why is this important?

85. Why is this important?
85-90% of all slowdowns are
caused by your front-end code...

86. 4.
Fast enough?
Then test for peak traffic

87. Load/Performance testing:
Measure performance under both normal and
peak volumes to discover how your application
behaves under stress

88. Find your ceilings in time to fix them...
The End
Current state

89. 0
250
500
750
1000
January-14 April-14 July-14 October-14 January-15 April-15 July-15 October-15
#Pageviews(x1000)
Forecast pageviews Actual pageviews
Traffic realized
Traffic forecast
Max infra capacity (90%)
Safety infra capacity (80%)
# pageviews at peak
hour of peak day per
week/month
Build your spreadsheet...

90. Your marketing campaign must never be a
suprise for your site...

91. Questions so far?

92. 5.
Repeat, repeat, repeat...

93. It’s a process. Integrate the
performance budget in your
continuous delivery cycle

94. Analyze the performance as your
users experience it and
compare against your budget to
identify what areas need
improvement
Build faster websites
and optimize the
rendering of your
application and the
perception of speed
Automate & Update
performance testing and
integrate into your delivery
processes
Repeat
Measure Build Run

95. Performance is a team sport...

96. Developer
Makes it real,
builds &
deploys code.
Marketer
BizDev,
validates
customers
demand and
continuously
generates new
ideas
Designer
Designs
compelling
customer
experience
with
performance
in mind
Analyst
Tracks
performance
budget, drives
conversion
experiments
and keeps
you honest.

97. ...Use performance as a business
metrics to make it stick

98. Holy performance, Batman...

99. Always remember this...

100. You owe it to your customers...

101. Thanks! More questions?
M: jeroen@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
Or, view slides: bit.ly/MW-ST15
Visit us at our stand