Slides from my talk at WebPerfDays Amsterdam, Nov 2018 on how Misguided improved the speed of their website and some of he business gains

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 (& minification)
Images optimised using a specialised service
Responsive images
Bundling assets

9. The early fixes

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

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. 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. 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. 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. 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 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.flickr.com/photos/rs_butner/7505567608

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

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

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

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

41. https://www.flickr.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 Hotfixes)
Stripped out duplicate plugins, experiments for other
environments, and expired ones

48. https://www.flickr.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