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.
STARRING KATIE SYLOR-MILLER AND ETSY FRONTEND SYSTEMS
STAFF SOFTWARE ENGINEER
ETSY FRONTEND SYSTEMS
AND OHSHITGIT.COM
Findme@ksylor and@ohshitgit
gum.co/ohshit-git/perfnow
gum.co/dangit-git/perfnow
5€!
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Archaeology is the study
of human culture through
it’s physical remains
Performance archaeology
uncovers insights into
your development culture
Survey
Excavate
Hypothesis
Interpret
Archaeology 101
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Our Site: The Mobile Listing Page
Hypothesis
Image by HeritageDaily on Wikipedia
Mobile Visits
67% 52%
Mobile GMS
RUM Dom Content Loaded Times
1000 2000 3000 4000 50000
DOMContentLoaded ms
Numberofvisits
Dom Content Loaded Times
15%
37%
24%
13%
6%
1000 2000 3000 4000 50000
DOMContentLoaded ms
Numberofvisits
Conversion Vs. Dom Content Loaded
1000 2000 3000 4000 5000
DOMContentLoaded ms
Conversionrate
1000 2000 3000 4000 5000
Conversion Vs. Population
15%
37%
24%
13%
6%
DOMContentLoaded ms
Conversionrate Percentage of vis...
Improving the performance
of the listing page will
increase conversion
Hypothesis
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Survey
Hypothesis
Performance Best Practices
Great server response times
Minify and gzip static JS and CSS assets
Resize and compress images...
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Initial Load Performance
How quickly users:
• receive confirmation that the page has started loading?
• see the most impor...
Optimize the loading
and rendering of
above-the-fold content
Critical Rendering Path
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Ground Penetrating Radar
Image by Tapatio via Wikipedia
WebPageTest.org
Ground Penetrating Radar
The Mobile Listing Page
WebPageTest Results
iPhone 6 iOS9 - 3GSlow 

(this is much worse than our typical user experience)
METRIC BEFORE AFTER CHA...
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Waterfall (before)
Waterfall (before)
Five CSS files

Block CSSOM construction

and Start Render
Waterfall (before)
Related listings images

(below the fold)
Waterfall (before)
Two different sizes of shop avatar image

(1 above, 1 below the fold)
Waterfall (before)
Three JS files

Global base (XL), page-specific (L), category nav(S)

Block DOM Content Loaded
Waterfall (before)
Similar listing images

(waaaayyyyy below the fold)
Five CSS bg-images

One icon font
Main listing image is 36th!!!

Followed by more carousel images
Reviews images (from async content)
Logging
Logging
Logging
$(‘document’).ready()
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Areas For Improvement
• Lazyload images: 

Defer loading of “below the fold” images
• Reduce CSS File Size: 

