Detecting Web Performance Problems with Chrome DevTools
summary
Chrome DevTools provides built-in browser tools for diagnosing web and app performance; the talk walks through those specific DevTools features (timing, network, performance panels, etc.) and shows how to use them to find performance improvements. It also demonstrates practical snippets and workflows to get the most out of these tools for detecting and fixing Web Performance issues.
AI-written summary · about
chapters (11)
- 0:00Chrome DevTools intro
- 2:00Accessing DevTools
- 5:10Network tab and resource analysis
- 12:21Lighthouse for performance audits
- 15:50Performance tab and key metrics
- 23:16Recorder and Performance Monitor
- 24:40Layers and visual optimization
- 26:05Snippets and preconnectors
- 27:11Mobile debugging
- 28:19Demo: INP and interaction metrics
- 30:52Q&A
related talks
29mMastering your browsers' Dev Tools
30mThe Chrome DevTools Performance Panel
28mGetting down to brass tacks: Using chrome dev tools to level up your applications
38mLesser-known Chrome DevTools Features
01h 13mAll You Need Is DevTools
33mChrome DevTools, From Prototype to Production
35mOptimise your Web Development Workflow
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!