FaCSSt—CSS and Performance
summary
CSS parsing and delivery actually decide perceived speed: a 1 MB stylesheet costs about 200 ms parse on a Moto G4, embedding images with base64 blows up critical CSS and delays first paint (measured as roughly 700 ms desktop / 7 s mobile in one experiment), and using @import serializes requests — flattening imports cuts start-render from 2.5s to 0.5s in a case study. Mixins gzip better than extends, asset subdomains add DNS/TCP/TLS overhead for critical resources, and loading order matters because CSS blocks inline script execution.
AI-written summary · about
chapters (14)
- 0:00Start
- 3:31Larger files take longer to download...
- 6:09Base64 is an anti-pattern
- 6:30An Experiment
- 8:34@import
- 11:26Selector Performance
- 12:47Key Selector
- 18:52Alphabetic CSS
- 20:51Gzip loves repetition and consistency
- 21:01Mixin vs. @extend
- 22:52That was a very non-scientific demo
- 24:22Asset Domains
- 26:45Inline scripts block on CSSOM construction
- 28:23Load the JS with the async attribute
