High Performance in the Critical Rendering Path
summary
Practical techniques to speed up the browser's critical rendering path: run PageSpeed and WebPageTest in CI to track Speed Index and request waterfalls; extract and inline critical CSS with tools like Penthouse or Critical and defer remaining CSS; serve compressed assets, enable keep‑alive, and consider HTTP/2 or Cloudflare (reported 50–70% load improvement); load web fonts asynchronously with a font‑load callback; measure second‑view gains and fail builds on regressions.
AI-written summary · about
chapters (8)
- 0:00Welcome
- 3:43Web performance tools
- 9:04Continuous performance metrics
- 14:24Full-stack optimization
- 18:17HTTP/2 benefits
- 21:04HTML, CSS and fonts
- 24:59Image and resource handling
- 29:33Resources and closing
related talks
29mHigh Performance in the Critical Rendering Path
27mHigh Performance in the Critical Rendering Path
27mSpeed Up! Critical CSS to the Rescue
28mCSS and the Critical Path
27mOptimizing the Critical Rendering Path in React
42mDelivering Responsibly
38mCSS and the first meaningful paint
01h 04mFrom Zero to Hero - Web Performance