Pull the CSS rules your above-the-fold content needs into a small, inline-ready block — and keep the rest as deferred CSS — so your page paints faster. Paste your stylesheet, list the selectors that appear at the top of the page, and extract. 100% in your browser — nothing is uploaded or stored.
🔒 Everything runs in your browser. Your CSS is never uploaded, logged or stored.
The Critical CSS Extractor separates the small set of style rules your above-the-fold content needs from the rest of your stylesheet. You inline the critical part in the page head so the first screen paints immediately, and load the remaining deferred CSS asynchronously. This is one of the most effective ways to improve First Contentful Paint and Largest Contentful Paint — two metrics that matter for both user experience and search performance.
It is part of the Performance & Code Tools group in our free SEO Toolkit. Pair it with the CSS Minifier to shrink both halves, the HTML Minifier and JavaScript Minifier to trim the rest of the page, the Page Size Calculator to budget total weight, and the Code Beautifier to read the output. Everything runs in your browser — your CSS is never uploaded or stored.
Inline what matters, defer the rest.
You choose the above-the-fold selectors; it extracts those rules.
Get inline-ready critical CSS and the deferred remainder.
See how much smaller the critical block is than the full file.
Keeps matching rules inside media queries and base styles.
From full stylesheet to critical CSS.
Drop in your full stylesheet.
Name the above-the-fold selectors.
Get critical and deferred CSS.
Inline critical, load the rest async.
The recommended loading pattern.
<style>/* critical CSS inlined here */</style> <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
Critical CSS is the minimum set of style rules needed to render the part of a page a visitor sees first, before scrolling — the above-the-fold content. By inlining this small block directly in the page head and loading the rest of the stylesheet asynchronously, the browser can paint the first screen without waiting to download the full CSS file. This reduces render-blocking and improves perceived speed. This tool helps you separate the two. It is part of the Performance & Code Tools group.
By default, a browser will not paint a page until it has downloaded and parsed the CSS referenced in the head, because that CSS is render-blocking. On a large stylesheet over a slow connection, this delays the first paint noticeably. Inlining only the critical rules removes that wait for the first screen, while the full stylesheet loads in the background and takes over seamlessly.
The first screen renders without waiting for the full CSS.
Largest Contentful Paint improves when above-the-fold styles arrive instantly.
Deferring the rest removes a render-blocking request.
The benefit is largest on slow mobile connections.
Fully automatic critical CSS tools load your page in a headless browser, render it at a chosen viewport, and record which rules apply to visible elements. A private, in-browser tool cannot launch a headless browser or fetch your live page, so instead of pretending to, this extractor takes a selector-driven approach: you provide the selectors and tags that appear above the fold, and it pulls exactly those rules from your stylesheet. This gives you precise control and keeps your CSS on your device.
Open your page, and using browser developer tools, inspect the elements visible before scrolling — typically the header, navigation, hero section, main heading and primary buttons. Note their classes, ids and tags and list them in the tool. The starter list covers the most common ones, which you can then tailor to your design.
A common pattern is to preload the full stylesheet and switch it to a stylesheet once loaded, so it does not block rendering. Inline the critical CSS in a style tag in the head, then load the deferred file asynchronously. The example on this page shows the markup, and many performance plugins automate this step.
Inlining everything makes the HTML large and cannot be cached separately, so it is re-sent on every page. Critical CSS keeps the inline block tiny — only what the first screen needs — while the full stylesheet stays a cacheable file. That balance gives fast first paint without bloating every page load.
No. Parsing and extraction run entirely in your browser with JavaScript, and the tool never makes a network request. Nothing you paste is uploaded, logged or stored, so it is safe for proprietary stylesheets and confidential client projects.
Improve FCP and LCP on key landing pages.
Make campaign pages paint instantly.
Inline the header and hero styles for fast reads.
Understand render-blocking and how to fix it.
Use the Critical CSS Extractor with these tools from the SEO Toolkit: shrink both halves with the CSS Minifier, compress markup with the HTML Minifier, trim scripts with the JavaScript Minifier, budget weight with the Page Size Calculator, estimate images with the Image Size Estimator, and format the output with the Code Beautifier.
Anyone chasing a faster first paint.
Everything about critical CSS.
It separates your stylesheet into two parts: the critical CSS your above-the-fold content needs, which you inline in the page head, and the deferred remainder, which you load asynchronously. You paste your CSS and list the above-the-fold selectors, and it extracts the matching rules.
Yes, completely. There is no cost, no sign-up and no limit on how much CSS you process. The tool runs entirely in your browser, so there are no server costs and nothing to pay for.
Truly automatic critical CSS requires loading your page in a headless browser to see which elements are visible, which a private in-browser tool cannot do. Rather than fake it, this tool lets you supply the above-the-fold selectors, giving you precise control while keeping everything on your device.
Inspect your page with browser developer tools and look at the elements visible before scrolling — usually the header, navigation, hero, main heading and primary buttons. List their classes, ids and tags. The starter list includes the most common ones as a convenient starting point.
No. Parsing and extraction run entirely in your browser, and the tool never makes a network request. Nothing you paste is uploaded, logged or stored, so it is safe for proprietary stylesheets and confidential client work.
Yes. When a media query contains rules that match your above-the-fold selectors, the tool rebuilds that query in the critical output with only the matching rules inside it. The full original media query also remains in the deferred CSS so nothing is lost.
Base rules target html, body and :root, plus font-face and import at-rules. They set page-wide defaults like fonts, colours and custom properties that almost everything depends on, so the option to always keep them in the critical CSS prevents the first paint from looking unstyled.
A common approach is to preload the stylesheet and switch it to a stylesheet once it has loaded, so it does not block rendering. You inline the critical block in the head and load the deferred file asynchronously. The example on this page shows the markup pattern.
It removes a render-blocking stylesheet for the first paint, which often helps First Contentful Paint and Largest Contentful Paint. Actual scores depend on many factors including images, scripts, server speed and hosting, so treat critical CSS as one important improvement among several.
Yes. Because the critical CSS is inlined in every page, keeping it small matters. Run the critical output through the CSS Minifier before inlining to remove comments and whitespace. The deferred file should be minified too, as it is a normal cacheable stylesheet.
Yes. The extractor is fully responsive, so you can split CSS from a phone or tablet. Pasting your stylesheet, listing selectors, extracting and copying the critical and deferred output all work the same as on desktop.
Convert, compress, and resize images in multiple formats — JPG, PNG, WebP, ICO, and more.
Calculate in-hand salary, CTC breakup, tax deductions, and more for Indian employees.
Convert length, weight, temperature, speed, volume, and 200+ measurement units instantly.
Count words, convert case, generate lorem ipsum, find & replace text, and more writing utilities.
Split your stylesheet into inline-ready critical CSS and a deferred remainder to speed up first paint — free, private and instant in your browser.
⚡ Open the Extractor ← All Performance Tools