Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018

1. Fast Fashion… How Missguided revolutionised their approach to site performance Andy Davies WebPerfDays Amsterdam, Oct 2018

2. Mark Leach @AndyDavies

4. In the beginning…

5. Conversions What if we made our site faster?

7. April 2017 Android MedianiOS Median

8. Base of good practices already in place Using HTTP/2 and CDN Compression enabled for text resources (& miniﬁcation) Images optimised using a specialised service Responsive images Bundling assets

9. The early ﬁxes

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. Browser downloads fonts before render tree is built = faster rendering

12. Homepage images received but page hasn’t started rendering yet What’s delaying rendering?

13. Optimizely was very chatty

14. June 2017 Android MedianiOS Median

15. Summer 2017 Proving the value of performance

16. ⭐⭐⭐⭐⭐ Customers love reviews But some review services can have a large impact on performance

19. 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?

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

30. 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%

31. Nothing stays still in retail!

32. -4s

33. £+26% (Baselined against other platforms

34. August 2017 Android MedianiOS Median

35. https://www.ﬂickr.com/photos/rs_butner/7505567608

37. Winter 2017 “Can we make it to three seconds?”

38. Assembled a performance team https://www.ﬂickr.com/photos/soldiersmediacenter/7112630285

39. Working? Useful? Usable? Focused on reducing time to useful and usable Especially rendering delays

40. https://www.ﬂickr.com/photos/poetatum/3457696479 No magic go faster button

41. https://www.ﬂickr.com/photos/colleenmorgan/2721589361 “Frontend Performance Archaeology” Katie Sylor-Miller

42. Visualising JavaScript and CSS bundles can be a great conversation starter

43. Visualising JavaScript and CSS bundles can be a great conversation starter “How much of this is used?” “Suspect we can remove this”

44. Visualising JavaScript and CSS bundles can be a great conversation starter Shrunk download size of core script bundle by 42% (uncompressed size by 55%)

46. 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

47. Cleaned up Optimizely Switched to Optimizely to use jQuery on the page rather than bundled version Removed A/A tests (were being used as Hotﬁxes) Stripped out duplicate plugins, experiments for other environments, and expired ones

48. https://www.ﬂickr.com/photos/derekbruff/9759290413 There were a few bumps along the way

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

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 Browsers that support webp

51. <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

52. <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

54. 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.

55. 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

56. So where are we now?

57. April 2017 Android MedianiOS Median

58. June 2017 Android MedianiOS Median

59. August 2017 Android MedianiOS Median

60. April 2018 – HUGE improvement over 12 months Android MedianiOS Median

61. What did we learn?

62. Linking revenue increases to performance improvements is still hard… Many other factors to account for including: Pricing Promotions New brands Trends Seasonality etc.

63. 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

64. Perseverance Pays

65. Did we make it to 3 seconds?

66. Over May bank holiday weekend median was just above 3.5s

67. Thank You! https://www.slideshare.net/andydavies    hello@andydavies.me

Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018

Similar to Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018 (20)

More from Andy Davies

More from Andy Davies (20)

Recently uploaded

Recently uploaded (20)

Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018