• Like
  • Save
MeasureWorks - The Art of Staying Fast
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

MeasureWorks - The Art of Staying Fast

  • 7,539 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,539
On SlideShare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
0
Comments
3
Likes
54

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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