FaCSSt—CSS and Performance
summary
Claims and measurements focus decisions: saving 300 ms = potential £8.1M/yr; a 1 MB stylesheet = ~200 ms parse on Moto G4; base64 in CSS makes first paint about ten times slower on mobile (700 ms → ~7.5 s). @import creates long request chains adding ~412 ms; mixins compress better than extend after gzip (≈27% smaller in one study); moving critical CSS off-host adds DNS/TCP/TLS latency; placing link rel=stylesheet in the body enables progressive rendering; an empty script after a link fixes a Firefox quirk.
AI-written summary · about
chapters (9)
- 0:00Start
- 6:23Light could travel 59,958km
- 9:36An Experiment
- 11:15@import
- 15:00This is the last thing on your list of things to optimise
- 27:09Mixin vs. @extend
- 28:33Mixins are better for performance than @extend
- 29:41Asset Domains
- 39:33Loading CSS and JS
