CSS and the Critical Path
summary
The Guardian reengineers its site, sets a 1000ms budget and measures start render with WebPageTest and SpeedCurve, then inlines critical CSS and asyncs non‑critical assets. LocalStorage caching with MD5 validation fixes the flash caused by deferred styles and yields about 500ms shaved from start render on tested connections, delivering pages under 1s for many users. CI grunt checks head payload size. Future work explores HTTP/2 server push and service workers for native caching.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 10:34Critical CSS
- 11:50Inline CSS
- 17:37Resilient System
- 18:51Performance Monitoring
- 21:05Alternatives
- 22:24HTTP2 Server Push
- 25:47Summary
related talks
34mCSS and the Critical Path
38mCSS and the first meaningful paint
29mHigh Performance in the Critical Rendering Path
30mHigh Performance in the Critical Rendering Path
01h 04mFrom Zero to Hero - Web Performance
27mHigh Performance in the Critical Rendering Path
42mDelivering Responsibly
46mCSS Performance Tooling