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

1. Fast Fashion…
How Missguided revolutionised their
approach to site performance
Mark Leach, Missguided
Andy Davies, Eggplant
DeltaV Conf, May 2018

2. Mark Leach
Missguided
@AndyDavies
Eggplant

4. **** ****

7. *****

8. In the beginning…

9. Conversions
What if we improved our sites speed

11. April 2017
Android MedianiOS Median

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

13. The early fixes

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

15. Browser
downloads fonts
before render tree is built
=
faster rendering

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

17. Optimizely was very chatty

18. June 2017
Android MedianiOS Median

19. Summer 2017
Proving the value of performance

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

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

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

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

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

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

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

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

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

36. Nothing
stays still in
retail!

37. -4s

38. £+26%
(Baselined against other platforms

39. August 2017
Android MedianiOS Median

40. https://www.flickr.com/photos/rs_butner/7505567608

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

43. Assembled a performance team
https://www.flickr.com/photos/soldiersmediacenter/7112630285

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

45. https://www.flickr.com/photos/poetatum/3457696479
No magic go faster button

46. https://www.flickr.com/photos/colleenmorgan/2721589361
“Frontend Performance Archaeology”
Katie Sylor-Miller

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

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

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

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

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

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

54. https://www.flickr.com/photos/derekbruff/9759290413
There were a few bumps along the way

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

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

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

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

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

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

62. So where are we now?

63. April 2017
Android MedianiOS Median

64. June 2017
Android MedianiOS Median

65. August 2017
Android MedianiOS Median

66. April 2018 – HUGE improvement over 12 months

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

68. What did we learn?

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

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

71. Perseverance Pays

72. Where next?

73. Add performance monitoring to build process

74. Further Optimizely improvements
Move experiments into React front-end and use
Optimizely for feature flags

75. Did we make it to 3 seconds?

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

77. Thank You!
https://www.slideshare.net/andydavies