Why CSS Blocks Rendering
CSS is render-blocking by default. When the browser encounters a <link rel="stylesheet"> tag, it pauses rendering until the entire stylesheet downloads and is parsed. This is by design — the browser needs to know the styles before it can lay out and paint the page. Without this behavior, visitors would see a flash of unstyled content (FOUC) before styles snap into place.
The problem is that most WordPress sites load all their CSS upfront — the complete stylesheet for every page builder feature, every plugin, every component — even though the visitor’s initial view only needs a fraction of those styles. This delays Largest Contentful Paint because the browser waits for CSS it does not yet need.
What Is Critical CSS
Critical CSS (sometimes called above-the-fold CSS) is the subset of styles needed to render the content visible in the viewport without scrolling. The optimization strategy is straightforward:
- Extract the CSS rules needed for above-the-fold content
- Inline those rules directly in the HTML
<head>(no external request needed) - Load the remaining CSS asynchronously so it does not block rendering
This way, the browser has enough CSS to render the initial view immediately, while the full stylesheets load in the background.
How Critical CSS Affects LCP
Without critical CSS, the rendering sequence is: HTML downloads, browser discovers CSS links, CSS downloads, browser renders. With critical CSS, the sequence becomes: HTML downloads (with inline critical styles), browser renders immediately, remaining CSS loads in background.
The difference can be significant. If a site loads 200 KB of CSS from three separate stylesheets, the browser must complete three HTTP requests before rendering. With critical CSS inlined, the browser can start rendering as soon as the HTML arrives.
Generating Critical CSS
Critical CSS must be generated per page (or per template) because different pages have different above-the-fold content. The generation process typically involves:
- Loading the page in a headless browser
- Identifying which CSS rules apply to elements visible in the viewport
- Extracting those rules into a minimal stylesheet
This is computationally expensive and must be re-generated when the page layout changes. Automated tools handle this, but they are not perfect — they may miss dynamically rendered content or include rules for content that only appears after JavaScript runs.
Other CSS Optimization Techniques
Minification removes whitespace, comments, and unnecessary characters from CSS files. It typically reduces file size by 10-20% and has no visual impact.
Combining stylesheets merges multiple CSS files into one, reducing HTTP requests. This was more important with HTTP/1.1; with HTTP/2 and HTTP/3, the benefit of combining is smaller because the protocol handles multiple requests more efficiently.
Removing unused CSS eliminates rules that do not match any element on the page. WordPress themes and page builders often ship monolithic stylesheets containing rules for every possible component, even though any single page uses only a fraction. See Unused JavaScript and CSS for more on this topic.
Tools That Can Help
Autoptimize handles CSS minification and combining. Its paid companion, Autoptimize Critical CSS, generates critical CSS using an external service.
WP Rocket includes automatic critical CSS generation (called “Remove Unused CSS” and “Load CSS Asynchronously”) that works without external configuration.
Perfmatters does not generate critical CSS itself but pairs well with critical CSS solutions by letting you remove unnecessary stylesheets on a per-page basis.
Further Reading
- Extract Critical CSS (web.dev) — Technical guide on how critical CSS extraction works and tools that automate it.