Critical CSS
The minimal set of CSS needed to render the visible portion of a page (above‑the‑fold). Inlined in <head> to speed up First Contentful Paint (FCP).
In brief
Critical CSS is a technique that extracts and inlines styles affecting the viewport so the browser can render content instantly without waiting for the full stylesheet. The rest of the CSS loads asynchronously.
What is Critical CSS
The minimal set of CSS for above‑the‑fold content. Inlined in <head> to speed up FCP.
Why Use It
- Normal CSS is render‑blocking
- Browser waits for full CSS download before rendering
- Inline critical CSS = instant above‑the‑fold paint
Implementation
HTML
<head>
<!-- Critical CSS inline -->
<style>
body { margin: 0; font-family: sans-serif; }
.hero { height: 100vh; background: #000; }
</style>
<!-- Rest of CSS loads asynchronously -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Generation Tools
- Critical — npm package by Addy Osmani
- Penthouse — critical CSS generator
- Critters — webpack plugin
- Next.js — built‑in CSS optimisation
Important Rules
- Critical CSS must be < 14 KB (fits into initial TCP packet)
- Include only styles for the viewport
- Load remaining CSS asynchronously
Automate critical CSS generation in your build pipeline (webpack/gulp) or use server‑side rendering frameworks with built‑in support (Next.js, Nuxt). For simple sites, a one‑time manual extraction may be enough.
FAQ
Common questions
Tools like Critical or Penthouse render the page in a headless browser and extract CSS rules applied to elements inside the viewport. You can also manually analyse the page structure and pick major above‑the‑fold blocks.
It may not fit in the first TCP packet, reducing the benefit. Try to shrink your critical CSS: remove rules for non‑viewport elements (footer, sidebars that appear only after scroll).
Yes. You need to generate critical CSS separately for mobile and desktop breakpoints, or include styles for the most important breakpoints. Some tools can generate a universal set.
Indirectly — yes. Because the page renders faster, images and containers with specified dimensions don't shift after full CSS loads. But for CLS, width/height attributes and avoiding dynamic inserts are more important.
Not mandatory, but it’s one of the most effective ways to improve LCP and FCP, especially on sites with heavy CSS frameworks (Bootstrap, Tailwind).
Direct contacts
Discuss your project?
Share your goals and website context — I will suggest a practical next step.