Automating Critical CSS

on YouTube ↗30m

" summary

Automates per-template critical CSS generation for a modular, CMS‑driven Co-op site using Contentful, Django, Fastly and the Filament/addy osmani tooling, wiring generation into a Jenkins build pipeline. Five page templates get static HTML snapshots, critical CSS inlined first load, then a cookie flips to an async linked stylesheet. Results show start render around 1.7s and speed index ~2,825 on Nexus 5 3G and PageSpeed ~91/100; rebuild timing and webhook triggers need refinement.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 0:30Digital Transformation
3. 3:02Architecture
4. 10:37Performance
5. 13:50Critical CSS
6. 16:23Critical Library
7. 18:52Configuration
8. 23:29Testing

" related talks

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