1. The document discusses the importance of website speed and performance for user experience and conversion rates. It provides data showing that slow sites negatively impact user engagement. 2. It recommends establishing performance baselines and service level targets to prioritize speed optimizations. Metrics like time to first paint and time to interact should be under 1-3 seconds to provide a positive user experience. 3. The key takeaways are to design with performance in mind, measure performance against targets from an end-user perspective, and continuously optimize the user experience and flow to keep sites fast.

1. The Art of Staying Fast
@jeroentjepkema
Emerce Conversion 2014

2. Speed = Happy Users = Conversion

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

4. Design vs. Speed?

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

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

7. Trouble is stickyness?
Gum/Shoe
The problem lies in stickyness

8. Design = User Experience
+ Performance

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

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

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

12. “Both offline and online consumers associate long
wait times with poor customer service, however
online consumers often lack context for delays”

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

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

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

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

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

20. Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

21. 0:00 sec.
Conversation
starts
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

22. 2.5 sec.
First reply
0:00 sec.
Conversation
starts
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

23. 2.5 sec.
First reply
0:00 sec.
Conversation
starts
4.5 sec.
Finish
conversation
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

24. 2.5 sec.
First reply
0:00 sec.
Conversation
starts
4.5 sec.
Finish
conversation
Comfort zone Tolerated Frustrated
Time to first
paint
Time to interact
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)

25. Not just one page, optimize the entire customer journey:
Flow state

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

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

28. How?

29. Balance your content vs. performance

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

31. Above the fold?

32. Which priority?

33. Improving which metrics?

34. Mobile Advertising

35. N = 15
Q = Flow vs. Intrusive. Can you remember the advertiser/brand?
Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive Flipboard: Flow

36. Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive Flipboard: Flow
Flow Intrusive
If you had to choose? 85% 15%
Do you remember brand? 40% 10%
N = 15
Q = Flow vs. Intrusive. Can you remember the advertiser/brand?

37. Why do we need that Carousel?

39. Priority 1

40. Priority 1
Priority 2

41. Priority 1
Priority 2
Priority 3

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

43. 90% of all mobile optimized Twinkle100
sites loads menu before actual content

44. Design for speed...

45. Put performance in your SLA

46. We meet to meet...

47. Setting up your Service Level

48. A practical (and easy DIY) example:

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

50. Repeatable, End-User focused & Quantifiable

51. Measuring the right performance data

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

53. 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
85% of all performance issues are
front-end related
Application Delivery Chain

54. Measuring performance?

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

56. 2 ways of measuring performance...

57. Synthetic
Monitoring

58. Simulate business transactions

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

60. Real User
Monitoring

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

62. Or try
Soasta “Lite”
http://bit.ly/I5ngs8

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

64. One truth to rule them all...

65. Performance baseline

66. Establish a baseline:

67. A pre-defined set of metrics
Establish a baseline:

68. A pre-defined set of metrics
that describes normal behavior
Establish a baseline:

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

70. and to be comparable within historic context
A pre-defined set of metrics
that describes normal behavior
in order to detect variancies
Establish a baseline:

71. A performance baseline...

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

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

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

75. End User focused

76. Helps Create a common language
between business and IT

77. 99% 99minvs.
Metric: Availability
With understandable targets

78. Targets for conversion...

79. Some 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

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

81. “Our customers are not marketing”

82. Questions so far?

83. The Art of Staying Fast

84. 1. Start with performance when designing
The Art of Staying Fast

85. The Art of Staying Fast
1. Start with performance when designing
2. Measure your (service level) targets

86. The Art of Staying Fast
1. Start with performance when designing
2. Measure your (service level) targets
3. Optimize for your end-user

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