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

1. STARRING KATIE SYLOR-MILLER AND ETSY FRONTEND SYSTEMS

2. Staff Software Engineer ETSY Frontend Systems Findme @ksylor and ohshitgit.com @ohshitgit

5. Archaeology is the study of human culture through it’s physical remains

6. Performance archaeology uncovers insights into your development culture

7. Survey Excavate Hypothesis Interpret Archaeology 101

9. The Mobile Listing Page

10. Hypothesis Image by HeritageDaily on Wikipedia

11. Mobile Visits 67% 52% Mobile GMS

12. RUM Dom Content Loaded Times 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits

13. Dom Content Loaded Times 15% 37% 24% 13% 6% 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits

14. Conversion Vs. Dom Content Loaded 1000 2000 3000 4000 5000 DOMContentLoaded ms Conversionrate

15. 1000 2000 3000 4000 5000 Conversion Vs. Population 15% 37% 24% 13% 6% DOMContentLoaded ms Conversionrate Percentage of visits

16. Improving the performance of the listing page will increase conversion Hypothesis

18. Survey Hypothesis

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

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. Optimize the loading and rendering of above-the-fold content Critical Rendering Path

24. Ground Penetrating Radar Image by Tapatio via Wikipedia

25. WebPageTest.org Ground Penetrating Radar

26. The Mobile Listing Page

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 $$$$-

29. Waterfall (before)

30. Waterfall (before) Five CSS files  Block CSSOM construction  and Start Render

31. Waterfall (before) Related listings images  (below the fold)

32. Waterfall (before) Two different sizes of shop avatar image  (1 above, 1 below the fold)

33. Waterfall (before) Three JS files  Global base (XL), page-specific (L), category nav(S)  Block DOM Content Loaded

34. Waterfall (before) Similar listing images  (waaaayyyyy below the fold)

35. Five CSS bg-images  One icon font

36. Main listing image is 36th!!!  Followed by more carousel images

37. Reviews images (from async content) Logging Logging Logging

38. $(‘document’).ready()

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. Survey Excavate

42. Test Pits

43. Lazyload Images Test Pit #1

44. 37 Images 814KB

45. lazy loading synthetic tests DOMContentLoadedms 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After Lazy Loading

46. Reduce CSS File Size Test Pit #2

47. 5 CSS files 98KB/0.62MB

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. CSS Reduction Synthetic Tests DOMContentLoaded(ms) 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After CSS Reduction After Lazy Loading

50. Lazyloading + CSS Reduction Experiment Results User-facing experiment #1

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. RUM Results - Lazyloading + CSS Reduction

53. Conversion

55. Switch to SVGs Test Pit #3

56. 5 bg-images 1 icon font

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. SVG Switch Results User-facing Experiment #2

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. RUM Results - SVG Switch

62. Conversion ⬌

63. WebPageTest.org again How are we doing?

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. Waterfall - After Down to 2 CSS Files!

66. Waterfall - After Listing carousel images!

67. Waterfall - After One shop avatar image!

68. Waterfall - After Still two large JS files

69. Waterfall - After CSS Background image  added back in by experiment

70. Logging Reviews images (added by new experiment) Async content

71. Stratigraphy

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. Reduce JS File Size Test Pit #4

74. 56KB/264KB 121 modules 142KB/712KB 124 modules PAGE-SPECIFIC FILE GLOBAL BASE FILE

76. Manual JS Reduction Test Pit #4a

77. Javascript Excavation JS dependency $(‘selector’)  Smarty/Mustache  templates PHP View PHP Controller Experiment flags

79. 56KB/264KB 42KB/177KB 25% ➡ 142KB/712KB 94KB/469KB 33% ➡ PAGE-SPECIFIC FILE GLOBAL BASE FILE

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. Manual JS Reduction Results User-facing Experiment #3

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. RUM Results - Manual JS Reduction

84. Conversion ➡

86. Javascript Instrumentation Test Pit #4b

87. Code Coverage?

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. PAGE-SPECIFIC FILE 56KB/264KB 40KB/173KB 28% ➡ 142KB/712KB 89KB/448KB 37% ➡ GLOBAL BASE FILE

90. Instrumented JS Reduction Results Fourth Experiment

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. RUM Results - Instrumented JS

93. Conversion

94. Excavate Interpret

95. Performance directly affects conversion

96. Frontend performance is just as important as backend, if not more.

98. Our experiences are not our users experiences (especially on mobile)

99. Small-scale performance tweaks don’t always pan out

100. Your architecture needs to match your development culture

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. Architect for deletion

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

Esté a ler uma amostra.

Confira estes a seguir

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

Mais Conteúdo rRelacionado

Semelhante a Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018 (20)

Mais de Katie Sylor-Miller (8)

Mais recentes (20)