MeasureWorks - The Art of Staying Fast

13,615 views

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
13,615
On SlideShare
0
From Embeds
0
Number of Embeds
656
Actions
Shares
0
Downloads
0
Comments
3
Likes
53
Embeds 0
No embeds

No notes for slide

MeasureWorks - The Art of Staying 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
  14. “Speed is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
  15. 1 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate...
  16. 1 3 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate... Mmm, shall I click away?
  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. Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  19. 0:00 sec. Conversation starts Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  20. 2.5 sec. First reply 0:00 sec. Conversation starts Tested on Android with webpagetest.org (3G (2000Kbps Down, 764Kbps Up)
  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. 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. Not just one page, optimize the entire customer journey: Flow state
  24. Provide relevant content to support task completion...
  25. ...deliver it fast, focus on perception!
  26. How?
  27. Balance your content vs. performance
  28. 3 (performance) design questions to ask...
  29. Above the fold?
  30. Which priority?
  31. Improving which metrics?
  32. Mobile Advertising
  33. N = 15 Q = Flow vs. Intrusive. Can you remember the advertiser/brand? Telegraaf: Intrusive Nu.nl: Flow Dumpert: Intrusive Flipboard: Flow
  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. Why do we need that Carousel?
  36. Priority 1
  37. Priority 1 Priority 2
  38. Priority 1 Priority 2 Priority 3
  39. Priority? Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)
  40. 90% of all mobile optimized Twinkle100 sites loads menu before actual content
  41. Design for speed...
  42. Put performance in your SLA
  43. We meet to meet...
  44. Setting up your Service Level
  45. A practical (and easy DIY) example:
  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. Repeatable, End-User focused & Quantifiable
  48. Measuring the right performance data
  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. 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. Measuring performance?
  52. Measuring performance? Always outside- in, from the browser perspective...
  53. 2 ways of measuring performance...
  54. Synthetic Monitoring
  55. Simulate business transactions
  56. Ultimately, synthetic monitoring shows you if your site’s working or not... (best used for operations and service reports)
  57. Real User Monitoring
  58. Relies on navigation timing API, custom variables can be added Turn on “Site Speed” in your GA account! http://bit.ly/1ivGWTt
  59. Or try Soasta “Lite” http://bit.ly/I5ngs8
  60. Ultimately, Real User Monitoring shows you how many users are affected by bad performance... (best used for capacity management and conversion optimization)
  61. One truth to rule them all...
  62. Performance baseline
  63. Establish a baseline:
  64. A pre-defined set of metrics Establish a baseline:
  65. A pre-defined set of metrics that describes normal behavior Establish a baseline:
  66. A pre-defined set of metrics that describes normal behavior in order to detect variancies Establish a baseline:
  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. A performance baseline...
  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. 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. “Every release should be better or equal to previous version”
  72. End User focused
  73. Helps Create a common language between business and IT
  74. 99% 99minvs. Metric: Availability With understandable targets
  75. Targets for conversion...
  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. What’s your time to first tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom
  78. “Our customers are not marketing”
  79. Questions so far?
  80. The Art of Staying Fast
  81. 1. Start with performance when designing The Art of Staying Fast
  82. The Art of Staying Fast 1. Start with performance when designing 2. Measure your (service level) targets
  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. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-CONV14

×