Skip to content
Critical CSS

Critical CSS generator — eliminate render-blocking CSS

Extract above-the-fold CSS for any URL, inline it into your HTML, and defer the rest. The fastest way to fix Lighthouse's “Eliminate render-blocking resources” warning and cut LCP by 200–800ms.

Extract Critical CSSView Pricing
dashboard.perfbee.com/critical-css
Original CSS
142 KB
Render-blocking
Critical CSS
12 KB
Inlined in <head>
<!-- Critical CSS inlined -->
<style>
.header{display:flex}
.hero{color:#fff}
</style>
INLINED
Visual Similarity
98%

One crawl checks your whole site — content, links and speed.

Complete

Content Monitor

Flags every page missing a required label, doc, banner or schema.

Correct

Broken + Missing

Broken links and technical SEO caught in one crawl.

Fast

2KB RUM

Real Core Web Vitals from real visitors, no bloat.

Always on

Daily scans

Scheduled crawls with drift alerts the moment something slips.

Free forever plan · Paid plans from $19/mo · No credit card to start

How It Works

Three steps to zero render-blocking CSS

No build tool changes. No webpack plugins. Just your URL and a copy-paste snippet.

01

Extract Critical CSS

Enter your URL and we render your page on both mobile (375×667) and desktop (1920×1080) to identify exactly which CSS rules are needed above the fold.

02

Inline & Eliminate Blocking

Copy-paste the minified critical CSS directly into your <head>. Defer the rest — render-blocking stylesheets are gone, and your LCP improves immediately.

03

Monitor & Stay Current

Schedule recurring extractions so your critical CSS stays in sync as your design evolves. Get alerted when visual similarity drops below your threshold.

Capabilities

Everything you need to ship faster CSS

From one-click extraction to scheduled monitoring and visual regression testing.

Critical CSS Extractor

Headless browser renders your page at real viewport sizes, identifies every CSS rule needed to paint the visible content, then minifies and outputs copy-paste ready code.

Output · Minified
12.4 KB extracted
.header{display:flex;align-items:center}
.hero{color:#fff;font-size:2rem}
.nav{position:fixed;top:0;width:100%}
.btn-primary{background:#ffc71f;padding:.75rem}
INLINED
142 KBOriginal
12 KBCritical

Visual Regression Testing

After inlining, we take a screenshot and compare pixel-by-pixel against the full-CSS render. You get a similarity score and a diff overlay so you can ship with confidence.

Full CSS
Critical CSS
Visual Similarity Score
98%
  • Mobile (375×667) + Desktop (1920×1080) renders
  • Pixel-diff overlay for instant inspection
  • Fail threshold alerts via email / Slack

Scheduled Extractions

Keep your critical CSS fresh. Schedule automatic re-extractions daily or weekly so design changes never break your performance.

30-Day History

Browse every past extraction with its visual similarity score and CSS size. Roll back to any previous version with one click.

Mobile & Desktop

Separate critical CSS output for mobile and desktop viewports — inline only what each device actually needs above the fold.

Why It Matters

The browser can't paint until CSS loads

Every external stylesheet blocks the browser from rendering your page. Inlining critical CSS eliminates that wait — users see content faster, LCP drops, and Google notices.

200ms
Avg. LCP improvement after inlining critical CSS
0
Render-blocking stylesheet requests after extraction
Top 3
Google ranking factor: Core Web Vitals (LCP)
Extract My Critical CSS
Page Load Impact
After inlining
LCPLargest Contentful Paint
2.8s0.9s
FCPFirst Contentful Paint
1.9s0.6s
TTFBTime to First Byte (render)
480ms180ms
0 render-blocking stylesheets
Was 3 external CSS files blocking paint
✓

Critical CSS for every framework

PerfBee generates the snippet — you paste it where it belongs. Here's how it fits in the stacks people ask about most.

Critical CSS for WordPress

Drop the extracted CSS into your theme's header.php inside a <style> tag, or hook into wp_head. Defer the rest of your stylesheets using the standard preload pattern.

Works without Autoptimize or WP Rocket — but if you already use them, you can paste PerfBee's output into their critical CSS field for tighter control.

Critical CSS for Next.js & React

In Next.js, add the snippet to _document.tsx using dangerouslySetInnerHTML inside a <Head> <style> block.

For Vite or CRA, paste it directly into index.html. Pair with rel="preload" on the main stylesheet to async-load the rest.

Critical CSS for Shopify

Add the snippet to theme.liquid inside a <style> tag in the <head>. Replace the stylesheet link with a preload + onload pattern.

One of the few performance fixes Shopify allows without theme app injection — and it consistently lands +10 points on the Shopify Lighthouse test.

Critical CSS for static sites

For Astro, Hugo, Eleventy, and Jekyll, inline the snippet in your layout template's <head>. Most static-site generators support a partial include, so you can pull from a single critical CSS file across templates.

Pair with a build hook that re-runs PerfBee's extractor on every deploy to keep critical CSS in sync.

Need a one-off LCP fix? Run the free tools.

Critical CSS is the highest-leverage performance fix, but it works alongside other Core Web Vitals improvements. Spot-check your numbers below before deciding on the full PerfBee monitoring platform.

LCP CheckerWebsite Speed TestPage Size Analyzer

Critical CSS FAQ

Everything developers ask before shipping critical CSS to production.

What is critical CSS?
Critical CSS is the minimum set of CSS rules required to render the above-the-fold content of a page. By inlining it directly into the <head> of your HTML, the browser can paint the visible portion of your page immediately — without waiting for external stylesheets to download.
How does critical CSS improve LCP?
External CSS files are render-blocking — the browser cannot paint anything until they finish downloading. Inlining critical CSS in the document head lets the browser render immediately, often reducing LCP by 200–800ms. It is one of the highest-impact optimizations for passing Core Web Vitals.
How do I inline critical CSS in WordPress?
Hook into wp_head and output a <style> tag with your extracted CSS, or paste it directly into your theme's header.php. Plugins like Autoptimize and WP Rocket automate this, but PerfBee gives you control over the extraction viewport and lets you regenerate without plugin overhead.
How do I inline critical CSS in Next.js or React?
In Next.js, add the snippet to _document.tsx using dangerouslySetInnerHTML inside a <Head> <style> tag. For Vite or CRA, paste it directly into index.html. Pair with rel="preload" on the main stylesheet to async-load the rest.
Critical CSS vs CSS minification — what is the difference?
Minification removes whitespace and shortens names but keeps the entire stylesheet. Critical CSS extraction is fundamentally different: it analyzes which CSS rules are actually used by above-the-fold content and discards the rest. Minified CSS is still render-blocking; inlined critical CSS is not.
Will inlining critical CSS hurt my CLS?
No — properly extracted critical CSS reduces CLS because the browser has the styling needed to render the final layout immediately. CLS problems typically come from un-styled content briefly appearing (FOUT) or images without dimensions, both of which critical CSS helps prevent.
How often should I regenerate critical CSS?
Regenerate whenever you change your above-the-fold design — typically every deploy that touches header, hero, or navigation styles. PerfBee can monitor visual similarity and alert you when the critical CSS drifts below your threshold, so you only regenerate when needed.
Does critical CSS work with Shopify themes?
Yes. Add the extracted critical CSS to theme.liquid inside a <style> tag in the <head>, then defer the rest of your stylesheets using a preload pattern. This is one of the few performance optimizations Shopify allows without app changes.

The rest of the platform

One crawl, every kind of problem

Everything below runs on the same scan of your site, so what's missing, what's broken and what's slow all land in one place.

Content Monitor

Checks that every page still has the labels, manuals, docs and schema it is supposed to have — and alerts you when a template change drops them.

Learn more

Site Crawler

Cloud crawler for broken links, redirect chains, meta issues and indexability — no desktop install.

Learn more

Performance Boost

Lighthouse audits and Core Web Vitals over time, with AI-suggested code fixes.

Learn more

Real User Monitoring

Field LCP, INP and CLS from actual visitors — one lightweight snippet.

Learn more

Your website has something broken — or missing — that you don't know about yet.

PerfBee finds broken links, slow pages, and the labels, manuals and banners that silently vanish when a template changes. It also tells you exactly how to fix them.

Start Free AuditSee how it works
  • Free forever, no credit card
  • Your first audit in minutes
  • Built for large catalog sites