Critical CSS: How to Extract and Minify Critical CSS for Optimal LCP
Learn how to extract, minify and inline critical CSS to drastically improve your Largest Contentful Paint (LCP) and Core Web Vitals.
Why CSS blocks your LCP
Every external stylesheet is render-blocking: the browser delays painting until it has downloaded and parsed the entire CSS file — even when only a handful of rules apply to above-the-fold content. On a marketing landing page with 180 KB of styles, Largest Contentful Paint (LCP) can easily exceed 3 seconds on mobile. The Critical CSS strategy extracts above-the-fold styles, minifies them, inlines them in the `<head>`, then loads the rest asynchronously. To shrink the extracted block immediately, FastMinify's online CSS minifier lets you validate savings in a few clicks. This guide covers the full workflow — extraction, minification, HTML inlining and measurement — as a complement to our complete CSS minification guide and the article on Core Web Vitals and minification.
Measurable impact on LCP
Realistic numbers for a page with Bootstrap + custom theme, measured on simulated mobile 4G (Lighthouse):
Before optimization
After optimization
Improvements
The technique delivers the most value in these contexts:
Measure impact on your Core Web Vitals
Verify that Critical CSS actually improves LCP — not just the synthetic Lighthouse score. Cross lab and field data:
Compare before/after on a representative page sample. See our Core Web Vitals and fast-site SEO articles for Google thresholds and ranking impact.
Inline critical CSS in HTML
Combine inline CSS for critical rules and deferred loading for the rest. This pattern works with most stacks and avoids FOUC when noscript is present:
Before
<head>
<link rel="stylesheet" href="/css/bundle.css">
</head>
<body>
<header class="hero">...</header>
</body>After
<head>
<style>.hero{background:#0f172a;color:#fff;padding:2rem}</style>
<link rel="preload" href="/css/bundle.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/bundle.css"></noscript>
</head>Integration in modern frameworks
Next.js 13+ can optimize CSS via Critters (experimental). Enable `experimental.optimizeCss` or use `@next/critical` to generate critical CSS at build time:
App Router
In `next.config.js`: `experimental: { optimizeCss: true }` — Critters automatically inlines critical CSS for statically generated pages.
Manual build
For fine control, run `critical` post-build on `out/index.html` (static export) or SSR page snapshots.
The Vue and React ecosystems offer mature plugins that automate extraction:
Nuxt
`@nuxtjs/critters` module — automatic critical CSS injection at prerender.
Gatsby
`gatsby-plugin-critical` plugin — generates and inlines critical CSS for each page at build.
Best practices and common pitfalls
Before pushing to production, validate this list:
These issues often appear after a first Critical CSS implementation:
What is Critical CSS?
Critical CSS is the minimal set of rules needed to display above-the-fold content correctly in the initial viewport: header, hero, base typography, main layout. Every external `<link rel="stylesheet">` blocks rendering while the browser builds the CSSOM. Minification reduces size; Critical CSS reduces blocking by delivering those rules inline without a network round trip.
The most common transformation on a static or SSR page:
Before
<head>
<link rel="stylesheet" href="/styles/main.css">
<!-- 180 KB blocking before first paint -->
</head>After
<head>
<style>/* ~4 KB minified critical CSS inline */</style>
<link rel="preload" href="/styles/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>Minify your Critical CSS with FastMinify
After extraction with `critical` or Penthouse, paste the CSS into FastMinify's online CSS minifier for the most compact version before inlining. Then minify the final HTML with our online HTML minifier if you serve static pages.
Step 1: Extract
Generate `critical.css` with critical/Penthouse on your production build (not dev — classes may differ).
Step 2: Minify
Paste extracted CSS into FastMinify. Compare before/after size — aim for under 14 KB inline when possible.
Step 3: Inline and defer the rest
Insert minified CSS in a `<style>` tag in the `<head>`. Load the full stylesheet async via preload or media print trick.
Extract critical CSS programmatically
The `critical` package is the standard way to generate critical CSS from a URL or HTML file. Configure viewport dimensions (mobile + desktop) to cover real-world cases:
Configuration
const critical = require('critical');
critical.generate({
inline: true,
base: 'dist/',
src: 'index.html',
target: 'index-critical.html',
width: 1300,
height: 900,
dimensions: [
{ width: 375, height: 667 },
{ width: 1300, height: 900 }
]
});Usage
// Penthouse (alternative) — similar API
const penthouse = require('penthouse');
const criticalCss = await penthouse({
url: 'https://example.com',
css: 'dist/styles/main.css',
width: 1300,
height: 900
});Generated CSS still contains whitespace and comments. Run it through CSSO or our online tool before inlining — see the CSS minification guide for advanced options. Typical savings: 30–50% on the extracted block.
Configuration
const csso = require('csso');
const fs = require('fs');
const raw = fs.readFileSync('critical.css', 'utf8');
const minified = csso.minify(raw, { restructure: true }).css;
fs.writeFileSync('critical.min.css', minified);Usage
// Or via FastMinify: paste extracted CSS,
// minify, copy result into <style>...</style>Conclusion
Critical CSS is one of the highest-ROI optimizations to improve LCP without rewriting your stack: extract above-the-fold styles, minify aggressively, inline in HTML, defer the rest. Combine this approach with systematic CSS minification, Brotli compression and lean HTML to maximize impact on Core Web Vitals and search rankings.
Related Articles
Speed up your REST APIs by optimizing JSON payloads. Minification, compression, pagination and best practices for ultra-fast APIs.
Understand how tree shaking and JavaScript minification differ — two complementary ways to shrink bundles and speed up your site.
Learn how to beautify and format your JavaScript, CSS, HTML and JSON code instantly. Complete guide to online and editor-integrated beautification tools.