O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

MeasureWorks - Windesheim Almere - Why Performance matters?

35.500 visualizações

Publicada em

Slides from my session for the marketing students at Windesheim College. About why performance matters to your end user, how to measure performance and what to look for when optimizing performance of your website...

Publicada em: Tecnologia
  • Do This Simple 2-Minute Ritual To Loss 1 Pound Of Belly Fat Every 72 Hours ♥♥♥ http://ishbv.com/bkfitness3/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • In only two weeks I stopped my hair loss using a homemade recipe I created. And you can do the same. ➤➤ https://bit.ly/2N8ZrEt
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Is it possible to improve your memory? How can I improve my memory recall? more info... ◆◆◆ https://bit.ly/2GEWG9T
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Odd carb trick burns up to 1LB per DAY.. How?? ..  http://t.cn/AiYhcYmI
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • How I Cured My Acne? Life-long Sufferer Discovers Powerful Secret To Acne Free Skin ■■■ http://ishbv.com/buk028959/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

MeasureWorks - Windesheim Almere - Why Performance matters?

  1. @jeroentjepkema Windesheim Almere Why Performance Matters?
  2. Slides: bit.ly/MW-WHA15
  3. Performance? Why should we care?
  4. #mobilegeddon
  5. April 2015
  6. December 2015?
  7. Slow impacts design
  8. 0 25 50 75 100 1 2 3 4 5 Slow Average Fast %ofrespondentsthatratedtheactualwebsitespeed Design score (1=bad - 5=beautiful)
  9. When users experienced a slow website, 60% of them rated design lower
  10. (bad) Performance triggers emotions
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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%)
  17. ...Conversion Impact Score
  18. 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% 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 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. 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
  21. 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
  22. On average a fast experience converts up to 70% higher...
  23. Yet, in reality...
  24. ...this is a familiar sight ;-(
  25. Presented by MeasureWorks & Philips at ShoppingToday 2013, reference: http://bit.ly/MW-ST2013
  26. “You’re more likely to miss stuff just because it takes a long time to scroll down the page” ~ User 56A on the MeetHue.com website Presented by MeasureWorks & Philips at ShoppingToday 2013, reference: http://bit.ly/MW-ST2013
  27. Presented by MeasureWorks & Philips at ShoppingToday 2013, reference: http://bit.ly/MW-ST2013
  28. “Your getting blamed for things that are not your fault” Presented by MeasureWorks & Philips at ShoppingToday 2013, reference: http://bit.ly/MW-ST2013
  29. WHAT happened here?
  30. the WAITING experience Source: Jakob Nielsen
  31. 0 0,5 Visual confirmation Source: Jakob Nielsen the WAITING experience
  32. 0 0,5 1,5 Visual confirmation Understand Navigation Source: Jakob Nielsen the WAITING experience
  33. 0 0,5 1,5 3 Visual confirmation Understand Navigation Relevant Content? Source: Jakob Nielsen the WAITING experience
  34. 0 0,5 1,5 3 10 Visual confirmation Understand Navigation Relevant Content? Bye Bye! Source: Jakob Nielsen the WAITING experience
  35. Offline vs. Online
  36. “Both offline and online consumers associate slow performance with poor customer service”
  37. Click away slidePerformance tolerance?
  38. 0 10 20 30 40 50 60 70 80 90 100 0 1 2 3 4 5 6 7 8 9 10 Bouncerate per pagetype/session Bouncerate(%) Page load time (sec.) Median Campaign Product search Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
  39. 0 10 20 30 40 50 60 70 80 90 100 0 1 2 3 4 5 6 7 8 9 10 Bouncerate(%) Page load time (sec.) Median Campaign Product search Bouncerate per pagetype/session Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum
  40. Queuing for iPhone6 launch - London 2014 Purpose vs. Context
  41. Online users often lack context for delays...
  42. ...and see no other option than to click away
  43. For many, Performance is like the gym...
  44. There’s always an excuse ;-(
  45. Measuring Performance?
  46. Three simple performance checks
  47. actionable, non-technical, End User Focused
  48. Speed
  49. How fast am I?
  50. 55 go to http://webpagetest.org
  51. 56 www.example.com select location select browser Set connection speed Create video
  52. 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/
  53. 58 http://www.digitalmarketinglive.nl
  54. 0 5.0 10.0 15.0 20.0 IE10 Chrome Firefox Safari iOS Android Page load time per browser type (sec.) Backend First Paint Page Load time Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  55. Visual Comparison
  56. 61
  57. > Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  58. Compared to the competition?
  59. Performance influence cycle Search/Orientation phase Perception of experience 1 http://benchmark.measureworks.nl
  60. Delivered experience Your website 3 5 2 Stimulate content/ conversion 4 Performance influence cycle Search/Orientation phase Perception of experience 1 http://benchmark.measureworks.nl
  61. No permission needed...
  62. 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))
  63. Or the easy way: http://benchmark.measureworks.nl
  64. Responsive web?
  65. http://whatismyscreenresolution.com
  66. Do you trust your third parties?
  67. 4.3 sec 22.1 sec Source: webpagetest.org
  68. Source: requestmap.webperf.tools
  69. Source: requestmap.webperf.tools
  70. + conversion
  71. 3 types of data: Which pages are clicked on? How fast is it on every device? Which elements do they click on?
  72. Real User monitoring
  73. 1 Insert tag (.js file) into (mobile) web pages Pages are requested from browser/device As pages execute, tag collects performance metrics After onload tag send detailed report for further analysis tag.js tag.js tag.js tag.js 2 3 4
  74. Relies on navigation timing API, custom variables can be added Turn on “Site Speed” in your GA account! http://bit.ly/1ivGWTt
  75. Or try Soasta “Lite” http://bit.ly/I5ngs8
  76. Holy performance, Batman...
  77. Why is (nigerian) spam so badly written?
  78. Aunshul Rege of Rutgers University, USA in 2009 1000 emails 1-2 responses 1 fool and their money, parted. Bad language (0.1% conversion) Gullible (70% conversion) 1000 emails 100 responses 1 fool and their money, parted. Good language (10% conversion) Not-gullible (.07% conversion)
  79. Nigerian spammers really understand their target market and ‘customers’
  80. One Metric That Matters
  81. Every website has goals
  82. Your Analytics measures the movement towards these goals
  83. Complete Web Monitoring
  84. Complete Web Monitoring Web Analytics (what did they do on the site?)
  85. Complete Web Monitoring Web Analytics (what did they do on the site?) Usability (how did they interact with it?)
  86. Complete Web Monitoring Web Analytics (what did they do on the site?) Performance (could they do what they wanted to?) Usability (how did they interact with it?)
  87. Complete Web Monitoring Web Analytics (what did they do on the site?) Performance (could they do what they wanted to?) VoC (what were their motivations?) Usability (how did they interact with it?)
  88. Complete Web Monitoring Web Analytics (what did they do on the site?) Competition (what are they up to?) Performance (could they do what they wanted to?) VoC (what were their motivations?) Usability (how did they interact with it?)
  89. Complete Web Monitoring Web Analytics (what did they do on the site?) Competition (what are they up to?) Performance (could they do what they wanted to?) VoC (what were their motivations?) Usability (how did they interact with it?) Social Media (what were they saying?)
  90. Complete Web Monitoring Web Analytics (what did they do on the site?) Competition (what are they up to?) Performance (could they do what they wanted to?) VoC (what were their motivations?) Usability (how did they interact with it?) Social Media (what were they saying?) “Soft” data “Hard” data
  91. Some fundamentals
  92. X A simple online business model: Marketing Conversion Optimization Revenue New visitors Bounce rate Conversion rate Order value Growth Loss Time on site Pages per visit Number of visits Search Tweets Mentions ADs seen
  93. Context!
  94. Checkout Visits Shopping cart Payment options
  95. Amplify your message
  96. Checkout Visits Shopping cart Payment options Unpaid search Social mentions Email campaign Banner ads Generate traffic to website
  97. Don’t trust your data, analyse it
  98. 9 followers 9 reach 4 followers 16 reach
  99. 9 followers 9 reach 4 followers 16 reach
  100. Checkout Visits Shopping cart Payment options Unpaid search Social mentions Email campaign Banner ads Generate traffic to website
  101. Just imagine if data tells you how to influence your visitors?
  102. Spread your message...
  103. ...influence your followers...
  104. ...go viral
  105. Conversions Visits Shopping cart Payment options Impressions Spread Seed Higher likelihood of conversion Generate traffic to website
  106. Importance of correlation vs. causation
  107. 1 10 100 1000 10000 Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec Relation between Ice cream and drownings? Ice cream consumption Drownings
  108. http://www.flickr.com/photos/25159787@N07/3766111564
  109. http://www.flickr.com/photos/25159787@N07/3766111564 1 10 100 1000 10000 Jan Feb Mar Apr May Jun Jul Aug Sept Oct Nov Dec True causality Ice cream consumption Drownings Temperature
  110. A leading, causal, connection is the analytics superpower...
  111. That’s why we pick one at at time...
  112. ‣ A Facebook user reaching 7 friends within 10 days of signing up (Chamath Palihapitiya) ‣ A Dropbox user who puts at least one file in one folder on one device (ChenLi Wang) ‣ Twitter user following a certain number of people, and a certain percentage of those people following the user back (Josh Elman) ‣ A LinkedIn user getting to X connections in Y days (Elliot Schmukler) Some examples (From the 2012 Growth Hacking conference. http://growthhackersconference.com/)
  113. A wealth of information creates a poverty of attention... (Computers, Communications and the Public Interest, pages 40-41, Martin Greenberger, ed., The Johns Hopkins Press, 1971.)Herbert Simon
  114. Focus on the desired behavior, not just the information. http://www.psychologytoday.com/blog/yes/200808/changing-minds-and-changing-towels 26% increase in towel re-use with an appeal to social norms; 33% increase when tied to the specific room.
  115. Validating experiments: B.R.A.S.S. framework
  116. Blink Relevance Availability Scalability Sum
  117. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it
  118. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive?
  119. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive?
  120. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive? How scalable is this channel? Can we easily increase it? Law of diminishing returns
  121. Blink Relevance Availability Scalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive? How scalable is this channel? Can we easily increase it? Law of diminishing returns 1-5 1-5 1-5 1-5 BRASS score
  122. bit.ly/brassframework
  123. Optimizing Performance?
  124. The Skip: http://musicmachinery.com/2014/05/02/the-skip/
  125. “Hit them with a beat! The decision to continue listening to a song is often determined in the first 10 seconds” - Dr. Dre, Source Magazine The Skip: http://musicmachinery.com/2014/05/02/the-skip/
  126. Current state of responsive web ;-(
  127. WiFi 3G Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  128. 6 must haves for happy customers (again)...
  129. 1. Perception is KEY!
  130. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
  131. http://answers.yahoo.com/question/index?qid=1005081200005
  132. nytimes.com/2004/02/27/nyregion/27BUTT.html
  133. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  134. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  135. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  136. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  137. “The faster you can visualize your content, the more engaged your visitors will become”
  138. 2. Understand & Prioritize your feature content
  139. Defer non-feature content
  140. 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/
  141. Yet, 83% of all Twinkle100 sites loads menu before feature content...
  142. “The faster you can paint your feature content, the more engaged your visitors will become”
  143. Avoid (too much) Sequencing
  144. “Provide your users the time to understand navigation as they often overlook things that change too fast and/or often”
  145. www.example.com
  146. Homepage Search Product overview Product Detail Basket
  147. Homepage Search Product overview Product Detail Basket
  148. Homepage Search Product overview Product Detail Basket Understand navigation (1-2 sec.) Consistent navigation (0,5-1 sec.) Renew your orientation (1-2 sec.) renew your navigation (1-2 sec.) Consistent navigation (0,5-1 sec.)
  149. Consistent, simple & user generated navigation
  150. Use speed to increase perceived value
  151. Homepage Search Product overview Product Detail Payment Tolerated speed
  152. Fast response = Fast Experience?
  153. 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
  154. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
  155. http://blog.placeit.net/ux-tactics-make-slow-things-seem-faster/
  156. Show effort, provide specific content, build trust
  157. 3. Set your performance budget
  158. 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
  159. Example performance budget...
  160. 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...
  161. A practical (and easy DIY) example:
  162. Service Window Purchasing a bed, must be completed (speed), where every page loads under 3 sec., from any location in the Netherlands, for 95% of all users, every 5 minutes between 6am and 12pm, using IE9 and higher, Customer journey Metric: Speed Target: Sec User scenario User locations Percentile measured with Synthetic Monitoring. Monitoring type Business Performance
  163. 4. How fast is your (front-end) code?
  164. Anatomy of a web page Anatomy of a web page
  165. 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
  166. Introducing the waterfall chart
  167. See also: 90 minute optimization cycle, Strangeloop, Velocity 2012
  168. HTML See also: 90 minute optimization cycle, Strangeloop, Velocity 2012
  169. HTML Resources See also: 90 minute optimization cycle, Strangeloop, Velocity 2012
  170. HTML Resources Start Render See also: 90 minute optimization cycle, Strangeloop, Velocity 2012
  171. HTML Resources Start Render Document Complete See also: 90 minute optimization cycle, Strangeloop, Velocity 2012
  172. Waterfall technique a.k.a. show me where it hurts
  173. Code Green: Time to first byte?
  174. Code Orange: Too many connections
  175. 106 Connections (almost one per request)
  176. Code Blue: Too many bytes (page bloat)
  177. 199
  178. Code Grey: Bad repeat view
  179. First view Repeat view
  180. Why is this important?
  181. Why is this important? 85-90% of all slowdowns are caused by your front-end code...
  182. 5. Fast enough? Then test for peak traffic
  183. Load/Performance testing: Measure performance under both normal and peak volumes to discover how your application behaves under stress
  184. Find your ceilings in time to fix them... The End Current state
  185. 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...
  186. Your marketing campaign must never be a suprise for your site...
  187. 6. Don’t forget? Optimize for Mobile
  188. Let the device work...
  189. Make life easy, insert touch events...
  190. Search
  191. Touch gestures
  192. Native gestures
  193. Scrolling
  194. 7. Repeat, repeat, repeat...
  195. It’s a process. Integrate the performance budget in your continuous delivery cycle
  196. 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
  197. Performance is a team sport...
  198. 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.
  199. ...Use performance as a business metrics to make it stick
  200. Questions so far?
  201. Always remember this...
  202. Performance = Happy users
  203. Performance = Reducing Complexity
  204. Frictionless = Recognizable navigation
  205. Frictionless = Fast delivery
  206. You owe it to your customers...
  207. Something to read...
  208. Thanks! More questions? M: jeroen@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-WHA15

×