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
Mark Leach, Missguided
Andy Davies, Eggplan...
Mark Leach
Missguided
@AndyDavies
Eggplant
**** ****
*****
In the beginning…
Conversions
What if we improved our sites speed
April 2017
Android MedianiOS Median
Base of good practices already in place
Using HTTP/2 and CDN
Compression enabled for text resources (& minification)
Images...
The early fixes
<link rel="preload" href="https://static.missguided.co.uk/skin/
frontend/mgresponsive/default/fonts/missguided/missguided-...
Browser
downloads fonts
before render tree is built
=
faster rendering
Homepage images
received but page hasn’t
started rendering yet
What’s delaying rendering?
Optimizely was very chatty
June 2017
Android MedianiOS Median
Summer 2017
Proving the value of performance
⭐⭐⭐⭐⭐
Customers love reviews
But some review services can have
a large impact on performance
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 ...
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
vi...
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%
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%
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%
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%
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%
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%
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%
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%
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%
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%
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...
Nothing
stays still in
retail!
-4s
£+26%
(Baselined against other platforms
August 2017
Android MedianiOS Median
https://www.flickr.com/photos/rs_butner/7505567608
Winter 2017
“Can we make it to three seconds?”
Assembled a performance team
https://www.flickr.com/photos/soldiersmediacenter/7112630285
Working? Useful? Usable?
Focused on reducing time to useful and usable
Especially rendering
delays
https://www.flickr.com/photos/poetatum/3457696479
No magic go faster button
https://www.flickr.com/photos/colleenmorgan/2721589361
“Frontend Performance Archaeology”
Katie Sylor-Miller
Visualising JavaScript and CSS bundles can be a
great conversation starter
Visualising JavaScript and CSS bundles can be a
great conversation starter
“How much of
this is used?”
Visualising JavaScript and CSS bundles can be a
great conversation starter
“How much of
this is used?”
“Suspect we can
rem...
Visualising JavaScript and CSS bundles can be a
great conversation starter
Shrunk download size of core
script bundle by 4...
Performance Improvements were mostly dull,
boring stuff
Removing unused / un-needed code
Removing duplicate styles
Replaci...
Cleaned up Optimizely
Switched to Optimizely to use jQuery on the page
rather than bundled version
Removed A/A tests (were...
https://www.flickr.com/photos/derekbruff/9759290413
There were a few bumps along the way
<picture>
<source type="image/webp" srcset="foo.webp">
<source type="image/jp2" srcset="foo.jp2">
<img src="foo.jpg">
</pi...
<picture>
<source type="image/webp" srcset="foo.webp">
<source type="image/jp2" srcset="foo.jp2">
<img src="foo.jpg">
</pi...
<picture>
<source type="image/webp" srcset="foo.webp">
<source type="image/jp2" srcset="foo.jp2">
<img src="foo.jpg">
</pi...
<picture>
<source type="image/webp" srcset="foo.webp">
<source type="image/jp2" srcset="foo.jp2">
<img src="foo.jpg">
</pi...
https://bugs.webkit.org/show_bug.cgi?id=179231
It’s a Safari pre-loader bug!
The `type` attribute in <source> tags are ign...
Optimizely snippet got larger (temporarily)
While switching out Optimizely’s jQuery some
extensions needed to be duplicate...
So where are we now?
April 2017
Android MedianiOS Median
June 2017
Android MedianiOS Median
August 2017
Android MedianiOS Median
April 2018 – HUGE improvement over 12 months
April 2018 – HUGE improvement over 12 months
Android MedianiOS Median
What did we learn?
Linking revenue increases to performance
improvements is still hard…
Many other factors to account for including:
Pricing
...
Optimizely needs careful management
Easy to blow-up the script size
Optimizely are working on features to help
They also c...
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
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018
Upcoming SlideShare
Loading in …5
×

of

Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 1 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 2 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 3 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 4 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 5 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 6 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 7 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 8 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 9 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 10 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 11 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 12 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 13 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 14 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 15 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 16 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 17 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 18 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 19 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 20 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 21 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 22 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 23 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 24 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 25 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 26 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 27 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 28 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 29 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 30 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 31 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 32 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 33 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 34 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 35 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 36 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 37 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 38 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 39 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 40 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 41 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 42 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 43 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 44 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 45 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 46 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 47 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 48 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 49 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 50 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 51 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 52 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 53 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 54 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 55 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 56 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 57 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 58 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 59 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 60 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 61 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 62 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 63 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 64 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 65 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 66 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 67 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 68 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 69 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 70 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 71 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 72 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 73 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 74 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 75 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 76 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 77 Fast Fashion… How Missguided revolutionised their approach to site performance - DeltaV Conference - May 2018 Slide 78
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

4 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • andresdlucero

    Jul. 14, 2018
  • anthony.green

    Jun. 5, 2018
  • garrettc

    May. 16, 2018
  • MikeRynart

    May. 12, 2018

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

Views

Total views

12,944

On Slideshare

0

From embeds

0

Number of embeds

65

Actions

Downloads

27

Shares

0

Comments

0

Likes

4

×