Critical CSS is a performance technique that extracts the CSS needed to render the above-the-fold content of a page and inlines it directly in the HTML head. This eliminates render-blocking CSS requests and dramatically improves Largest Contentful Paint (LCP) and First Contentful Paint (FCP) metrics. Combined with deferred non-critical CSS, this technique can reduce render-blocking CSS time from hundreds of milliseconds to near zero.
This guide covers how to implement critical CSS in WordPress.
How Critical CSS Works
When a browser loads a page, it must download and parse all linked CSS files before rendering anything. Critical CSS extracts the styles needed for the initially visible content and inlines them in a style tag in the head. The remaining CSS (non-critical) is loaded asynchronously after the initial render. The result is that the page appears to load almost instantly.
Critical CSS is generated per-page-template since different templates have different above-the-fold content. A single post page has different critical CSS than a homepage or an archive page.
Generating Critical CSS
Manual critical CSS generation involves loading a page, noting which styles are applied to above-the-fold elements, and extracting those styles. Automated tools like Critical, Penthouse, and Addy Osmani’s Critical CSS generator handle this programmatically. WordPress plugins like WP Rocket, Flying Pages, and Autoptimize include automated critical CSS generation.
Caching plugins that include critical CSS features generate it automatically after you clear the cache. The plugin visits each page template, extracts critical CSS, and stores it for use.
Inline CSS Limits
Inline CSS has a size limit. Google recommends keeping critical CSS under 14KB (compressed) to stay within the initial TCP congestion window. If your critical CSS exceeds this limit, it must be split across multiple round trips, reducing the benefit. Focus on only the absolute essential above-the-fold styles.
If your critical CSS is too large, simplify your above-the-fold design or defer some non-critical styles earlier.
Deferring Non-Critical CSS
After inlining critical CSS, defer the remaining stylesheet loading with JavaScript. Load non-critical CSS by injecting a link tag after the page has loaded, using the loadCSS JavaScript library or the native media=”print” onload=”this.media=’all'” technique. This ensures the full CSS is applied without delaying the initial render.
Non-critical CSS should be cached by the browser after the first load, so subsequent page loads don’t need to download it again.
Implementation in WordPress
Implement critical CSS through a caching plugin for the easiest setup. For custom implementation, create critical CSS files for each template type, inline them in the head with wp_head action, and modify your theme’s CSS enqueuing to load stylesheets asynchronously.
Test after implementing critical CSS. Use Lighthouse or PageSpeed Insights to verify that render-blocking resources are eliminated and LCP improves. The improvement is typically 200-500ms for CSS-heavy themes.
The Bottom Line
Critical CSS is one of the most effective performance optimizations for WordPress sites. Inline above-the-fold styles, defer non-critical CSS, keep inlined CSS under 14KB, and verify improvements with performance testing tools.
