Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018

1,874 views

Published on

Slides detailing Missguided's journey to a faster website, how they got there and some of the results

Delivered at DeltaV Conf, London, May 2018

Published in: Technology
  • Be the first to comment

Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018

  1. 1. Fast Fashion… How Missguided revolutionised their approach to site performance Mark Leach, Missguided Andy Davies, Eggplant DeltaV Conf, May 2018
  2. 2. Mark Leach Missguided @AndyDavies Eggplant
  3. 3. **** ****
  4. 4. *****
  5. 5. In the beginning…
  6. 6. Conversions What if we improved our sites speed
  7. 7. April 2017 Android MedianiOS Median
  8. 8. Base of good practices already in place Using HTTP/2 and CDN Compression enabled for text resources (& minification) Images optimised using a specialised service Responsive images Bundling assets
  9. 9. The early fixes
  10. 10. <link rel="preload" href="https://static.missguided.co.uk/skin/ frontend/mgresponsive/default/fonts/missguided/missguided-bold.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="https://static.missguided.co.uk/skin/ frontend/mgresponsive/default/fonts/missguided/missguided- light.woff2" as="font" type="font/woff2" crossorigin> Pre-loading fonts speeds up rendering
  11. 11. Browser downloads fonts before render tree is built = faster rendering
  12. 12. Homepage images received but page hasn’t started rendering yet What’s delaying rendering?
  13. 13. Optimizely was very chatty
  14. 14. June 2017 Android MedianiOS Median
  15. 15. Summer 2017 Proving the value of performance
  16. 16. ⭐⭐⭐⭐⭐ Customers love reviews But some review services can have a large impact on performance
  17. 17. MedianPageLoadTime(s) 0 2 4 6 8 10 12 14 W eek 0 W eek 1 W eek 2 W eek 3 W eek 5 W eek 5 Android iOS So what happens when you remove it?
  18. 18. MedianPageLoadTime(s) 0 2 4 6 8 10 12 14 W eek 0 W eek 1 W eek 2 W eek 3 W eek 5 W eek 5 Android iOSRemoved for Android visitors only So what happens when you remove it?
  19. 19. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  20. 20. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  21. 21. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  22. 22. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  23. 23. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  24. 24. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  25. 25. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  26. 26. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  27. 27. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  28. 28. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Effect on Android revenue
  29. 29. 0% 25% 50% 75% 100% 125% 150% 175% 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Week 0 Week 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Android revenue increased week-on-week + 56%
  30. 30. Nothing stays still in retail!
  31. 31. -4s
  32. 32. £+26% (Baselined against other platforms
  33. 33. August 2017 Android MedianiOS Median
  34. 34. https://www.flickr.com/photos/rs_butner/7505567608
  35. 35. Winter 2017 “Can we make it to three seconds?”
  36. 36. Assembled a performance team https://www.flickr.com/photos/soldiersmediacenter/7112630285
  37. 37. Working? Useful? Usable? Focused on reducing time to useful and usable Especially rendering delays
  38. 38. https://www.flickr.com/photos/poetatum/3457696479 No magic go faster button
  39. 39. https://www.flickr.com/photos/colleenmorgan/2721589361 “Frontend Performance Archaeology” Katie Sylor-Miller
  40. 40. Visualising JavaScript and CSS bundles can be a great conversation starter
  41. 41. Visualising JavaScript and CSS bundles can be a great conversation starter “How much of this is used?”
  42. 42. Visualising JavaScript and CSS bundles can be a great conversation starter “How much of this is used?” “Suspect we can remove this”
  43. 43. Visualising JavaScript and CSS bundles can be a great conversation starter Shrunk download size of core script bundle by 42% (uncompressed size by 55%)
  44. 44. Performance Improvements were mostly dull, boring stuff Removing unused / un-needed code Removing duplicate styles Replacing social media libraries with ordinary links Moving 3rd party libraries onto Missguided domain Adding Resource Hints - preconnect, dns-prefetch Defering loading until later where possible
  45. 45. Cleaned up Optimizely Switched to Optimizely to use jQuery on the page rather than bundled version Removed A/A tests (were being used as Hotfixes) Stripped out duplicate plugins, experiments for other environments, and expired ones
  46. 46. https://www.flickr.com/photos/derekbruff/9759290413 There were a few bumps along the way
  47. 47. <picture> <source type="image/webp" srcset="foo.webp"> <source type="image/jp2" srcset="foo.jp2"> <img src="foo.jpg"> </picture> picture element enables format selection
  48. 48. <picture> <source type="image/webp" srcset="foo.webp"> <source type="image/jp2" srcset="foo.jp2"> <img src="foo.jpg"> </picture> picture element enables format selection Browsers that support webp
  49. 49. <picture> <source type="image/webp" srcset="foo.webp"> <source type="image/jp2" srcset="foo.jp2"> <img src="foo.jpg"> </picture> picture element enables format selection Browsers that support jpeg2000
  50. 50. <picture> <source type="image/webp" srcset="foo.webp"> <source type="image/jp2" srcset="foo.jp2"> <img src="foo.jpg"> </picture> picture element enables format selection Everything else
  51. 51. https://bugs.webkit.org/show_bug.cgi?id=179231 It’s a Safari pre-loader bug! The `type` attribute in <source> tags are ignored by the preloader. A common pattern is to use the <source> tag for content negotiation selection to specify webp for chrome and jp2 for safari. For example: <picture> <source type="image/webp" srcset="foo.webp"> <source type="image/jp2" srcset="foo.jp2"> <img src="foo.jpg"> </picture> However, the HTMLPreloadScanner only considers the media query when selecting (or not) the appropriate <source> element. As a result the preloader greedily selects the foo.webp and then later requests the correct foo.jpg. It should also evaluate the `type` attribute.
  52. 52. Optimizely snippet got larger (temporarily) While switching out Optimizely’s jQuery some extensions needed to be duplicated This made the bundle larger and slower until the migration was completed
  53. 53. So where are we now?
  54. 54. April 2017 Android MedianiOS Median
  55. 55. June 2017 Android MedianiOS Median
  56. 56. August 2017 Android MedianiOS Median
  57. 57. April 2018 – HUGE improvement over 12 months
  58. 58. April 2018 – HUGE improvement over 12 months Android MedianiOS Median
  59. 59. What did we learn?
  60. 60. Linking revenue increases to performance improvements is still hard… Many other factors to account for including: Pricing Promotions New brands Trends Seasonality etc.
  61. 61. Optimizely needs careful management Easy to blow-up the script size Optimizely are working on features to help They also capture performance data and will share
  62. 62. Perseverance Pays
  63. 63. Where next?
  64. 64. Add performance monitoring to build process
  65. 65. Further Optimizely improvements Move experiments into React front-end and use Optimizely for feature flags
  66. 66. Did we make it to 3 seconds?
  67. 67. Over May bank holiday weekend median was just above 3.5s
  68. 68. Thank You! https://www.slideshare.net/andydavies

×