Optimize for interactivity using Web Vitals (FID/TBT)
summary
Defines First Input Delay as a field metric and uses Total Blocking Time in the lab as a proxy, measured with DevTools, Lighthouse, WebPageTest, CrUX and New Relic. Shows Mercado Libre trimming a 950 KB main bundle (−16%), removing expensive tracking work, applying per-method lodash, Babel transform-runtime, code splitting and partial hydration to break long tasks. Long tasks drop from ~2s to ~1s then further, yielding a 90% reduction in Lighthouse Max Potential FID and a 9% increase in users perceiving FID as fast.
AI-written summary · about
chapters (10)
- 0:00Introduction to web vitals
- 0:36Understanding interactivity
- 2:43Measuring first input delay
- 5:25Total blocking time metric
- 8:09Optimizing blocking time
- 9:32Field data and lab metrics
- 13:11Mercado Libre case study
- 16:04Analyzing performance issues
- 18:53Applying optimizations
- 20:55Results and conclusion
