The Art of Staying Fast
@jeroentjepkema
Emerce Conversion 2014
Speed = Happy Users = Conversion
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...
Design vs. Speed?
0
25
50
75
100
1 2 3 4 5
Slow Average Fast
%ofrespondentsthatratedtheactualwebsitespeed
Design score (1=bad - 5=beautiful)...
So... why doesn’t everybody have a
fast website?
Trouble is stickyness?
Gum/Shoe
The problem lies in stickyness
Design = User Experience
+ Performance
http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
nytimes.com/2004/02/27/nyregion/27BUTT.html
http://answers.yahoo.com/question/index?qid=1005081200005
“Both offline and online consumers associate long
wait times with poor customer service, however
online consumers often lac...
http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
“Speed is at it’s best when it creates the feeling
that you don’t have to work to achieve your goal”
1
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...
1
3
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...
Mmm, shall I click away?
10
1
3
0,3
Instantaneous: I like it!
Interaction: Let’s conversate...
Mmm, shall I click away?
Only if the task/content is...
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
0:00 sec.
Conversation
starts
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
2.5 sec.
First reply
0:00 sec.
Conversation
starts
Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
2.5 sec.
First reply
0:00 sec.
Conversation
starts
4.5 sec.
Finish
conversation
Tested on Android with webpagetest.org (3G...
2.5 sec.
First reply
0:00 sec.
Conversation
starts
4.5 sec.
Finish
conversation
Comfort zone Tolerated Frustrated
Time to ...
Not just one page, optimize the entire customer journey:
Flow state
Provide relevant content to
support task completion...
...deliver it fast, focus on perception!
How?
Balance your content vs. performance
3 (performance) design questions to ask...
Above the fold?
Which priority?
Improving which metrics?
Mobile Advertising
N = 15
Q = Flow vs. Intrusive. Can you remember the advertiser/brand?
Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive ...
Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive Flipboard: Flow
Flow Intrusive
If you had to choose? 85% 15%
Do you re...
Why do we need that Carousel?
Priority 1
Priority 1
Priority 2
Priority 1
Priority 2
Priority 3
Priority?
Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)
90% of all mobile optimized Twinkle100
sites loads menu before actual content
Design for speed...
Put performance in your SLA
We meet to meet...
Setting up your Service Level
A practical (and easy DIY) example:
Purchasing a book,
must be completed (speed),
where every page loads under 3 sec.,
from any location in the Netherlands,
f...
Repeatable, End-User focused & Quantifiable
Measuring the right performance data
INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USER...
INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USER...
Measuring performance?
Measuring performance? Always outside-
in, from the browser perspective...
2 ways of measuring performance...
Synthetic
Monitoring
Simulate business transactions
Ultimately, synthetic monitoring shows you if your
site’s working or not...
(best used for operations and service reports)
Real User
Monitoring
Relies on navigation timing API, custom variables can be added
Turn on
“Site Speed”
in your GA
account!
http://bit.ly/1ivG...
Or try
Soasta “Lite”
http://bit.ly/I5ngs8
Ultimately, Real User Monitoring shows you how many
users are affected by bad performance...
(best used for capacity manag...
One truth to rule them all...
Performance baseline
Establish a baseline:
A pre-defined set of metrics
Establish a baseline:
A pre-defined set of metrics
that describes normal behavior
Establish a baseline:
A pre-defined set of metrics
that describes normal behavior
in order to detect variancies
Establish a baseline:
and to be comparable within historic context
A pre-defined set of metrics
that describes normal behavior
in order to detect...
A performance baseline...
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
...
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-Bounce...
“Every release should be better or
equal to previous version”
End User focused
Helps Create a common language
between business and IT
99% 99minvs.
Metric: Availability
With understandable targets
Targets for conversion...
Some metrics to target for:
Perception
Actionable
Flow
Time to first paint 0.5 - 1 sec.
Time to interact: 1-3 sec
Variation...
What’s your time to first tweet?
https://blog.twitter.com/2012/improving-performance-on-twittercom
“Our customers are not marketing”
Questions so far?
The Art of Staying Fast
1. Start with performance when designing
The Art of Staying Fast
The Art of Staying Fast
1. Start with performance when designing
2. Measure your (service level) targets
The Art of Staying Fast
1. Start with performance when designing
2. Measure your (service level) targets
3. Optimize for y...
Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
View slides: bit.ly/MW-CONV...
MeasureWorks - The Art of Staying Fast
MeasureWorks - The Art of Staying Fast
MeasureWorks - The Art of Staying Fast
Upcoming SlideShare
Loading in...5
×

MeasureWorks - The Art of Staying Fast

8,007

Published on

Slides from my talk at Emerce Conversion 14. Talk is about how to keep your website fast every release of your application...

Published in: Internet
3 Comments
53 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,007
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
3
Likes
53
Embeds 0
No embeds

No notes for slide

MeasureWorks - The Art of Staying Fast

  1. 1. The Art of Staying Fast @jeroentjepkema Emerce Conversion 2014
  2. 2. Speed = Happy Users = Conversion
  3. 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. 4. Design vs. Speed?
  5. 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. 6. So... why doesn’t everybody have a fast website?
  7. 7. Trouble is stickyness? Gum/Shoe The problem lies in stickyness
  8. 8. Design = User Experience + Performance
  9. 9. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
  10. 10. nytimes.com/2004/02/27/nyregion/27BUTT.html
  11. 11. http://answers.yahoo.com/question/index?qid=1005081200005
  12. 12. “Both offline and online consumers associate long wait times with poor customer service, however online consumers often lack context for delays”
  13. 13. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
  14. 14. “Speed is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
  15. 15. 1 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate...
  16. 16. 1 3 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate... Mmm, shall I click away?
  17. 17. 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
  18. 18. Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  19. 19. 0:00 sec. Conversation starts Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  20. 20. 2.5 sec. First reply 0:00 sec. Conversation starts Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  21. 21. 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)
  22. 22. 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)
  23. 23. Not just one page, optimize the entire customer journey: Flow state
  24. 24. Provide relevant content to support task completion...
  25. 25. ...deliver it fast, focus on perception!
  26. 26. How?
  27. 27. Balance your content vs. performance
  28. 28. 3 (performance) design questions to ask...
  29. 29. Above the fold?
  30. 30. Which priority?
  31. 31. Improving which metrics?
  32. 32. Mobile Advertising
  33. 33. N = 15 Q = Flow vs. Intrusive. Can you remember the advertiser/brand? Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive Flipboard: Flow
  34. 34. 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?
  35. 35. Why do we need that Carousel?
  36. 36. Priority 1
  37. 37. Priority 1 Priority 2
  38. 38. Priority 1 Priority 2 Priority 3
  39. 39. Priority? Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)
  40. 40. 90% of all mobile optimized Twinkle100 sites loads menu before actual content
  41. 41. Design for speed...
  42. 42. Put performance in your SLA
  43. 43. We meet to meet...
  44. 44. Setting up your Service Level
  45. 45. A practical (and easy DIY) example:
  46. 46. 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
  47. 47. Repeatable, End-User focused & Quantifiable
  48. 48. Measuring the right performance data
  49. 49. 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
  50. 50. 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
  51. 51. Measuring performance?
  52. 52. Measuring performance? Always outside- in, from the browser perspective...
  53. 53. 2 ways of measuring performance...
  54. 54. Synthetic Monitoring
  55. 55. Simulate business transactions
  56. 56. Ultimately, synthetic monitoring shows you if your site’s working or not... (best used for operations and service reports)
  57. 57. Real User Monitoring
  58. 58. Relies on navigation timing API, custom variables can be added Turn on “Site Speed” in your GA account! http://bit.ly/1ivGWTt
  59. 59. Or try Soasta “Lite” http://bit.ly/I5ngs8
  60. 60. Ultimately, Real User Monitoring shows you how many users are affected by bad performance... (best used for capacity management and conversion optimization)
  61. 61. One truth to rule them all...
  62. 62. Performance baseline
  63. 63. Establish a baseline:
  64. 64. A pre-defined set of metrics Establish a baseline:
  65. 65. A pre-defined set of metrics that describes normal behavior Establish a baseline:
  66. 66. A pre-defined set of metrics that describes normal behavior in order to detect variancies Establish a baseline:
  67. 67. 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:
  68. 68. A performance baseline...
  69. 69. 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
  70. 70. 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
  71. 71. “Every release should be better or equal to previous version”
  72. 72. End User focused
  73. 73. Helps Create a common language between business and IT
  74. 74. 99% 99minvs. Metric: Availability With understandable targets
  75. 75. Targets for conversion...
  76. 76. 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
  77. 77. What’s your time to first tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom
  78. 78. “Our customers are not marketing”
  79. 79. Questions so far?
  80. 80. The Art of Staying Fast
  81. 81. 1. Start with performance when designing The Art of Staying Fast
  82. 82. The Art of Staying Fast 1. Start with performance when designing 2. Measure your (service level) targets
  83. 83. The Art of Staying Fast 1. Start with performance when designing 2. Measure your (service level) targets 3. Optimize for your end-user
  84. 84. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-CONV14

×