MeasureWorks - Regionale Webwinkeldagen - 7 performance strategy tips you should care aboutl

688 views

Published on

My slides from my session @ Regionale Webwinkeldagen... 7 performance strategy tips you should care about

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
688
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MeasureWorks - Regionale Webwinkeldagen - 7 performance strategy tips you should care aboutl

  1. 1. @jeroentjepkemaPerformance :: Analytics :: Optimization
  2. 2. Performance strategy:7 performance tips you should care about... Regionale Webwinkeldagen, November 22, 2012
  3. 3. Online Analytics
  4. 4. Every website has goals
  5. 5. Organic Search Campaigns Ad Network Transactional site Visitor Offer €" Abondenment) Upselling Reach Purchase step 1 €" Purchase step 2 €" Mailing, alerts, €" promotions Conversion €"Disengagement) Enrolment Impact)on)site) €" Negative €" Positive
  6. 6. €" Media site Enrolment Targeted €" embedded add Add Network Visitor €" €" Advertiser siteDeparture( Impact(on(site( €" Negative €" Positive
  7. 7. Analytics is the measurement of movement towards the goals
  8. 8. A simple analytics model A$enon" Engagement( Conversion( NEW VISITORS GROWTH CONVERSION SEARCHES RATE PAGES TIME TWEETS MENTIONS NUMBER OF VISITS PER VISIT ON SITE x" ADS SEEN ORDER LOSS VALUE BOUNCE RATE
  9. 9. But, look closer...
  10. 10. Why did customers drop off?‣Price‣Functional errors?‣Performance issues?
  11. 11. Why did customers drop off?‣Price‣Functional errors?‣Performance issues? What’s the business impact? ‣Lost customers? ‣Revenue risked? ‣In Euros?
  12. 12. What we need is context!
  13. 13. Complete Web Monitoring
  14. 14. Web Analytics(what did they do on the site?) Complete Web Monitoring
  15. 15. Web Analytics Usability(what did they do on (how did they the site?) interact with it?) Complete Web Monitoring
  16. 16. Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring
  17. 17. Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring VoC (what were their motivations?)
  18. 18. Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring VoC Social Media (what were their (what were they motivations?) saying?)
  19. 19. Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring VoC Social Media Competition (what were their (what were they (what are they up motivations?) saying?) to?)
  20. 20. “Hard” data Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring VoC Social Media Competition (what were their (what were they (what are they up motivations?) saying?) to?) “Soft” data
  21. 21. “Hard” data Web Analytics Usability Performance(what did they do on (how did they (could they do what the site?) interact with it?) they wanted to?) Complete Web Monitoring VoC Social Media Competition (what were their (what were they (what are they up motivations?) saying?) to?) Source: Complete Web Monitoring, Sean Power/Alistair Croll, 2009 “Soft” data
  22. 22. Why performance matters...
  23. 23. How fast does it need to be? 5 4 3 2 1 0 Desktop Tablet Mobile Source: Strangeloopnetworks.com: Engaging the tablet user; What to expect from web sites?
  24. 24. Would you retry?0x 1x 2x 3x 4x6% 24% 46% 17% 7% Source: Compuware: Engaging the tablet user; What to expect from web sites?
  25. 25. Less likely to visit site again 49% Visit competitor? 46% Brand impact? 28% Tell others? 21%Contact Customer Service? 16% Loyalty? Source: Compuware: Engaging the tablet user; What to expect from web sites?
  26. 26. Study conducted by MeasureWorks & idr1, Emerce, 2012 Dutch eRetail100 Dutch eTravel30 Dutch eFinance50 4% 6% 12%Social sentiment
  27. 27. How we perceive performance...
  28. 28. “ Flow ”is an “optimal experience” that is“intrinsically enjoyable”
  29. 29. Globe Neckermann SunwebD-reizen Arke Rendering a homepage
  30. 30. Sunweb D-reizen Arke Globe Neckermann 4,3 3,1 2,8 2,05 1,45 Start renderStart page Homepage Sun Detailed Page Booking Page
  31. 31. Sunweb D-reizen Arke Globe Neckermann 5,25 5,05 4,9 4,9 4,9 4,8 4,6 4,3 4,2 3,1 2,8 2,8 2,9 2,3 2,4 2,05 2,1 1,9 1,9 1,45 Start renderHome page Landingpage Sun Detailed Page Booking Page
  32. 32. Myth busted?
  33. 33. Perceived Technology1 Sunweb Sunweb2 D-reizen Globe3 Neckermann Neckermann4 Arke D-reizen5 Globe Arke Busted? Study conducted by MeasureWorks, Emerce, eTravel 2012
  34. 34. Perceived Technology1 Sunweb Sunweb2 D-reizen Globe3 Neckermann Arke4 Arke D-reizen5 Globe NeckermannConfirmed? Study conducted by MeasureWorks, Emerce, eTravel 2012
  35. 35. Business issue
  36. 36. Performance strategy:7 performance tips you should care about
  37. 37. 1. Determine what matters most?
  38. 38. Look into your web analytics tool...
  39. 39. Find your goals
  40. 40. Organic Search Campaigns Ad Network Transactional site Visitor Offer €" Abondenment) Upselling Reach Purchase step 1 €" Purchase step 2 €" Mailing, alerts, €" promotions Conversion €" Disengagement) Enrolment Impact)on)site) €" Negative €" PositiveGoals = Customer journeys
  41. 41. Select your top customer journeys
  42. 42. 2. Define how fast it needs to be?
  43. 43. Establishing a baseline:
  44. 44. Establishing a baseline: A pre-defined set of metrics
  45. 45. Establishing a baseline: A pre-defined set of metrics that describes normal behavior
  46. 46. Establishing a baseline: A pre-defined set of metrics that describes normal behavior in order to detect variancies
  47. 47. Establishing a baseline: A pre-defined set of metrics that describes normal behavior in order to detect variancies and to be comparable within historic context
  48. 48. Example...
  49. 49. Purchasing a book, Customer journeymust be completed (speed), Metric: Speedwhere every page loads under 4 sec., Target: Secusing IE8 and higher, User scenariofrom any location in the Netherlands, User locationsfor 95% of all users, Percentileevery day between 6am and 12pm, Windowmeasured with Real User Monitoring. Collection type Source: Metrics 101, Velocityconf 2010
  50. 50. Repeat this for every customer journey defined...
  51. 51. 3. Collecting performance data
  52. 52. (CLOUD) DATA CENTER INTERNAL USERS INTERNET CUSTOMERS Third-party/ Cloud Services Storage DB Servers Web Servers Major Local This is what you control... Network What you’re blamed for.. ISP Content ISP Delivery Mobile Load Networks Carriers Middleware App BalancersMainframe Servers Servers Web Performance Delivery Chain @jeroentjepkema, MeasureWorks
  53. 53. Measure End User Experience?
  54. 54. Measure End User Experience? Outside-in,from the browser perspective...
  55. 55. Performance measurement toolkit
  56. 56. SynthethicReal User Benchmark Monitoring
  57. 57. Simulate business transactions
  58. 58. Via multiple devices & browsers
  59. 59. From where multiple locations...
  60. 60. Used for error detection & Root Cause Analysis
  61. 61. Used for error detection & Root Cause Analysis
  62. 62. Used for error detection & Root Cause Analysis
  63. 63. Ultimately, synthetic monitoring shows youif your site’s working or not...
  64. 64. But, synthetic isn’t enough...
  65. 65. Synthetic heartbeat Real UsersBut, synthetic isn’t enough...
  66. 66. Real UserReal User Benchmark Monitoring
  67. 67. 1 2 3 4 As pages execute, After onload tag sendInsert tag (.js file) into Pages are requested tag collects detailed report for (mobile) web pages from browser/device performance metrics further analysis tag.js tag.js tag.js tag.js Disclaimer: There also other options like Browser RUM Datacenter RUM or navigation timing, this will not be covered in this out of the presentation
  68. 68. Gomez
  69. 69. Lognormal
  70. 70. Relies on navigation timing API, custom variables can be addedGoogle Analytics
  71. 71. Ultimately, Real User Monitoring shows you how manyusers are affected by bad performance...
  72. 72. Real Userbenchmarking
  73. 73. First view 11.349s Real usage Repeat view 4.357s
  74. 74. Webpagetest.org
  75. 75. Object level !! Optimization tips Webpagetest.org !
  76. 76. Webpagetest.org
  77. 77. Ultimately, Real User benchmarking gives you periodicinsight in real usage scenario’s...
  78. 78. Synthethic monitoring Real User Monitoring Real User benchmarking
  79. 79. Synthethic monitoring Real User Monitoring Real User benchmarking Used for...Heartbeat, runs without trafficTest specific customer journeysObject level detailsCollect detailed alerts Desktop/Mobile SiteGomezWatchmouseAlertsite Mobile AppsGomezKeynote
  80. 80. Synthethic monitoring Real User Monitoring Real User benchmarking Used for... Used for... Real usage information fromHeartbeat, runs without traffic all users!!Test specific customer journeys Trending/OptimizationObject level detail Business impactCollect detailed alerts Desktop/Mobile Site Desktop/Mobile SiteGomez GomezWatchmouse LogNormalAlertsite Google Analytics Mobile Apps Mobile AppsGomez GomezKeynote Localytics Google Analytics
  81. 81. Synthethic monitoring Real User Monitoring Real User benchmarking Used for... Used for... Used for... Real usage information from Periodic testing of user scenario’sHeartbeat, runs without traffic all users!! with real devices/bandwithTest specific customer journeys Trending/Optimization Optimization detailsObject level detail Business impact Scan competitorsCollect detailed alerts Desktop/Mobile Site Desktop/Mobile Site Desktop/Mobile SiteGomez Gomez WebpagetestWatchmouse LogNormalAlertsite Google Analytics Mobile Apps Mobile Apps Mobile AppsGomez Gomez Perfecto MobileKeynote Localytics Device Anywhere Google Analytics
  82. 82. 4. Performance across all devices used
  83. 83. Touch & Gesture
  84. 84. Example 1: DWDD - Desktop
  85. 85. Example 1: DWDD - iPad
  86. 86. Why is this important?
  87. 87. Internet Explorer 8: 3,78 sec. Firefox 4: 2,54 sec. Chrome 8: 2,54 sec. Safari 4: 2,64 sec. Measured via webpagetest.org
  88. 88. Mobile? Should we just go with our regular website?
  89. 89. IE8: 5.73 sec.Chrome: 2.54 sec. Measured with webpagetest.org
  90. 90. IE8: 5.73 sec. iPhone: 9.37 sec.Chrome: 2.54 sec. Android: 9.33 sec. Measured with webpagetest.org
  91. 91. In terms of Multi Channel Experience?
  92. 92. 9 8 7Page Load Time (sec.) 6 5 8,5 8,9 4 7,9 3 4,6 4,6 4,8 2 3,7 3,8 3,5 3 1 2,3 2 2,3 1,8 1,2 0,9 1,3 0,6 0 MoneYou ING IEX Binck Alex ABN Amro Desktop Mobile Native Multi Channel Experience
  93. 93. Some examples...
  94. 94. iPhone The good....
  95. 95. iPadiPhone The good....
  96. 96. Desktop iPadiPhone The good....
  97. 97. iPhoneThe bad....
  98. 98. iPad iPhoneThe bad....
  99. 99. iPad iPhone DesktopThe bad....
  100. 100. 5. Be ready for more visitors...
  101. 101. Goodcampaign
  102. 102. Good gonecampaign
  103. 103. Good gone BAD!campaign
  104. 104. Source: John Allspaw, Flickr.com....know what your limits are
  105. 105. Source: John Allspaw, Flickr.com Business: What do you need?....know what your limits are
  106. 106. Source: John Allspaw, Flickr.com IT: What you have left Business: What do you need?....know what your limits are
  107. 107. Source: John Allspaw, Flickr.com IT: What you have left Capacity Planning Business: What do you need?....know what your limits are
  108. 108. Web%traffic%%(Pageviews)! 1.000.000! 1.200.000! 200.000! 400.000! 600.000! 800.000! 0!Mei;09!jun;09! jul;09!aug;09!sep;09!okt;09!nov;09!dec;09!jan;10!feb;10!mrt;10!apr110!mei10!jun;10! jul;10!aug;10!sep;10!okt;10!nov;10!dec;10!Jan;11!feb;11! Max.%number%of%pageviews%per%hour%!mrt;11!apr;11! Christmas/EOY%mei;11! MAX!capacity! Safety!capacity! Traffic!Realized! Traffic!Forecast!jun;11! jul;11!aug;11!sep;11!okt;11!nov;11! Capacity planningdec;11!
  109. 109. 6. Continuous performance diet
  110. 110. Vrijuit.nl
  111. 111. Performance optimization Low hanging fruit More advanced optimization ‣ Reduce page size ‣ Non-blocking scripts ‣ Enable Gzip ‣ Optimizing images ‣ Reduce the number of roundtrips ‣ Splitting payloads ‣ Structure the page to improve ‣ Asynchronous loading rendering & download ‣ Pre-loading ‣ Enable caching ‣ Etc. ‣ Clean up & remove duplicates ‣ Minify javascript
  112. 112. Page size: 1660 Kb # requests: 89 Time to render: 1,29 sec. Document complete: 3,68 sec.Not Optimized
  113. 113. Page size: Page size: 1660 Kb 498 Kb # requests: # requests: 89 48 Time to render: Time to render: 1,29 sec. 1,10 sec. Document complete: Document complete: 3,68 sec. 1,54 sec.Not Optimized Optimized
  114. 114. 7. Correlate your (performance) data
  115. 115. What does it mean?
  116. 116. What does it mean?Why is it important?
  117. 117. What does it mean?Why is it important? Next best action?
  118. 118. Mix & Match your data...
  119. 119. Speed vs. Bounce rate119,9 90%8,8 80%7,76,6 65%5,5 70% 80% 60%4,43,3 50% 50%2,21,1 35% 0 Page 1 Page 2 Page 3 Tolerated Median Frustrated
  120. 120. Revenue risked 10.000 visitors Optimale flow Speed (s) Availability (%) Bouncerate (%) Conversie Page 1 5,5 100 70 3000 Page 2 13,0 100 75 750 Page 3 2,0 100 60 300 Page 4 3,5 88,5 5 252 10.000 visitors Actual flow Speed (s) Availability (%) Bouncerate (%) Conversie Page 1 8,0 100 75 2500 Page 2 15,5 100 80 500 Page 3 2,0 100 60 200 Page 4 8,0 88,5 5 168
  121. 121. Would you recommend me?
  122. 122. Performance vs. Sentiment
  123. 123. Ask yourself:Are we causing any slowdowns on our website?
  124. 124. Become a performance rockstar...
  125. 125. 1. Find out what is importantBecome a performance rockstar...
  126. 126. 1. Find out what is important 2. Define a performance baselineBecome a performance rockstar...
  127. 127. 1. Find out what is important 2. Define a performance baseline 3. Select the right toolsetBecome a performance rockstar...
  128. 128. 1. Find out what is important 2. Define a performance baseline 3. Select the right toolset 4. Measure across all devices usedBecome a performance rockstar...
  129. 129. 1. Find out what is important 2. Define a performance baseline 3. Select the right toolset 4. Measure across all devices used 5. Be prepared for your visitorsBecome a performance rockstar...
  130. 130. 1. Find out what is important 2. Define a performance baseline 3. Select the right toolset 4. Measure across all devices used 5. Be prepared for your visitors 6. Continuous performance dietBecome a performance rockstar...
  131. 131. 1. Find out what is important 2. Define a performance baseline 3. Select the right toolset 4. Measure across all devices used 5. Be prepared for your visitors 6. Continuous performance diet 7. Correlate, analyse, take actionBecome a performance rockstar...
  132. 132. Don’t forget, business drives experience....
  133. 133. Questions?
  134. 134. Recommended...
  135. 135. Data Visualization: Noah Iliinsky/Julie Steel: Desiging Data Visualizations - http://oreil.ly/SryQyV Mobile Strategy: Luke Wroblewski: Mobile First - http://bit.ly/UTFo6T Online Analytics: Alistair Croll/Sean Power: Complete Web Monitoring - http://oreil.ly/WktuE7 Join a Web Performance meetup: Go to www.meetup.com and search for web performance.For Netherlands go to http://www.meetup.com/Dutch-Web-Operations-Meetup/
  136. 136. Thanks! More questions?M: jtjepkema@measureworks.nlT: @jeroentjepkemaW: www.measureworks.nl

×