Effortless Performance Debugging
summary
Live demo uses Chrome DevTools Performance and Lighthouse audits with network throttling (Slow 3G / Slow 4G) and CPU slowdowns (6x / 4x) to find costly tasks, then fixes: add defer to noncritical scripts, enable font-display: swap for self‑hosted fonts, reserve image space with padding-bottom: 67% intrinsic‑ratio, and swap in a lazyload library (with optional native loading=lazy). Claim: first meaningful paint falls from ~4s to ~1s; images drop to a few initial downloads; layers, paint‑flashing and will‑change expose repaints and compositing opportunities; audits sometimes flake, WebPageTest is recommended.
AI-written summary · about
chapters (15)
- 0:00Start
- 1:32Dev Tools
- 3:14Timeline
- 4:44Frames
- 5:11Timings
- 7:30Audits Page
- 13:03Request Blocking
- 17:59Phone Display Swap
- 23:01Scroll Anchoring
- 26:57Lazy Loading
- 31:42Native Lazy Loading
- 37:31Interaction Performance
- 37:45What Can Go Wrong with Interaction Performance
- 39:39Layout Change
- 40:42Rendering
related talks
50mRocking Out with Browser-Based Developer tools
38mCSS and the first meaningful paint
44mFast but not Furious: Debugging User Interaction Performance Issues
36mHacking Web Performance
27mHigh Performance in the Critical Rendering Path
40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!
29mPerfecting Perf: Rapid, Rigorous and Reproducible Performance Experiments
01h 03mSpeed up your Web Application