SlideShare a Scribd company logo
1 of 108
Download to read offline
STARRING KATIE SYLOR-MILLER AND ETSY FRONTEND SYSTEMS
Staff Software Engineer
ETSY Frontend Systems
Findme @ksylor and ohshitgit.com @ohshitgit
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.
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 visits
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
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
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
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?
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 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 $$$$-
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 files and remove unused rules
• Switch to SVGs: 

Replace CSS bg-images and icon fonts with SVGs
• Reduce JS File Size: 

Remove unused Javascript
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 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.
CSS Reduction Synthetic Tests
DOMContentLoaded(ms)
1750
3500
5250
7000
Network Speed
Wifi 4G 3G
Before
After CSS Reduction
After Lazy Loading
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% ➡
Page Load 6.0s 5.2s 13.2% ➡
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
3000
4500
6000
Wifi 4G 3G
Before
After SVGs
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 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
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 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 :(
Reduce JS
File Size
Test Pit #4
56KB/264KB
121 modules
142KB/712KB
124 modules
PAGE-SPECIFIC FILE GLOBAL BASE FILE
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.
56KB/264KB
42KB/177KB
25% ➡
142KB/712KB
94KB/469KB
33% ➡
PAGE-SPECIFIC FILE GLOBAL BASE 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 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
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 5.6s 5.5s 1.6%➡
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() {

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
PAGE-SPECIFIC FILE
56KB/264KB
40KB/173KB
28% ➡
142KB/712KB
89KB/448KB
37% ➡
GLOBAL BASE FILE
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.2s 5.1s 1.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
WHAT WE HAVE WHAT WE NEED
Architect for deletion
Thank you!
Indiana Jones ™ & © 2018 Lucasfilm Ltd.
@KSYLOR

More Related Content

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

Similar to Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018 (20)

Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Android Network Performance
Android Network PerformanceAndroid Network Performance
Android Network Performance
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
 
Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
Profilling client performance
Profilling client performanceProfilling client performance
Profilling client performance
 
Front End Optimization, 'The Cloud' can help you!
Front End Optimization, 'The Cloud' can help you!Front End Optimization, 'The Cloud' can help you!
Front End Optimization, 'The Cloud' can help you!
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
Its timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublinIts timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublin
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
GDG Leeds
GDG LeedsGDG Leeds
GDG Leeds
 
GDG Manchester
GDG ManchesterGDG Manchester
GDG Manchester
 
Web performance e-book
Web performance e-bookWeb performance e-book
Web performance e-book
 

More from Katie Sylor-Miller

More from Katie Sylor-Miller (8)

Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 
Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019
 
Design Systems + Git = Success - Clarity Conference 2018
Design Systems + Git  = Success - Clarity Conference 2018Design Systems + Git  = Success - Clarity Conference 2018
Design Systems + Git = Success - Clarity Conference 2018
 
Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018
 
Git-ing out of your git messes - Fluent Conf 2017
Git-ing out of  your git messes - Fluent Conf 2017Git-ing out of  your git messes - Fluent Conf 2017
Git-ing out of your git messes - Fluent Conf 2017
 
Git-ing out of your git messes
Git-ing out of  your git messesGit-ing out of  your git messes
Git-ing out of your git messes
 
Putting the t in team
Putting the t in teamPutting the t in team
Putting the t in team
 

Recently uploaded

Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Kandungan 087776558899
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
HenryBriggs2
 
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
Health
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
MayuraD1
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
MsecMca
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ssuser89054b
 

Recently uploaded (20)

Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdf
 
School management system project Report.pdf
School management system project Report.pdfSchool management system project Report.pdf
School management system project Report.pdf
 
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPTGenerative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
 
data_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdfdata_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdf
 
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKARHAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
HAND TOOLS USED AT ELECTRONICS WORK PRESENTED BY KOUSTAV SARKAR
 
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
 
Bridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptxBridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptx
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
2016EF22_0 solar project report rooftop projects
2016EF22_0 solar project report rooftop projects2016EF22_0 solar project report rooftop projects
2016EF22_0 solar project report rooftop projects
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 
Online electricity billing project report..pdf
Online electricity billing project report..pdfOnline electricity billing project report..pdf
Online electricity billing project report..pdf
 
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
Bhubaneswar🌹Call Girls Bhubaneswar ❤Komal 9777949614 💟 Full Trusted CALL GIRL...
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
 
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptxHOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
HOA1&2 - Module 3 - PREHISTORCI ARCHITECTURE OF KERALA.pptx
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
 

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