---
title: Extract Critical CSS for Initial Render
impact: MEDIUM-HIGH
impactDescription: 100-300ms faster FCP on slow connections
tags: bundle, critical-css, performance, fcp, rendering
---

## Extract Critical CSS for Initial Render

For large applications, extract critical CSS for above-the-fold content to improve First Contentful Paint (FCP). Most modern frameworks handle this automatically.

**Incorrect (single render-blocking stylesheet):**

```html
<head>
  <!-- Blocks rendering until fully loaded -->
  <link href="/styles.css" rel="stylesheet">
</head>
```

**Correct (critical CSS inlined with async loading):**

```html
<head>
  <!-- Critical styles inline for immediate render -->
  <style>/* Generated by build tool — above-the-fold styles */</style>

  <!-- Full stylesheet loads async -->
  <link href="/styles.css" rel="stylesheet" media="print" onload="this.media='all'">
  <noscript><link href="/styles.css" rel="stylesheet"></noscript>
</head>
```

**Framework-specific solutions:**

```typescript
// Next.js — automatically inlines critical CSS with App Router
// No manual configuration needed

// Vite — use vite-plugin-critical or critters
import critical from "vite-plugin-critical";

export default defineConfig({
  plugins: [
    tailwindcss(),
    critical({ criticalUrl: "http://localhost:3000" }),
  ],
});
```

**When to use:**
- Large CSS bundles (>50KB)
- Slow network connections matter (3G users)
- FCP is a critical metric
- Framework doesn't handle it automatically

**Note:** Many modern frameworks (Next.js App Router, Nuxt, SvelteKit) handle critical CSS extraction automatically. Check your framework's docs before adding manual tooling.

Reference: [Tailwind CSS Optimizing for Production](https://tailwindcss.com/docs/optimizing-for-production)
