Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

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

2 567 vues

Publié le

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

Publié dans : Technologie
  • Download The Complete Lean Belly Breakthrough Program with Special Discount. ■■■ https://tinyurl.com/bkfitness4u
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Do This Simple 2-Minute Ritual To Loss 1 Pound Of Belly Fat Every 72 Hours ➤➤ https://tinyurl.com/y6qaaou7
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Download The Complete Lean Belly Breakthrough Program with Special Discount. ★★★ https://tinyurl.com/bkfitness4u
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Do This Simple 2-Minute Ritual To Loss 1 Pound Of Belly Fat Every 72 Hours ■■■ https://tinyurl.com/bkfitness4u
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×