Critical CSS
Extract and inline above-the-fold CSS to eliminate render-blocking stylesheets.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 100% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
Critical CSS is the minimum set of styles needed to render above-the-fold content without external stylesheets. By inlining these styles in <head> and deferring the full CSS file, the browser can paint meaningful content immediately — no network round-trip required for styles.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
External stylesheets are render-blocking by default. The browser must download, parse, and apply them before painting anything. On slow connections this can add hundreds of milliseconds to First Contentful Paint even when the stylesheet is cached.
Performance Impact
LCP
150–400ms
hero content renders sooner
FCP
200–500ms
eliminates stylesheet round-trip on first view
SI
above-fold styles are inline; first meaningful paint arrives without waiting for an external stylesheet request
Risk: Medium
extraction must be accurate per template
How it works
01
Extract above-fold styles
A headless browser renders each page template and records CSS rules applying to elements within the initial viewport.
02
Inline the critical portion
The extracted CSS (typically 5–20 KB) is placed in a
<style>tag in<head>— zero extra requests.03
Defer the full stylesheet
The full CSS loads non-blocking via
rel="preload" as="style"with anonloadswap so it does not block rendering.
Limitations
- Extraction must be per-template — homepage, product page, and post each need different above-fold styles.
- Dynamic content (logged-in states, A/B variants) requires additional extraction passes.
- CSS-in-JS frameworks already inline styles; this technique applies primarily to traditional stylesheet architectures.
Common Mistakes
Using one global critical CSS file for all page types
Extract critical CSS per template. A product page needs different above-fold styles than a blog post.
Inlining the entire stylesheet
Only inline what the initial viewport needs — typically 5–20 KB. Inlining everything bloats HTML without benefit.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement