CSS Archives - BerqWP

If Google PageSpeed Insights or Lighthouse has flagged your site with an “optimize CSS delivery” or “eliminate render-blocking resources” warning, this guide explains exactly what that means and how to fix it, including a free plugin setting that does it for you.

TL;DR: “Optimize CSS delivery” means your browser has to fully download and process CSS files before it can show anything on the page, which delays what visitors see. You can fix this for free with Berq Used CSS’s “Load after interaction” setting, which delays loading your original stylesheets until a visitor scrolls or clicks. If you already run BerqWP, this is handled for you automatically, no extra plugin needed.

What “Optimize CSS Delivery” Actually Means

By default, browsers treat every stylesheet linked in a page’s HTML as something they must download and process before rendering anything at all. This is a safety behavior, the browser doesn’t want to show you an unstyled, broken-looking page, so it waits. The problem is that most WordPress themes and plugins load far more CSS than any single page actually needs, and the browser still has to process all of it before showing a single pixel.

“Optimize CSS delivery” is Google’s way of saying: stop making visitors wait on CSS they don’t need yet.

Why This Warning Shows Up So Often on WordPress Sites

WordPress doesn’t load CSS selectively by default. A typical WordPress page loads CSS from the active theme, every active plugin that adds styling (page builders, sliders, contact forms, WooCommerce, and similar), and any custom CSS added through the Customizer or a child theme. Almost none of this is scoped to “only what this specific page needs,” it’s loaded everywhere, on every page, regardless of whether that page actually uses it.

This is related to, but distinct from, the separate “unused CSS” warning (see How to Remove Unused CSS in WordPress for that specific fix). A stylesheet can be 100% necessary for the page and still block rendering if it’s not delivered correctly, unused CSS and render-blocking CSS are two different problems that happen to share a root cause.

How to Check If This Is Affecting Your Site

Run your page through PageSpeed Insights. If “Eliminate render-blocking resources” or “Optimize CSS delivery” shows up under opportunities, with one or more of your theme’s or plugins’ stylesheets listed underneath it, this is what’s slowing down your first render.

How to Fix It for Free With Berq Used CSS

Berq Used CSS is a free WordPress.org plugin built to address exactly this.

After installing and activating it, go to its settings and set the stylesheet loading mode to Load after interaction. This delays loading your page’s original stylesheets until the visitor scrolls or clicks something, so the browser isn’t stuck processing every stylesheet before it can render the page.

This works alongside the plugin’s main feature (trimming each page down to only the CSS it actually uses), but the “Load after interaction” mode is the specific setting that addresses render-blocking, since it controls when the original stylesheets load, not just how much of them load. The plugin needs no account, no signup, and runs entirely on your own server. Re-run PageSpeed Insights afterward to confirm the warning clears.

If You Already Use BerqWP, This Is Handled Automatically

If you’re running BerqWP, you don’t need to install Berq Used CSS or manage this setting yourself. On Local Optimization, the free, self-hosted version of BerqWP, Smart and Blaze Optimization Modes already load CSS asynchronously, so the browser doesn’t have to fully process every stylesheet before rendering the page. Turbo mode goes further, delaying both CSS and JavaScript for the best PageSpeed scores. You can switch modes from the BerqWP dashboard, and changing modes automatically flushes the cache so the new setting takes effect right away.

On BerqWP Premium, this is replaced with something more thorough: Critical CSS generation, which inlines exactly the CSS each page needs to render immediately instead of just delaying the rest. This is the same critical CSS engine behind BerqWP’s free critical CSS generator tool, if you want to see what real critical CSS output looks like for any URL before deciding whether to automate it.

If you’ve run your site through Google PageSpeed Insights or Lighthouse and seen a warning that says “Remove unused CSS,” you’ve found one of the most common reasons WordPress sites load slower than they should. This guide explains what unused CSS actually is, why WordPress sites are especially prone to it, and how to fix it, including a free plugin that does it automatically.

TL;DR: WordPress themes and plugins load CSS for features a given page doesn’t use, which is what triggers the “Remove unused CSS” PageSpeed warning. You can check the damage with Chrome DevTools’ Coverage tab, but fixing it across a whole site by hand isn’t realistic. Berq Used CSS, a free WordPress.org plugin, automates this for sites that don’t have BerqWP. If you already run BerqWP, this is handled for you automatically, no extra plugin needed.

