What Is Critical CSS? Inlining Above-the-Fold Styles
Critical CSS is the minimal set of styles needed to render the visible, above-the-fold part of a page, inlined so the page can paint without waiting for a stylesheet.
A page cannot render until its CSS arrives, and a blocking stylesheet request delays first paint. Critical CSS extracts just the styles needed for the initially visible content and inlines them in the HTML, so the page paints immediately while the full stylesheet loads in the background. Extracting it is a build-time step that fits into your CI pipeline.
Why it speeds first paint
Normally the browser must download and parse the full stylesheet before painting. Inlining the critical subset removes that round trip for the first view, so meaningful content appears sooner.
How it is extracted
Tools render the page and determine which CSS rules apply to the above-the-fold content. That subset is inlined into the HTML head, and the rest of the CSS is loaded asynchronously so it does not block.
The trade-offs
- Faster first paint and better load metrics.
- Inlined CSS is duplicated and not separately cacheable.
- It must be regenerated when styles or layout change.
Keeping it accurate
Critical CSS is only correct for the layout it was extracted from. If the design changes but the critical CSS is stale, the first paint can look wrong, so it must be regenerated as part of the build, not edited by hand.
Critical CSS in CI/CD
The build extracts and inlines critical CSS as part of producing the HTML, so it stays in sync with the current styles on every deploy. Because extraction can require rendering the page, it adds build time, which is a reason to cache it when inputs are unchanged.
Key takeaways
- Critical CSS inlines the above-the-fold styles for faster first paint.
- It must be regenerated by the build, not hand-edited, to stay accurate.
- CI extracts it during the HTML build so it matches the current styles.