Demystifying Web Performance Tooling
summary
Distinguishes lab vs field data and shows concrete checks: run PageSpeed Insights and WebPageTest for initial scores, use webpack-bundle-analyzer to find megabyte-sized modules (react-icons issue), install the Web Vitals extension, and probe Chrome DevTools: the Network tab reveals 120 → 142 requests after accepting a cookie banner and a 3.4 MB unminified MP4; Performance tab exposes long tasks (example 180 ms) to split into smaller functions; set a clean Chrome profile, disable cache, and add request blocking for repeatable tests.
AI-written summary · about
chapters (10)
- 0:00Introduction and speaker intro
- 1:27What is web performance
- 2:10Types of web performance
- 6:32Lab vs field data
- 8:22Initial testing tools
- 13:59Chrome DevTools overview
- 17:37Demo setup and network tab
- 27:16Performance tab and demo
- 31:35Optimizations and long-term setup
- 32:39Summary and closing
related talks
49mDemystifying web performance tooling and metrics
18mWebsite performance from user perspective
30mMeasuring Web Performance - Metrics & Tools
31mPanel Discussion: Get to Know: Web Performance and Core Web Vitals
55mI Feel the Need for Web Page Speed
30mThe Chrome DevTools Performance Panel
57mSite-Speed That Sticks
28mDevTools & The Performance Tab