Raiders of the Fast Start: Frontend Performance Archeology
summary
Etsy focuses on the listing page and measures DOMContentLoaded and start render, uses webpagetest.org, Chrome Coverage and an AST-based logger called Vimes plus a CSS tool (Carrot) to map actual usage. Iterative A/B experiments and lazy-loading cut images and CSS, yielding about 6% faster DOMContentLoaded, 13% faster page load, 60% smaller CSS blocks and 32% fewer images; manual JS pruning briefly reduced JS by ~25–33% then Vimes-driven deletion reached ~28–37% and reversed earlier conversion losses. A ~200 millisecond win correlates with conversion lift.
AI-written summary · about
chapters (22)
- 0:00Start
- 3:33ARCHAEOLOGY 101
- 6:04RUM DOM CONTENT LOADED TIMES
- 7:05CONVERSION VS. DOM CONTENT LOADED
- 7:22CONVERSION VS. POPULATION
- 8:35PERFORMANCE BEST PRACTICES
- 9:00INITIAL LOAD PERFORMANCE
- 10:42GROUND PENETRATING RADAR
- 12:59WATERFALL (BEFORE)
- 17:53AREAS FOR IMPROVEMENT
- 20:43LAZY LOADING SYNTHETIC TESTS
- 22:00AUTOMATION TO THE RESCUE?
- 22:48CSS REDUCTION SYNTHETIC TESTS
- 23:17RUM RESULTS - LAZYLOADING - CSS REDUCTION
- 24:42SVG SWITCH SYNTHETIC TESTS
- 25:18RUM RESULTS - SVG SWITCH
- 25:53WEBPAGETEST RESULTS
- 26:17WATERFALL - AFTER
- 31:00JAVASCRIPT EXCAVATION
- 32:28RUM RESULTS - MANUAL JS REDUCTION
- 34:33CODE COVERAGE?
- 35:02INTRODUCING VIMES
related talks
11m"Time is Money - The Measurable Value of Performance by Design"
48mThink Fast, First: Empowering a Performance Culture
21mState of Performance
20mReal metrics for front-end performance
36mMoneyball for Performance Metrics
01h 04mNeed for speed 8, performance tuning of your web application
30mPerformance as a Religious Experience
31mThe Future of Front-End Performance