Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 108 Publicité

Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018

Télécharger pour lire hors ligne

There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems so easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging.

Pick up your trowels and join Katie Sylor-Miller to dig into frontend performance on Etsy’s large legacy mobile codebase, exploring real-life lessons you can use to guide your own excavations into legacy code and discovering how Etsy unearthed new insights into its culture. While Etsy prides itself on its culture of performance, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. The company is now making the case for a new, organization-wide frontend-focused performance culture that will solve the problems we face today.

Topics include:

The open source tools and metrics Etsy used to diagnose issues and track progress
How Etsy went beyond server-driven best practices to focus on the client
The tools Etsy built to help find and delete old, unused code
Which fixes successfully increased conversion and which didn’t

There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems so easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging.

Pick up your trowels and join Katie Sylor-Miller to dig into frontend performance on Etsy’s large legacy mobile codebase, exploring real-life lessons you can use to guide your own excavations into legacy code and discovering how Etsy unearthed new insights into its culture. While Etsy prides itself on its culture of performance, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. The company is now making the case for a new, organization-wide frontend-focused performance culture that will solve the problems we face today.

Topics include:

The open source tools and metrics Etsy used to diagnose issues and track progress
How Etsy went beyond server-driven best practices to focus on the client
The tools Etsy built to help find and delete old, unused code
Which fixes successfully increased conversion and which didn’t

Publicité
Publicité

Plus De Contenu Connexe

Similaire à Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018 (20)

