Critical CSS is the subset of a stylesheet that contains only the rules needed to paint the above‑the‑fold content of a page. By inlining this CSS directly in the HTML head, the browser can render the first view without waiting for external style files to download.
Also called: above‑the‑fold CSS, critical path CSS
Why it matters
Delivering critical CSS speeds up the first visual impression, which keeps visitors engaged and reduces the chance they leave before the rest of the site loads, directly affecting conversion rates and client satisfaction.
How it works
During the build step a tool parses the HTML and the full CSS bundle, determines which selectors apply to the initial viewport, and extracts those rules into a small block that is placed in a <style> tag in the document head. The remaining stylesheet is loaded asynchronously via a <link rel=”preload” as=”style”> or JavaScript loader, allowing the page to continue rendering once the critical CSS has been applied.
The mistake people make
A common error is to guess which rules are needed or to copy a fixed amount of CSS, which often omits dependent styles and results in a flash of unstyled content or broken layout. The correct approach is to generate the critical set automatically or audit it thoroughly to ensure all required dependencies are included.
Related terms
render‑blocking CSS, page speed, lazy loading, content delivery network
