FaCSSt: CSS and Performance

on YouTube ↗43m

" summary

Claims and numbers: embedding images as base64-encoded images in CSS inflates critical CSS and causes up to 10x slower first paint on mobile (examples: ~700ms vs ~7s), a large stylesheet costs ~200ms pause on a Moto G4, flattening @import to linked stylesheets cuts ~412ms in a case study, mixins gzip better than extends giving ~23–27% smaller transfers, alphabetizing CSS saves ~3.25% gzip, and crucially inline scripts block until CSS finishes downloading.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 4:14Larger files take longer to download...
3. 5:42Light could travel 59,958km
4. 7:35Base64 is an anti-pattern
5. 7:46that increase is on your Critical Path
6. 8:11An Experiment
7. 14:12Selector Performance
8. 25:44Mixin vs. @extend
9. 27:27Mixins are better for performance than @extend
10. 29:16Asset Domains
11. 39:10Loading CSS and JS
12. 39:23Inline scripts block on CSSOM construction
13. 41:50Load the JS with the async attribute

" related talks

• 30mFaCSSt—CSS and PerformanceHarry Roberts · Render Conference 2018
• 47mFaCSSt—CSS and PerformanceHarry Roberts · Frontend United 2018
• 52mFaCSSt: CSS & PerformanceHarry Roberts · JS Fest 2018
• 38mCSS and the first meaningful paintPatrick Hamann · CSS Conf EU 2017
• 34mCSS and the Critical PathPatrick Hamann · CSSconf EU 2014
• 38m"The Top 5 Mistakes of Massive CSS"Nicole Sullivan · Velocity 2010
• 20mThings I’ve Learned About CSSAdam Morse · CSSConf Oakland 2014
• 27mSpeed Up! Critical CSS to the RescueAmi Reynoso · CSSconf Argentina 2016