Skip to main content

Critical CSS Guide

Critical CSS inlines above-the-fold styles in the HTML <head> so the browser can render visible content immediately, without waiting for external CSS files. It's one of the highest-impact FCP optimizations.

✓ Extraction tools ✓ Inline vs defer pattern ✓ Astro / Next.js integration ✓ Verification with Lighthouse

How Critical CSS Works

<!-- ❌ Standard approach: render-blocking -->
<head>
  <link rel="stylesheet" href="/styles.css">  <!-- Blocks render until downloaded -->
</head>

<!-- ✅ Critical CSS approach -->
<head>
  <!-- 1. Inline critical (above-fold) CSS -->
  <style>
    /* Only styles needed for above-fold content */
    body { font-family: sans-serif; margin: 0; }
    .hero { height: 100vh; background: #111; }
    .nav { display: flex; padding: 1rem; }
  </style>

  <!-- 2. Async-load full CSS (non-render-blocking) -->
  <link
    rel="stylesheet"
    href="/styles.css"
    media="print"
    onload="this.media='all'"
  >
  <noscript><link rel="stylesheet" href="/styles.css"></noscript>
</head>

Using critters (Recommended for Webpack/Next.js)

npm install --save-dev critters
// webpack.config.js
const Critters = require('critters/webpack');

module.exports = {
  plugins: [
    new Critters({
      // Inline critical CSS, preload the rest
      preload: 'swap',         // 'swap' | 'js' | 'js-lazy' | 'media' | 'body'
      pruneSource: true,       // remove inlined styles from the external file
      mergeStylesheets: true,  // merge multiple <style> tags into one
      inlineFonts: false,      // don't inline @font-face (too large)
      preloadFonts: true,      // preload font files instead
    }),
  ],
};

// Next.js — critters is built in:
// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,  // enable critters integration
  },
};

Using critical (CLI Tool)

npm install -g critical

# Extract critical CSS from a URL
critical https://example.com \
  --base dist/ \
  --inline \
  --width 1300 \
  --height 900 \
  --css dist/styles.css

# From a local HTML file
critical dist/index.html \
  --base dist/ \
  --inline \
  --dest dist/index.html

Astro Built-in Critical CSS

// Astro automatically scopes and inlines component CSS.
// For page-level critical CSS, use <style> in your layout:

// src/layouts/BaseLayout.astro
---
const { title } = Astro.props;
---
<html>
  <head>
    <title>{title}</title>
    <!-- Astro scopes this CSS and includes it inline -->
    <style>
      :global(body) { margin: 0; font-family: system-ui; }
      header { position: sticky; top: 0; }
    </style>
    <!-- Non-critical: loaded async -->
    <link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
  </head>
  <body>
    <slot />
  </body>
</html>

Common Mistakes

Frequently Asked Questions

What is critical CSS and why does it improve performance?▼

Critical CSS is the minimum set of CSS rules required to render the above-the-fold content of a page. By inlining this CSS in a <style> tag in the <head>, the browser can render visible content without waiting to download external stylesheets. This reduces render-blocking time and improves FCP (First Contentful Paint) and LCP. The non-critical CSS is then loaded asynchronously after the page is visible.

How do I extract critical CSS automatically?▼

Use tools like `critters` (Google, Astro/Next.js integration), `critical` (Node.js CLI), or `penthouse` (Puppeteer-based). These tools load your page in a headless browser, determine what CSS is needed above the fold, inline it in the HTML, and defer the rest. For static sites, run them at build time. For server-rendered apps, integrate into your build pipeline or use edge-side rendering.

Should I manually write critical CSS or generate it automatically?▼

For most projects, auto-generation is preferred since manual maintenance is error-prone. Use `critters` for Next.js/webpack projects or the built-in critical CSS features in Astro and Nuxt. However, auto-generation tools can include too much or too little CSS. Review the output and verify FCP improvement with Lighthouse. For small sites with hand-crafted CSS, manual critical CSS can be more precise and lighter.

How do I load non-critical CSS without render blocking?▼

