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.
Presentation from https://perfmattersconf.com/
20. Performance Best Practices
Great server response times
Minify and gzip static JS and CSS assets
Resize and compress images
Responsive images
Use proper headers to take advantage of browser caching
Use dns-prefetch resource hints
Use HTTP/2 when available (not all of our CDNs support)
In-house RUM monitoring and alerting
3rd party synthetic monitoring service
22. Critical Rendering Path
How quickly a user:
• receives confirmation that the page has started loading?
• sees the most important information on the page?
• can interact with the page?
27. WebPageTest Results (Before)
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 $$$$-
50. 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.
51. CSS Reduction Synthetic Tests
DOMContentLoaded(ms)
1750
3500
5250
7000
Network Speed
Wifi 4G 3G
Before
After CSS Reduction
After Lazy Loading
59. 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
74. 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
define([‘path/to/dependencies’],
function(dep) { });
2017 - still a mix of everything :(
