Fast Fashion…
How Missguided revolutionised theirapproach to site performanceMark Leach, Missguided
Andy Davies, Eggplant
DeltaV Conf, May 2018

Mark LeachMissguided@AndyDavies
Eggplant

********

*****

In the beginning…

Conversions

What if we improved our sites speedApril 2017
iOS MedianAndroid Median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

The early fixes

Pre-loading fonts speeds up rendering<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/missguidedlight.woff2" as="font" type="font/woff2" crossorigin>

Browserdownloads fonts
before render tree is built=
faster rendering

What’s delaying rendering?

Homepage images
received but page hasn’t
started rendering yetOptimizely was very chatty

June 2017
iOS MedianAndroid MedianSummer 2017
Proving the value of performanceCustomers love reviews⭐⭐⭐⭐⭐
But some review services can havea large impact on performance

So what happens when you remove it?

Median Page Load Time (s)14Android
iOS

12
10864
20ee
W

ee
W

ee
W

ee
W

ee
W

ee
W

kkkkkk

0

1

2

3

55

So what happens when you remove it?

Median Page Load Time (s)14AndroidiOS

Removed for Android
visitors only

12
1086420ee
W

ee
W

ee
W

ee
W

ee
W

ee
Wkkkkkk012355

Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
01

234567

8

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
01234567

8

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
012345678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Effect on Android revenue

Cumulative Revenue vs Week 0

175%
150%
125%
100%
75%
50%
25%
0%
01

23

4

5678

Week 0Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 89 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 930
Week

Page Load Time (avg across session)Android revenue increased week-on-week

Cumulative Revenue vs Week 0

175%
150%

+ 56%

125%
100%
75%

Week 0Week 950%
25%
0%0123456789 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

Page Load Time (avg across session)

Nothing
stays still in
retail!

-4s

£

+26%
(Baselined against other platforms

August 2017
iOS MedianAndroid Medianhttps://www.flickr.com/photos/rs_butner/7505567608

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

Assembled a performance teamhttps://www.flickr.com/photos/soldiersmediacenter/7112630285

Focused on reducing time to useful and usable
Working?

Especially rendering
delaysUseful?

Usable?

No magic go faster button

https://www.flickr.com/photos/poetatum/3457696479

“Frontend Performance Archaeology”
Katie Sylor-Miller

https://www.flickr.com/photos/colleenmorgan/2721589361

Visualising JavaScript and CSS bundles can be agreat conversation starter

Visualising JavaScript and CSS bundles can be agreat conversation starter“How much ofthis is used?”Visualising JavaScript and CSS bundles can be agreat conversation starter“How much ofthis is used?”“Suspect we canremove this”

Visualising JavaScript and CSS bundles can be agreat conversation starter

Shrunk download size of core
script bundle by 42%(uncompressed size by 55%)

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

Cleaned up Optimizely
Switched to Optimizely to use jQuery on the pagerather than bundled version
Removed A/A tests (were being used as Hotfixes)
Stripped out duplicate plugins, experiments for otherenvironments, and expired ones

There were a few bumps along the way

https://www.flickr.com/photos/derekbruff/9759290413

picture element enables format selection<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

<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
supportjpeg2000<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<picture>
Everything else<source type="image/webp" srcset="foo.webp"><source type="image/jp2" srcset="foo.jp2"><img src="foo.jpg"></picture>

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

https://bugs.webkit.org/show_bug.cgi?id=179231

Optimizely snippet got larger (temporarily)
While switching out Optimizely’s jQuery someextensions needed to be duplicatedThis made the bundle larger and slower until themigration was completed

So where are we now?

April 2017
iOS MedianAndroid MedianJune 2017
iOS MedianAndroid MedianAugust 2017
iOS MedianAndroid MedianApril 2018 – HUGE improvement over 12 months

April 2018 – HUGE improvement over 12 months
iOS MedianAndroid MedianWhat did we learn?

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

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

Perseverance Pays

Where next?

Add performance monitoring to build process

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

Did we make it to 3 seconds?

Over May bank holiday weekend
median was just above 3.5s

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