Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Fast Fashion…
How Missguided revolutionised their
approach to site performance
Andy Davies
WebPerfDays Amsterdam, Oct 2018
Mark Leach @AndyDavies
In the beginning…
Conversions
What if we made our site faster?
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
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?”
“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
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
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



hello@andydavies.me
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018
Nächste SlideShare
Wird geladen in …5
×

Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018

285 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Fast Fashion… How Missguided revolutionised their approach to site performance - WebPerfDays AMS - Nov 2018

  1. 1. Fast Fashion… How Missguided revolutionised their approach to site performance Andy Davies WebPerfDays Amsterdam, Oct 2018
  2. 2. Mark Leach @AndyDavies
  3. 3. In the beginning…
  4. 4. Conversions What if we made our site faster?
  5. 5. April 2017 Android MedianiOS Median
  6. 6. 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
  7. 7. The early fixes
  8. 8. <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
  9. 9. Browser downloads fonts before render tree is built = faster rendering
  10. 10. Homepage images received but page hasn’t started rendering yet What’s delaying rendering?
  11. 11. Optimizely was very chatty
  12. 12. June 2017 Android MedianiOS Median
  13. 13. Summer 2017 Proving the value of performance
  14. 14. ⭐⭐⭐⭐⭐ Customers love reviews But some review services can have a large impact on performance
  15. 15. 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?
  16. 16. 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
  17. 17. 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
  18. 18. 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
  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 9 Page Load Time (avg across session) CumulativeRevenuevsWeek0 Android revenue increased week-on-week + 56%
  27. 27. Nothing stays still in retail!
  28. 28. -4s
  29. 29. £+26% (Baselined against other platforms
  30. 30. August 2017 Android MedianiOS Median
  31. 31. https://www.flickr.com/photos/rs_butner/7505567608
  32. 32. Winter 2017 “Can we make it to three seconds?”
  33. 33. Assembled a performance team https://www.flickr.com/photos/soldiersmediacenter/7112630285
  34. 34. Working? Useful? Usable? Focused on reducing time to useful and usable Especially rendering delays
  35. 35. https://www.flickr.com/photos/poetatum/3457696479 No magic go faster button
  36. 36. https://www.flickr.com/photos/colleenmorgan/2721589361 “Frontend Performance Archaeology” Katie Sylor-Miller
  37. 37. Visualising JavaScript and CSS bundles can be a great conversation starter
  38. 38. Visualising JavaScript and CSS bundles can be a great conversation starter “How much of this is used?” “Suspect we can remove this”
  39. 39. Visualising JavaScript and CSS bundles can be a great conversation starter Shrunk download size of core script bundle by 42% (uncompressed size by 55%)
  40. 40. 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
  41. 41. 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
  42. 42. https://www.flickr.com/photos/derekbruff/9759290413 There were a few bumps along the way
  43. 43. <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
  44. 44. <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
  45. 45. <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
  46. 46. <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
  47. 47. 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.
  48. 48. 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
  49. 49. So where are we now?
  50. 50. April 2017 Android MedianiOS Median
  51. 51. June 2017 Android MedianiOS Median
  52. 52. August 2017 Android MedianiOS Median
  53. 53. April 2018 – HUGE improvement over 12 months Android MedianiOS Median
  54. 54. What did we learn?
  55. 55. Linking revenue increases to performance improvements is still hard… Many other factors to account for including: Pricing Promotions New brands Trends Seasonality etc.
  56. 56. 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
  57. 57. Perseverance Pays
  58. 58. Did we make it to 3 seconds?
  59. 59. Over May bank holiday weekend median was just above 3.5s
  60. 60. Thank You! https://www.slideshare.net/andydavies
 
 hello@andydavies.me

×