Combine CSS ...
Survey
Excavate
Test Pits
Lazyload
Images
Test Pit #1
37 Images
814KB
lazy loading synthetic tests
DOMContentLoadedms
1750
3500
5250
7000
Network Speed
Wifi 4G 3G
Before
After Lazy Loading
Reduce CSS
File Size
Test Pit #2
5 CSS files
98KB/0.62MB
Automation to the Rescue?
• Selenium script opens the page(s) in a headless browser
• Run uncss (https://github.com/uncss/...
CSS Reduction Synthetic Tests
DOMContentLoaded(ms)
1750
3500
5250
7000
Network Speed
Wifi 4G 3G
Before
After CSS Reduction...
Lazyloading + CSS Reduction
Experiment Results
User-facing experiment #1
RUM Results - Lazyloading + CSS Reduction
METRIC BEFORE AFTER CHANGE
TTFB 1.16s 1.18s 1.2%
DOM Content Loaded 3.3s 3.1s 6%...
RUM Results - Lazyloading + CSS Reduction
Conversion
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Switch to
SVGs
Test Pit #3
5 bg-images
1 icon font
SVG Switch Synthetic Tests
Logged Out
DOMContentLoadedms
1500
3000
4500
6000
Wifi 4G 3G
Before
After SVGs
Logged In
1500
3...
SVG Switch Results
User-facing Experiment #2
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
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...
RUM Results - SVG Switch
Conversion ⬌
WebPageTest.org again
How are we doing?
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 Inde...
Waterfall - After
Down to 2 CSS Files!
Waterfall - After
Listing carousel images!
Waterfall - After
One shop avatar image!
Waterfall - After
Still two large JS files
Waterfall - After
CSS Background image

added back in by experiment
Logging
Reviews images (added by new experiment)
Async content
Stratigraphy
A Brief History of JS at Etsy
2010 - jQuery w/Homegrown system to
concatenate and serve JS files
2011 - Dependencies get i...
Reduce JS
File Size
Test Pit #4
“Load only what you need”
- Yoav Weiss, today
before afterbefore after
121 modules 124 modules
GLOBAL BASE FILE
142kB

712kB
PAGE-SPECIFIC FILE
56kB

264kB
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
TYPES
Manual JS
Reduction
Test Pit #4a
Javascript Excavation
JS dependency
$(‘selector’)

Smarty/Mustache

templates
PHP View
PHP Controller
Experiment flags
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
before afterbefore after
25% ➡ 33% ➡
GLOBAL BASE FILE
56kB

264kB 42kB

177kB
142kB

712kB
94kB

469kB
PAGE-SPECIFIC FILE
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...
Manual JS Reduction Results
User-facing Experiment #3
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...
RUM Results - Manual JS Reduction
Conversion ➡
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Javascript
Instrumentation
Test Pit #4b
Code Coverage?
window.Etsy = 

window.Etsy || {};

window.Etsy.Vimes.register

(“vb383”);



function vb383(id,fn) {

return function() {...
before afterbefore after
PAGE-SPECIFIC FILE
28% ➡ 37% ➡
GLOBAL BASE FILE
56kB

264kB 40kB

173kB
142kB

712kB
89kB

448kB
Instrumented JS Reduction
Results
Fourth Experiment
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.2...
RUM Results - Instrumented JS
Conversion
Excavate
Interpret
Performance directly
affects conversion
Frontend performance
is just as important as
backend, if not more.
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
Our experiences are not
our users experiences
(especially on mobile)
Small-scale
performance tweaks
don’t always pan out
Your architecture
needs to match your
development culture
Static top-level
CSS or JS
dependency
managed at the
page level
Dynamic FE
dependency
management at
the component
level
WH...
Architect for deletion
Performance culture is
not self-sustaining
Thank you!
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
@KSYLOR
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference
Upcoming SlideShare
Loading in …5
×

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference

727 views

Published on

Raiders of the Fast Start: Frontend Performance Archeology
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 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 come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:

What tools and metrics we used to diagnose issues and track progress.
How we went beyond server-driven best practices to focus on the client.
Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.

Published in: Engineering
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now() Conference

  1. 1. STARRING KATIE SYLOR-MILLER AND ETSY FRONTEND SYSTEMS
  2. 2. STAFF SOFTWARE ENGINEER ETSY FRONTEND SYSTEMS AND OHSHITGIT.COM Findme@ksylor and@ohshitgit
  3. 3. gum.co/ohshit-git/perfnow gum.co/dangit-git/perfnow 5€!
  4. 4. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  5. 5. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  6. 6. Archaeology is the study of human culture through it’s physical remains
  7. 7. Performance archaeology uncovers insights into your development culture
  8. 8. Survey Excavate Hypothesis Interpret Archaeology 101
  9. 9. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  10. 10. Our Site: The Mobile Listing Page
  11. 11. Hypothesis Image by HeritageDaily on Wikipedia
  12. 12. Mobile Visits 67% 52% Mobile GMS
  13. 13. RUM Dom Content Loaded Times 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits
  14. 14. Dom Content Loaded Times 15% 37% 24% 13% 6% 1000 2000 3000 4000 50000 DOMContentLoaded ms Numberofvisits
  15. 15. Conversion Vs. Dom Content Loaded 1000 2000 3000 4000 5000 DOMContentLoaded ms Conversionrate
  16. 16. 1000 2000 3000 4000 5000 Conversion Vs. Population 15% 37% 24% 13% 6% DOMContentLoaded ms Conversionrate Percentage of visits
  17. 17. Improving the performance of the listing page will increase conversion Hypothesis
  18. 18. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  19. 19. Survey Hypothesis
  20. 20. 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. 21. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  22. 22. Initial Load 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?
  23. 23. Optimize the loading and rendering of above-the-fold content Critical Rendering Path
  24. 24. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  25. 25. Ground Penetrating Radar Image by Tapatio via Wikipedia
  26. 26. WebPageTest.org Ground Penetrating Radar
  27. 27. The Mobile Listing Page
  28. 28. 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. 29. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  30. 30. Waterfall (before)
  31. 31. Waterfall (before) Five CSS files
 Block CSSOM construction
 and Start Render
  32. 32. Waterfall (before) Related listings images
 (below the fold)
  33. 33. Waterfall (before) Two different sizes of shop avatar image
 (1 above, 1 below the fold)
  34. 34. Waterfall (before) Three JS files
 Global base (XL), page-specific (L), category nav(S)
 Block DOM Content Loaded
  35. 35. Waterfall (before) Similar listing images
 (waaaayyyyy below the fold)
  36. 36. Five CSS bg-images
 One icon font
  37. 37. Main listing image is 36th!!!
 Followed by more carousel images
  38. 38. Reviews images (from async content) Logging Logging Logging
  39. 39. $(‘document’).ready()
  40. 40. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  41. 41. 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
  42. 42. Survey Excavate
  43. 43. Test Pits
  44. 44. Lazyload Images Test Pit #1
  45. 45. 37 Images 814KB
  46. 46. lazy loading synthetic tests DOMContentLoadedms 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After Lazy Loading
  47. 47. Reduce CSS File Size Test Pit #2
  48. 48. 5 CSS files 98KB/0.62MB
  49. 49. Automation to the Rescue? • Selenium script opens the page(s) in a headless 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.
  50. 50. CSS Reduction Synthetic Tests DOMContentLoaded(ms) 1750 3500 5250 7000 Network Speed Wifi 4G 3G Before After CSS Reduction After Lazy Loading
  51. 51. Lazyloading + CSS Reduction Experiment Results User-facing experiment #1
  52. 52. 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% ➡
  53. 53. RUM Results - Lazyloading + CSS Reduction
  54. 54. Conversion
  55. 55. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  56. 56. Switch to SVGs Test Pit #3
  57. 57. 5 bg-images 1 icon font
  58. 58. 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
  59. 59. SVG Switch Results User-facing Experiment #2
  60. 60. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  61. 61. 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%➡
  62. 62. RUM Results - SVG Switch
  63. 63. Conversion ⬌
  64. 64. WebPageTest.org again How are we doing?
  65. 65. 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
  66. 66. Waterfall - After Down to 2 CSS Files!
  67. 67. Waterfall - After Listing carousel images!
  68. 68. Waterfall - After One shop avatar image!
  69. 69. Waterfall - After Still two large JS files
  70. 70. Waterfall - After CSS Background image
 added back in by experiment
  71. 71. Logging Reviews images (added by new experiment) Async content
  72. 72. Stratigraphy
  73. 73. 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 :(
  74. 74. Reduce JS File Size Test Pit #4
  75. 75. “Load only what you need” - Yoav Weiss, today
  76. 76. before afterbefore after 121 modules 124 modules GLOBAL BASE FILE 142kB
 712kB PAGE-SPECIFIC FILE 56kB
 264kB
  77. 77. Indiana Jones ™ & © 2018 Lucasfilm Ltd. TYPES
  78. 78. Manual JS Reduction Test Pit #4a
  79. 79. Javascript Excavation JS dependency $(‘selector’)
 Smarty/Mustache
 templates PHP View PHP Controller Experiment flags
  80. 80. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  81. 81. before afterbefore after 25% ➡ 33% ➡ GLOBAL BASE FILE 56kB
 264kB 42kB
 177kB 142kB
 712kB 94kB
 469kB PAGE-SPECIFIC FILE
  82. 82. 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
  83. 83. Manual JS Reduction Results User-facing Experiment #3
  84. 84. 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%➡
  85. 85. RUM Results - Manual JS Reduction
  86. 86. Conversion ➡
  87. 87. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  88. 88. Javascript Instrumentation Test Pit #4b
  89. 89. Code Coverage?
  90. 90. 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
  91. 91. before afterbefore after PAGE-SPECIFIC FILE 28% ➡ 37% ➡ GLOBAL BASE FILE 56kB
 264kB 40kB
 173kB 142kB
 712kB 89kB
 448kB
  92. 92. Instrumented JS Reduction Results Fourth Experiment
  93. 93. 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%➡
  94. 94. RUM Results - Instrumented JS
  95. 95. Conversion
  96. 96. Excavate Interpret
  97. 97. Performance directly affects conversion
  98. 98. Frontend performance is just as important as backend, if not more.
  99. 99. Indiana Jones ™ & © 2018 Lucasfilm Ltd.
  100. 100. Our experiences are not our users experiences (especially on mobile)
  101. 101. Small-scale performance tweaks don’t always pan out
  102. 102. Your architecture needs to match your development culture
  103. 103. 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
  104. 104. Architect for deletion
  105. 105. Performance culture is not self-sustaining
  106. 106. Thank you! Indiana Jones ™ & © 2018 Lucasfilm Ltd. @KSYLOR

×