CSS critical-css-extractor

Free Performance Tool

Critical CSS Extractor —
Identify Above-the-Fold Styles

Paste your HTML and CSS to identify which rules are critical for above-the-fold rendering, separate them from deferred styles, and get inline-ready critical CSS output. Reduces render-blocking CSS and improves LCP.

Above-fold detection Inline-ready output Deferred CSS split LCP improvement Free · No login
CSS Input Paste full stylesheet
HTML Input Paste page HTML
```
⚠ Static analysis only. This tool cannot render your page — it classifies rules using selector matching and above-fold heuristics. For production use, complement with Chrome DevTools Coverage or Penthouse (Node.js) for pixel-accurate extraction.
Critical CSS
Deferred CSS
✓ Inline Usage — Paste in <head>
```
// Core concept

What Is Critical CSS and Why Does It Matter for Performance?

Critical CSS is the minimum set of CSS rules needed to render the above-the-fold content of a webpage — the portion visible to the user before any scrolling. When a browser encounters a <link rel="stylesheet"> in the HTML head, it blocks rendering until the stylesheet is fully downloaded and parsed. On a 3G connection, a 100KB stylesheet can delay First Contentful Paint by 2-4 seconds.

The solution: extract the critical CSS rules, inline them directly in a <style> tag in the head (eliminating the blocking network request), and load the full stylesheet asynchronously after the page renders. This technique directly improves LCP (Largest Contentful Paint) and FCP (First Contentful Paint) — two of Google's Core Web Vitals metrics used as SEO ranking signals.

Studies from Google show that eliminating render-blocking CSS reduces LCP by 0.5–2 seconds on average for pages with large stylesheets. For pages using CSS frameworks (Bootstrap, Tailwind, Bulma), the impact is even larger — a full Bootstrap CSS is 180KB, but the critical CSS for a typical landing page is under 5KB.

// How it works

How to Extract and Inline Critical CSS

01 //

Paste HTML and CSS

Copy your page's full CSS and HTML into the two panels. The more complete your HTML, the more accurate the selector matching.

02 //

Extract and review

The tool classifies rules by above-fold priority: layout rules, typography, structural elements, and visible components come first.

03 //

Inline in <head>

Copy the critical CSS output into a <style> tag in your HTML head. Load the full stylesheet asynchronously using the preload pattern.

To load the full stylesheet non-blocking after critical CSS is inlined:

<!-- In <head>: inline critical CSS -->
// Community questions

What Developers Ask About Critical CSS

How much CSS should I inline as critical?
The commonly cited target is under 14KB for all inlined content (HTML + critical CSS combined) — this fits in the first TCP congestion window and is served in a single round-trip. In practice, critical CSS for most pages is 2-8KB before gzip. If your critical CSS is over 20KB uncompressed, you likely have too many above-fold styles or are including framework CSS that could be scoped more tightly.

```

What's the difference between this tool and Penthouse or Critical (Node.js)?
Penthouse and Critical spawn a headless Chrome/Puppeteer instance, load your actual page at a specific viewport size, and capture exactly which CSS rules apply to visible elements. They give pixel-accurate results but require Node.js and a build step. This tool uses static selector matching and heuristics — no Node.js, no install, instant results. Use this for quick analysis or when you can't run Node tools. Use Penthouse/Critical in your build pipeline for production accuracy.

Should I extract critical CSS for every page or just the homepage?
Start with your highest-traffic pages and pages with the worst LCP scores (check Google Search Console Core Web Vitals report). The homepage, product listing pages, and article templates typically have the most impact. Each page template can have different critical CSS — a product detail page has different above-fold elements than a blog post. Many teams generate critical CSS per-template during the build process using Penthouse or Critical.

Will inlining critical CSS hurt my cache performance?
Yes, slightly — inlined CSS can't be cached separately from the HTML. The trade-off is nearly always worth it: the LCP improvement from eliminating the render-blocking request outweighs the caching cost, especially on first visit. The full stylesheet still loads asynchronously and gets cached after the first visit. For pages where HTML is heavily cached (SSG/CDN), the impact is even smaller.

// FAQ

Frequently Asked Questions

Critical CSS is the minimum CSS needed to render above-the-fold content. Inlining it eliminates the render-blocking stylesheet request, directly improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP) — Core Web Vitals metrics that affect both user experience and Google search rankings.
This tool uses static CSS selector matching against your HTML and above-fold heuristics (element types, common class names, layout properties). It's accurate for matching rules and classifying layout/typography. It cannot determine pixel-exact viewport visibility like browser-based tools (Penthouse, Critical). Use it for quick analysis and supplement with Chrome DevTools Coverage for production use.
Rules matching HTML elements present in your HTML input, with priority given to: layout rules (position, display, grid, flexbox), typography (font-size, line-height, font-family on body/headings), structural above-fold elements (header, nav, h1, hero sections), CSS variables and resets (apply globally), and media queries. Rules for elements not found in your HTML are classified as potentially deferred.
Use the preload pattern: <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> with a noscript fallback. Alternatively, use media="print" with an onload swap. Both methods load the stylesheet without blocking rendering, applying it after the page is visible. The loadCSS polyfill handles older browser compatibility.
Yes. Paste your compiled CSS (not the source) and your HTML. For Tailwind, paste the generated CSS after PurgeCSS has already removed unused classes — don't paste the full Tailwind source. For Bootstrap, pasting the full CSS will show how much is used vs unused on your page, which is often less than 10% of the full stylesheet.