What Unused CSS Actually Means

Every stylesheet your site loads contains a set of rules: instructions for how different elements should look. “Unused CSS” is the portion of that stylesheet your browser downloads and processes but never actually applies to the page you’re looking at, because the elements those rules describe aren’t on that particular page.

The browser still has to download the full file, parse every rule in it, and figure out which ones apply, before it can finish rendering anything. The bigger that file is, the longer that takes. PageSpeed Insights flags this because it’s a direct, measurable drag on how fast your page becomes visible and usable.

Why WordPress Sites Are Especially Prone to This

WordPress themes and plugins tend to load CSS for every feature they’re capable of, on every page, whether that page uses the feature or not. A theme that supports sliders, mega menus, pop-ups, and contact forms loads styling for all of it on your simple blog post too, even if that post has none of those elements. Page builders like Elementor and Divi add their own layer of CSS on top, often loading styles for every block type available in the builder rather than just the ones used on a given page.

None of this is a bug. It’s just how WordPress plugins and themes are built to work everywhere, for everyone, by default. The tradeoff is that almost every WordPress page ends up loading CSS it never uses.

How to Check If This Is Slowing Down Your Site

The fastest way to confirm it is to run your page through PageSpeed Insights. If “Remove unused CSS” or “Reduce unused CSS” shows up under opportunities, it’s affecting your score. For a closer look at exactly which rules are unused, Chrome’s DevTools has a built in Coverage tab (open DevTools, go to the three-dot menu, More tools, then Coverage) that shows you a live breakdown of how much of each loaded CSS file is actually being used on the page you’re viewing.

Doing this manually, page by page, across an entire WordPress site is realistic for a single landing page but not practical for a site with dozens or hundreds of pages, especially since the unused portion changes from page to page depending on what each one actually contains.

How to Remove Unused CSS in WordPress Automatically

This is where a tool built specifically for this problem helps. Berq Used CSS is a free WordPress plugin that automates the process described above across your entire site.

Here’s how it works: the first time a visitor loads a page, the plugin analyzes the CSS that page actually renders and builds a trimmed version containing only the rules that page uses. From that point on, every visitor to that page gets the smaller file instead of the full stylesheet. You don’t need an account, there’s no sign up, and no data is sent to an external server, the whole process runs on your own site.

You get to choose how the original stylesheets are handled once the trimmed CSS is ready, through three modes:

Keep originals loads the trimmed CSS first so the page renders fast, while still loading the original stylesheets normally afterward. This is the safest starting point.
Load after interaction delays the original stylesheets until the visitor scrolls or clicks something, which pushes the speed benefit further for visitors who don’t interact right away.
Remove completely drops the original stylesheets entirely and relies only on the generated used CSS. This gives you the maximum speed improvement, but it’s worth using only once you’ve confirmed the generated CSS actually covers everything your pages need, since anything genuinely missing from the trimmed version won’t load at all in this mode.

Berq Used CSS works with any WordPress theme or page builder, including Elementor, Divi, WPBakery, Gutenberg, and WooCommerce, without needing any configuration to recognize them. It also runs fine alongside cache plugins you may already have installed, including WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache, SiteGround Optimizer, and Nginx Helper. If you update a plugin, switch themes, or change something in the Customizer, the plugin clears and regenerates the saved CSS automatically, so you’re not left with stale, broken styling after a change.

If You Already Use BerqWP, You Don’t Need This Plugin

Berq Used CSS is built for sites that don’t have BerqWP installed. If you’re already running BerqWP, this is handled for you automatically and you don’t need to add Berq Used CSS on top.

On Local Optimization, the free, self-hosted version of BerqWP, the plugin strips unused CSS from each page on its own, using the same kind of approach described above. On BerqWP Premium, this is replaced with something more thorough: full per-page critical CSS generation, which inlines exactly the CSS each page needs to render immediately rather than trimming an existing stylesheet down.

Removing unused CSS also only addresses one specific cause of a slow PageSpeed score. If you’re also dealing with large images, unoptimized JavaScript, or no caching at all, neither Berq Used CSS nor manual CSS trimming will fix those, they’re focused specifically on CSS. BerqWP handles the rest of that picture, caching, image optimization, and JavaScript handling, as part of the same plugin.

Category: CSS

How to Optimize CSS Delivery in WordPress