Publicité

Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018

  1. 1. STARRING KATIE SYLOR-MILLER AND ETSY FRONTEND SYSTEMS
  2. 2. Staff Software Engineer ETSY Frontend Systems Findme @ksylor and ohshitgit.com @ohshitgit
  3. 3. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  4. 4. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  5. 5. Archaeology is the study of human culture through it’s physical remains
  6. 6. Performance archaeology uncovers insights into your development culture
  7. 7. Survey Excavate Hypothesis Interpret Archaeology 101
  8. 8. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  9. 9. The Mobile Listing Page
  10. 10. Hypothesis Image by HeritageDaily on Wikipedia
  11. 11. Mobile Visits 67% 52% Mobile GMS
  12. 12. RUM Dom Content Loaded Times 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits
  13. 13. Dom Content Loaded Times 15% 37% 24% 13% 6% 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits
  14. 14. Conversion Vs. Dom Content Loaded 1000 2000 3000 4000 5000 DOMContentLoaded ms Conversionrate
  15. 15. 1000 2000 3000 4000 5000 Conversion Vs. Population 15% 37% 24% 13% 6% DOMContentLoaded ms Conversionrate Percentage of visits
  16. 16. Improving the performance of the listing page will increase conversion Hypothesis
  17. 17. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  18. 18. Survey Hypothesis
  19. 19. Performance Best Practices Great server response times Minify and gzip static JS and CSS assets Resize and compress images Responsive images (mostly) Use proper headers to take advantage of browser caching Use dns-prefetch resource hints Use HTTP/2 when available In-house RUM monitoring and alerting 3rd party synthetic monitoring service
  20. 20. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  21. 21. Perceived Performance How quickly users: • receive confirmation that the page has started loading? • see the most important information on the page? • can interact with the page?
  22. 22. Optimize the loading and rendering of above-the-fold content Critical Rendering Path
  23. 23. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  24. 24. Ground Penetrating Radar Image by Tapatio via Wikipedia
  25. 25. WebPageTest.org Ground Penetrating Radar
  26. 26. The Mobile Listing Page
  27. 27. WebPageTest Results iPhone 6 iOS9 - 3GSlow 
 (this is much worse than our typical user experience) METRIC BEFORE AFTER CHANGE TTFB 1.8s Start Render 8.5s DOM Content Loaded 12.1s Speed Index 13,193 Time to First Interactive >19s CSS size 98KB/0.62MB JS size 386KB/1.46MB Images 37 Cost $$$$-
  28. 28. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  29. 29. Waterfall (before)
  30. 30. Waterfall (before) Five CSS files
 Block CSSOM construction
 and Start Render
  31. 31. Waterfall (before) Related listings images
 (below the fold)
  32. 32. Waterfall (before) Two different sizes of shop avatar image
 (1 above, 1 below the fold)
  33. 33. Waterfall (before) Three JS files
 Global base (XL), page-specific (L), category nav(S)
 Block DOM Content Loaded
  34. 34. Waterfall (before) Similar listing images
 (waaaayyyyy below the fold)
  35. 35. Five CSS bg-images
 One icon font
  36. 36. Main listing image is 36th!!!
 Followed by more carousel images
  37. 37. Reviews images (from async content) Logging Logging Logging
  38. 38. $(‘document’).ready()
  39. 39. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  40. 40. Areas For Improvement • Lazyload images: 
 Defer loading of “below the fold” images • Reduce CSS File Size: 
 Combine CSS files and remove unused rules • Switch to SVGs: 
 Replace CSS bg-images and icon fonts with SVGs • Reduce JS File Size: 
 Remove unused Javascript
  41. 41. Survey Excavate
  42. 42. Test Pits
  43. 43. Lazyload Images Test Pit #1
  44. 44. 37 Images 814KB
  45. 45. lazy loading synthetic tests DOMContentLoadedms 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After Lazy Loading
  46. 46. Reduce CSS File Size Test Pit #2
  47. 47. 5 CSS files 98KB/0.62MB
  48. 48. Automation to the Rescue? • Selenium script opens the page(s) in a browser • Run uncss (https://github.com/uncss/uncss) • Output a new file with only the CSS in use … But, we didn’t capture *all* states and had to keep adding more every time we found a bug.
  49. 49. CSS Reduction Synthetic Tests DOMContentLoaded(ms) 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After CSS Reduction After Lazy Loading
  50. 50. Lazyloading + CSS Reduction Experiment Results User-facing experiment #1
  51. 51. RUM Results - Lazyloading + CSS Reduction METRIC BEFORE AFTER CHANGE TTFB 1.16s 1.18s 1.2% DOM Content Loaded 3.3s 3.1s 6% ➡ Page Load 6.0s 5.2s 13.2% ➡
  52. 52. RUM Results - Lazyloading + CSS Reduction
  53. 53. Conversion
  54. 54. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  55. 55. Switch to SVGs Test Pit #3
  56. 56. 5 bg-images 1 icon font
  57. 57. SVG Switch Synthetic Tests Logged Out DOMContentLoadedms 1500 3000 4500 6000 Wifi 4G 3G Before After SVGs Logged In 1500 3000 4500 6000 Wifi 4G 3G Before After SVGs
  58. 58. SVG Switch Results User-facing Experiment #2
  59. 59. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  60. 60. RUM Results - SVG Switch METRIC BEFORE AFTER CHANGE TTFB 1.17 1.17s ⬌ DOM Content Loaded 3.0s 3.0s ⬌ Page Load 5.6s 5.5s 1%➡
  61. 61. RUM Results - SVG Switch
  62. 62. Conversion ⬌
  63. 63. WebPageTest.org again How are we doing?
  64. 64. METRIC BEFORE AFTER CHANGE TTFB 1.8s 2.0s 11% Start Render 8.5s 4.8s 44% ➡ DOM Content Loaded 12.1s 12.6s ?? 4% Speed Index 13,193 13,071 ⬌ Time to First Interactive >19s >17s 10%➡ CSS size 98KB/0.62MB 38KB/0.24MB 60%➡ JS size 386KB/1.46MB 375KB/1.59MB 3% Images 37 25 32%➡ Cost $$$$- $$$-- $➡ WebPageTest Results iPhone 6 iOS9 - 3GSlow
  65. 65. Waterfall - After Down to 2 CSS Files!
  66. 66. Waterfall - After Listing carousel images!
  67. 67. Waterfall - After One shop avatar image!
  68. 68. Waterfall - After Still two large JS files
  69. 69. Waterfall - After CSS Background image
 added back in by experiment
  70. 70. Logging Reviews images (added by new experiment) Async content
  71. 71. Stratigraphy
  72. 72. A Brief History of JS at Etsy 2010 - jQuery w/Homegrown system to concatenate and serve JS files 2011 - Dependencies get inlined using rails-style
 //=require ‘path/to/dependencies’
 window.Etsy.module; 2012 - RequireJS - AMD dependencies
 require([‘path/to/dependencies’],
 function(dep) { }); 2017 - still a mix of everything :(
  73. 73. Reduce JS File Size Test Pit #4
  74. 74. 56KB/264KB 121 modules 142KB/712KB 124 modules PAGE-SPECIFIC FILE GLOBAL BASE FILE
  75. 75. Indiana Jones ™ & © 2018 Lucasfilm Ltd. TYPES
  76. 76. Manual JS Reduction Test Pit #4a
  77. 77. Javascript Excavation JS dependency $(‘selector’)
 Smarty/Mustache
 templates PHP View PHP Controller Experiment flags
  78. 78. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  79. 79. 56KB/264KB 42KB/177KB 25% ➡ 142KB/712KB 94KB/469KB 33% ➡ PAGE-SPECIFIC FILE GLOBAL BASE FILE
  80. 80. WebPageTest Results METRIC BEFORE AFTER CHANGE TTFB 2.0s 1.9s 5%➡ Start Render 4.8s 4.87s 1% DOM Content Loaded 12.6s 9.8s 22%➡ Speed Index 13,071 10,903 16%➡ Time to First Interactive >17s >15s 12%➡ CSS size 38KB/0.24MB 38KB/0.24MB ⬌ JS size 375KB/1.59MB 299KB/1.15MB 20%➡ Images 25 23 8%➡ Cost $$$-- $$$-- ⬌ iPhone 6 iOS9 - 3GSlow
  81. 81. Manual JS Reduction Results User-facing Experiment #3
  82. 82. RUM Results - Manual JS Reduction METRIC BEFORE AFTER CHANGE TTFB 1.2s 1.2s ⬌ DOM Content Loaded 2.9s 2.8s 2.9%➡ Page Load 5.6s 5.5s 1.6%➡
  83. 83. RUM Results - Manual JS Reduction
  84. 84. Conversion ➡
  85. 85. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  86. 86. Javascript Instrumentation Test Pit #4b
  87. 87. Code Coverage?
  88. 88. window.Etsy = 
 window.Etsy || {};
 window.Etsy.Vimes.register
 (“vb383”);
 
 function vb383(id,fn) {
 return function() {
 window.Etsy.Vimes.start('vb383' , id);
 return fn.apply(this, arguments);
 };
 }
 return vb383(1, function(args) { 
 return stuff;
 } Re-write JS to log
 function calls Capture real user
 actions Send logs onLoad
 and onUnLoad Map # of calls back
 to source files Introducing Vimes
  89. 89. PAGE-SPECIFIC FILE 56KB/264KB 40KB/173KB 28% ➡ 142KB/712KB 89KB/448KB 37% ➡ GLOBAL BASE FILE
  90. 90. Instrumented JS Reduction Results Fourth Experiment
  91. 91. RUM Results - Instrumented JS METRIC BEFORE AFTER CHANGE TTFB 1.2s 1.2s ⬌ DOM Content Loaded 3.0s 2.9s 2.7%➡ Page Load 5.2s 5.1s 1.2%➡
  92. 92. RUM Results - Instrumented JS
  93. 93. Conversion
  94. 94. Excavate Interpret
  95. 95. Performance directly affects conversion
  96. 96. Frontend performance is just as important as backend, if not more.
  97. 97. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  98. 98. Our experiences are not our users experiences (especially on mobile)
  99. 99. Small-scale performance tweaks don’t always pan out
  100. 100. Your architecture needs to match your development culture
  101. 101. Static top-level CSS or JS dependency managed at the page level Dynamic FE dependency management at the component level WHAT WE HAVE WHAT WE NEED
  102. 102. Architect for deletion
  103. 103. Thank you! Indiana Jones ™ & © 2018 Lucasfilm Ltd. @KSYLOR

×