Speed Up! Critical CSS to the Rescue

on YouTube ↗27m

" summary

Explains extracting and inlining Critical CSS—the styles required for the initial viewport—so the page paints faster while the rest of the stylesheet loads asynchronously (via JavaScript or preload). Describes implementations using tools like Penthouse or critical (npm), custom pipelines, cookie caching and a noscript fallback, and discusses tradeoffs (JS dependence and maintenance cost when generating many variants) plus measured results: ~56% perceived speed improvement, ~8% actual load reduction, and a 2% conversion uplift.

AI-written summary · about

" chapters (20)

1. 0:00Welcome
2. 1:24Website speed
3. 2:05User perception
4. 3:48Rendering path impact
5. 5:35Critical rendering path
6. 7:20Common rendering blocks
7. 9:28Optimize rendering path
8. 11:11Why critical CSS
9. 13:17Critical CSS for initial view
10. 14:43Inline critical styles
11. 15:46Critical CSS benefits
12. 16:51Cookies and cache
13. 17:11Load critical styles with JS
14. 18:13Preload critical styles
15. 19:20Verify cache
16. 20:22Critical CSS tools
17. 21:47Manual vs automated
18. 22:07Critical CSS at Mercado Libre
19. 24:56Results and metrics
20. 26:19Impact on users

" related talks

• 34mCSS and the Critical PathPatrick Hamann · CSSconf EU 2014
• 30mHigh Performance in the Critical Rendering PathNicolás Bevacqua · JSConf Colombia 2015
• 29mHigh Performance in the Critical Rendering PathNicolás Bevacqua · NEJS Conf 2015
• 46mCSS Performance ToolingAddy Osmani · CSSconf EU 2014
• 28mCSS and the Critical PathPatrick Hamann · CSSConf US 2014
• 38mCSS and the first meaningful paintPatrick Hamann · CSS Conf EU 2017
• 27mHigh Performance in the Critical Rendering PathNicolás Bevacqua · JSConf Budapest 2016
• 42mDelivering ResponsiblyScott Jehl · beyond tellerrand Düsseldorf 2015