The Dear Price of Styles
summary
The talk explains how slow page rendering is caused by unmeasured, bloated CSS delivery and advocates a measure-first workflow using Chrome Performance tools, Lighthouse, real RUM and simple device throttling. Concrete techniques include preconnect/DNS-prefetch, using HTTP/2 or QUIC to reduce latency, inlining critical CSS for the first viewport and preloading remaining styles, compressing CSS with Brotli/Zopfli or gzip, removing unused CSS via coverage tools and tests, and noting that Service Workers can add overhead and didn’t help in one production experiment.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:05CSS optimization matters
- 3:55Measuring performance
- 7:06Render blocking path
- 13:25Faster resource loading
- 20:54CSS code optimization
- 27:56Unused CSS removal
- 33:54What users see loading
- 39:12Critical CSS and async loading
- 42:24Caching and Service Worker
- 45:38Q&A
