Critical CSS and Render Blocking
Inline critical above-the-fold CSS and defer non-critical styles to eliminate render blocking.
How the Browser Renders
The browser parses HTML into a DOM, CSS into a CSSOM, combines them into a render tree, runs layout, and then paints. CSS blocks rendering until the CSSOM is complete — every byte of CSS on the critical path delays first paint.
What is Critical CSS?
Critical CSS is the minimal set of styles required to render above-the-fold content. Inlining it in <style> tags in the <head> eliminates the render-blocking stylesheet request for the initial view.
All lessons in this course
- Critical CSS and Render Blocking
- Layout Paint and Composite: The Rendering Pipeline
- will-change and Layer Promotion
- CSS Coverage and Unused Styles