CSS Performance Tooling
summary
Bleeding‑edge CSS tooling that actually ships results: automated critical‑path CSS extraction (Penthouse + critical) and async loading with loadCSS, unused‑CSS removal with UnCSS, visual regression via PhantomCSS, and CI checks using WebPageTest CLI and grunt perf‑budget. Tests cut a page from ~12s visually complete and speed index ~2,100 down to ~1.1s and speed index ~917. Converting a 5MB animated GIF to video or a static JPEG shrinks bytes to ~450KB and yields the biggest single win.
AI-written summary · about
chapters (10)
- 0:00Introduction to performance
- 1:33Analyzing site performance
- 5:31Baseline optimizations
- 12:27Removing unused CSS
- 17:52Regression testing
- 22:14Critical path optimization
- 28:05Optimizing heavy assets
- 34:23Automated performance tools
- 37:30CI and code quality
- 43:24Conclusion and wrap-up
related talks
29mHigh Performance in the Critical Rendering Path
27mSpeed Up! Critical CSS to the Rescue
30mHigh Performance in the Critical Rendering Path
42mDelivering Responsibly
28mCSS and the Critical Path
38mCSS and the first meaningful paint
37mModern CSS Rendering Performance - Full-Scale Optimization
51mModern CSS Development: Tooling & Workflows