Critical CSS is the minimum set of style rules needed to paint everything above the fold, inlined into the HTML head so the browser renders immediately. The rest of the stylesheet loads asynchronously, which removes a render blocking round trip and improves LCP.
- A normal stylesheet link is render blocking; the browser paints nothing until it downloads and parses that file.
- Keep the inline critical block under about 14KB so it fits the first network round trip.
- Load the full stylesheet with a preload then swap pattern, and include a noscript fallback.
- Generate critical CSS per template in your build so it stays in sync with your design.
What Critical CSS is
Critical CSS is the minimum set of style rules needed to render everything above the fold, inlined directly into the HTML <head> so the browser can paint immediately. The rest of your stylesheet is loaded afterward, asynchronously, so it never blocks that first paint.
Why it matters: a normal <link rel="stylesheet"> is render-blocking. The browser will not paint a single pixel until it downloads and parses that file. On a slow connection that is a blank screen for hundreds of milliseconds, which wrecks your LCP and your first impression. Critical CSS removes that round-trip from the critical path.
How the technique works
You split your CSS into two buckets: the handful of rules that style the visible header, hero, and headline, and everything else. The first bucket goes inline. The second loads without blocking, using a preload-then-swap trick so the browser fetches it at low priority and applies it once the page is already interactive.
<head>
<!-- 1. Critical CSS inlined: only what the fold needs -->
<style>
:root{--bg:#0d0d12;--fg:#f4f4f8}
body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--fg)}
.site-header{display:flex;align-items:center;height:64px;padding:0 24px}
.hero{min-height:60vh;display:grid;place-items:center;text-align:center}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.1;margin:0}
</style>
<!-- 2. Full stylesheet loaded without blocking the first paint -->
<link rel="preload" href="/css/main.css" as="style"
onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>
</head>The <noscript> fallback matters: if JavaScript is off, the onload swap never fires, so you still want a plain stylesheet link. Keep the inline block small. If your "critical" CSS balloons past ~14KB you are inlining too much and bloating every HTML response.
Critical CSS vs the full stylesheet
| Aspect | Critical CSS (inlined) | Full stylesheet (deferred) |
|---|---|---|
| Location | Inside <style> in the HTML head | External .css file |
| What it covers | Header, hero, above-the-fold layout and fonts | Footer, tabs, modals, everything below the fold |
| Render-blocking? | No, it is already in the document | No, loaded async after first paint |
| Cached across pages? | No, it ships with every HTML response | Yes, one file cached for the whole site |
| Ideal size | Under ~14KB | As large as the site needs |
| Risk if wrong | Flash of unstyled content below the fold | Slower non-critical styling (usually invisible) |
How to check it on your own site
- Open PageSpeed Insights or Lighthouse and look for the "Eliminate render-blocking resources" audit. If your main stylesheet is listed, you have no Critical CSS in place. See how to fix render-blocking resources.
- View source (Ctrl+U) and check the
<head>. A site with Critical CSS has an inline<style>block near the top and its main stylesheet loaded viapreloadormedia="print"swap. - In Chrome DevTools, open the Coverage tab (Cmd/Ctrl+Shift+P, "Show Coverage"), reload, and see how much of your CSS is unused on first paint. High unused percentages tell you what does not belong in the critical set. Then remove the unused CSS.
- Throttle to "Slow 4G" in the Network tab and reload. If you see a blank white screen before content appears, a stylesheet is still blocking render.
- Disable JavaScript and reload. The page should still be readable, that confirms your
<noscript>fallback works.
Common mistakes and how to fix them
- Inlining the entire stylesheet. That defeats the point, every HTML response now carries your whole CSS and nothing is cached. Extract only above-the-fold rules.
- Generating Critical CSS once and forgetting it. The moment you redesign the header, the inline CSS goes stale and you get a flash of unstyled content. Regenerate it in your build pipeline, not by hand.
- One critical bundle for every template. A blog post and a product page have different above-the-fold layouts. Generate per-template Critical CSS or you will inline rules one page never uses.
- Forgetting the
<noscript>fallback. Without it, users with JavaScript disabled get an unstyled page. Always include the plain stylesheet fallback. - Blocking CSS in robots.txt. If you deferred the main stylesheet but also disallowed its path, Googlebot cannot render the page correctly. Never block CSS from crawlers.
FAQ
Does Critical CSS actually improve SEO rankings?
Indirectly, and meaningfully. It improves LCP and First Contentful Paint, both of which feed Core Web Vitals, which is a ranking signal. You are not "adding a ranking keyword," you are removing a render-blocking delay that Google measures.
How big should the inline Critical CSS be?
As small as possible, ideally under 14KB uncompressed. That number lines up with the initial congestion window, so the critical styles fit in the first network round-trip. If yours is much bigger, you are inlining too much.
Should I write Critical CSS by hand?
For a single landing page, sure. For a real site, automate it. Tools like Critical, Penthouse, or Beasties extract the above-the-fold rules per template during your build so the inline block stays in sync with your design.
What is the difference between Critical CSS and removing unused CSS?
Critical CSS is about ordering, painting the visible part first. Removing unused CSS is about total weight, deleting rules no page uses. Do both: extract the critical set, defer the rest, and prune dead rules from that deferred file.
Will inlining CSS cause a flash of unstyled content?
Only if your critical set is incomplete. If a visible element is missing from the inline block, it renders unstyled until the full sheet loads. Test on a throttled connection and add any missing above-the-fold rules.
Does Critical CSS still matter with HTTP/2 and fast CDNs?
Yes. HTTP/2 lets the browser multiplex requests, but an external stylesheet is still a separate round-trip that blocks the first paint. No matter how fast your CDN is, the browser cannot paint until it has the CSS, and the fastest CSS is the one already sitting in the HTML. On a warm connection the win is smaller, on a cold mobile connection it is the difference between a blank screen and instant content.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
