How to implement Critical CSS and how it will improve loading metrics

on YouTube ↗43m

" summary

Describes implementing Critical CSS generation at runtime for VKontakte because many pages change dynamically (user settings, A/B tests, varied content) so build-time generation is impractical. Presents a custom algorithm they developed for fast runtime Critical CSS extraction, discusses implementation pitfalls, and gives practical advice for improving web loading metrics when writing complex algorithms.

AI-written summary · about

" chapters (19)

1. 0:00Introduction
2. 1:47What is Critical CSS
3. 3:36Standard vs async CSS
4. 5:43Critical CSS in dynamic projects
5. 6:46Simple Critical CSS algorithm
6. 9:41First algorithm results
7. 10:23Algorithm flaws and next steps
8. 10:44Improved algorithm structure
9. 12:31Improved algorithm breakdown
10. 15:39CSS rules and media queries
11. 17:06CSS selector tree labels
12. 17:28KPHP issues and fixes
13. 19:58Data flattening optimization
14. 21:25Parsing and label computation
15. 24:41Invalid markup fixes
16. 25:46Final algorithm results
17. 26:53Loading metrics improvement
18. 27:13Optimization tips
19. 29:43Q&A

" related talks

• 27mSpeed Up! Critical CSS to the RescueAmi Reynoso · CSSconf Argentina 2016
• 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
• 28mCSS and the Critical PathPatrick Hamann · CSSConf US 2014
• 46mCSS Performance ToolingAddy Osmani · CSSconf EU 2014
• 30mAutomating Critical CSSRich Higgins · Front End North 2018
• 27mOptimizing the Critical Rendering Path in ReactAlex Moldovan · React Day Berlin 2018