The Chrome DevTools Performance Panel
summary
Chrome DevTools’ Performance panel shows how to go from detection to fix: use web-vitals.js and Chrome UX Report field data to compare local traces with real users, enable CPU throttling (~20x) or remote device connection, use local overrides to test fixes, and inspect flame charts to locate hot functions. Use BFCache and the speculation rules API or pre-rendering for instant navigations, and the LCP request discovery insight to find why an image didn’t load early. A 31-spinner bug yields ~25% INP improvement after fixes.
AI-written summary · about
chapters (24)
- 0:00in this talk…
- 0:43we all hate slow websites
- 1:44page speed insights
- 2:40dev tools and the performance panel
- 3:25measuring and optimizing LCP
- 5:31LCP experiments
- 6:49test driving changes with local overrides
- 7:53instant navigations: restorations and speculations
- 8:26bfcache snapshots and restorations
- 9:39speculation rules for prerendering pages
- 12:49measuring and optimizing runtime performance
- 14:00debugging an INP trace
- 15:37navigating flame charts
- 17:32INP strategies
- 18:00do it faster
- 19:28do it smarter
- 20:04do it later
- 20:58real user measurement (RUM) field diagnostics
- 22:38web-vitals.js
- 23:17LCP attribution
- 23:47INP attribution
- 24:26mad libbing performance data with dashboards
- 27:22wrapping up and takeaways
- 28:16audience questions and answers
related talks
28mDevTools & The Performance Tab
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
31mDetecting Web Performance Problems with Chrome DevTools
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
23mWhat’s new in DevTools
27mChrome Developer Tools
48mWhat’s New in Chrome DevTools
30mPerformance Tuning Secrets