Use the media type trick: `<link rel='stylesheet' href='styles.css' media='print' onload="this.media='all'">`. This loads the stylesheet without blocking rendering (print styles don't block render) and switches it to apply to all media once loaded. Add a `<noscript>` fallback for no-JavaScript environments. Alternatively, use `rel='preload'` with `as='style'` and `onload="this.rel='stylesheet'"` for the same effect.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad
⚡ $29

Developer Productivity Bundle

Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.

Buy on Gumroad →
🤖 $19

AI Prompt Engineering Toolkit

58 structured prompt templates for Claude, ChatGPT, and Gemini — organized by use case. Code Review, Debugging, Documentation, Architecture, and 10 model-specific tips. Stop writing prompts from scratch.

Buy on Gumroad →
📋 $14

Developer Cheat Sheet Bundle

10 print-ready cheat sheets for the tools developers use every day: Git, Docker, Linux CLI, SQL, Regex, HTTP Status codes, VS Code shortcuts, Bash scripting, jq/JSON, and Markdown.

Buy on Gumroad →

You Might Also Need

CSS Specificity Calculator

Calculate CSS selector specificity as (inline, ID, class, element) notation. Compare two selectors to see which wins the cascade. Supports :not(), :is(), :has(), :where(), attribute selectors, and pseudo-elements.

Open free tool →

CSS Clip-Path Generator

Generate CSS clip-path values visually. Choose from 16 polygon presets (triangle, star, arrow, hexagon), circle, ellipse, and inset shapes. Live preview, one-click copy. Free, no signup.

Open free tool →

CSS Formatter & Minifier

Format and beautify CSS with consistent indentation, or minify it to reduce file size. Handles @media, @keyframes, nested rules, and comments. Runs in your browser.

Open free tool →

More Free Tools

CSS Specificity Calculator CSS Clip-Path Generator CSS Formatter & Minifier CSS Minifier CSS Container Query Builder Web Performance Checklist CSS Grid Generator CSS Specificity Calculator Flexbox Playground CSS Border Radius Generator CSS Box Shadow Generator CSS Animation Generator CSS Flexbox Visualizer CSS Gradient Generator CSS Unit Converter Lighthouse Score Simulator Web Vitals Budget Planner React Native StyleSheet Generator CSS Flexbox Visualizer Core Web Vitals Guide Aspect Ratio Calculator Code Tools Color Format Converter Color Palette Generator Web Vitals Scorer SQL Index Advisor HAR Diff Analyzer MySQL Query Explainer PostgreSQL EXPLAIN Analyzer k6 Load Test Script Generator HTTP/2 Server Push Headers Builder Web Vitals Analyzer Database Index Analyzer Font Pairing Preview Core Web Vitals Calculator Database Index Advisor Sprite Sheet Coordinate Generator Color Palette Extractor Bezier Curve Editor LLM Benchmark Calculator k6 Script Generator Core Web Vitals Budget Calculator Bundle Size Budget Calculator Image Optimization Calculator TTFB Analyzer Database Query Cost Analyzer

Related Articles

Apr 2, 2026 · 25 min read

Performance Optimization 2026: Complete Guide to Frontend, Backend, and Infrastructure

Comprehensive performance optimization guide for 2026 covering Core Web Vitals, JavaScript bundle optimization, server-side rendering, caching strategies, database query optimization, CDN configuration, and real-world benchmarks.
Apr 2, 2026 · 13 min read

Performance Testing in 2026: Beyond Page Load Times

A practical guide to performance testing in 2026 — Core Web Vitals, load testing, stress testing, soak testing, and building a performance culture that treats speed as a feature. Includes tooling recommendations and actionable measurement strategies.
Apr 2, 2026 · 23 min read

Web Performance and Core Web Vitals 2026: Complete Optimization Guide

Complete guide to Core Web Vitals optimization in 2026. Covers LCP, INP, CLS, TTFB optimization with real code examples. Includes Next.js, React, Vite, Cloudflare Workers, and backend optimization strategies for achieving 90+ Lighthouse scores.
Mar 28, 2026 · 15 min read

CSS View Transitions API: Smooth Page Animations Without JavaScript Frameworks 2026

The View Transitions API enables fluid page animations and shared element transitions natively in the browser — no React Spring, Framer Motion, or animation libraries required. Complete guide with real-world examples for 2026.
Mar 28, 2026 · 14 min read

Web Performance 2026: INP, Core Web Vitals & Lighthouse CI

Master web performance in 2026: INP replacing FID, LCP and CLS optimization, Lighthouse CI in GitHub Actions, RUM with web-vitals.js, and setting performance budgets to keep your site fast.

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →