Critical CSS is the subset of a site's styles needed to render the content visible in the first viewport. Inlining it in a style tag in the HTML head lets the browser paint immediately without waiting for an external stylesheet, while the rest of the CSS loads without blocking. It targets First Contentful Paint and, often, Largest Contentful Paint.
How it works
A tool renders the page at one or more viewport sizes, records which CSS rules apply to elements above the fold, and outputs those rules. The build inlines them in the head and changes the full stylesheet link so it loads without blocking.
<head>
<style>/* critical rules: header, hero, nav, fonts */</style>
<link rel="preload" href="/css/site.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/site.css"></noscript>
</head>When it is worth it
Critical CSS helps most when the full stylesheet is large and the server response is fast, so CSS is the main thing holding up the first paint. If your CSS is already small, split by page, or delivered over HTTP/2 from a fast CDN, the gain may be small. Some frameworks extract or inline CSS automatically, so check what yours already does.
Risks
Inlined CSS is not cached separately, so it adds bytes to every HTML response. If the critical set misses rules, the page can render unstyled and then jump, which causes layout shift. Regenerate critical CSS as part of the build so it stays in sync with design changes.
Example
A large theme stylesheet
Hollowmere's site uses a theme with one large stylesheet for every page. Lighthouse shows it as the biggest render-blocking resource. Adding a build step that inlines critical CSS for each template and loads the full sheet asynchronously brings First Contentful Paint forward on mobile lab tests, with no visual change once the page has loaded.
Common mistakes
Generating it once by hand
Hand-made critical CSS goes stale with every design change. Automate it in the build.
Inlining the entire stylesheet
That bloats every HTML response and defeats caching. Inline only what the first viewport needs.
Questions
No. It improves how fast pages render for users, which feeds into page experience metrics measured from real visits.
