Smart CSS bundles for WordPress

Why combine the CSS files of a WordPress site?

Every plugin brings its own stylesheet, so a normal WordPress page loads a long row of them: a tiny file for a cookie notice next to a 200 kB theme file. All of them block rendering. The tiny ones each pay for a request, the big one takes several round trips on a phone. WP Core Web Vitals turns them into a few files of about the size that arrives in one round trip.

Built on one round trip and the browser cache

A new connection delivers about 14 kB in its first round trip, so the plugin fills each bundle up to that size. On a larger site the bundles are shared between pages: the browser downloads them on the first page and takes them from its cache on the next one.

I don't do critical CSS or "remove unused CSS". Both look good in Lighthouse. On a real visit the rest of the CSS comes in after the first paint and parts of the page jump. Critical CSS also comes along with every page view, inside HTML the browser doesn't cache.

The CSS settings

Fine-tuning

• Site size (Automatic): decides how the bundles are cut. A small site, with up to 30 published items such as posts and pages, gets all the CSS of each page in its bundles, inline styles included. A larger site gets bundles that many pages share, so a visitor doesn't download new CSS on every page. Automatic does the count and shows what it picked; choose Small or Larger only when that count gets your site wrong.
• Bundle inline styles (On): moves the <style> blocks in your HTML, such as the global styles of a block theme, into the bundles. In a bundle the browser keeps that CSS in its cache, while in the HTML it comes along again with every page view. On a larger site only the inline CSS that more than one page uses is moved. If one block breaks the page in a bundle, give it data-no-optimize or turn this setting off.
• Minify CSS (Off): strips whitespace and comments from the CSS before it goes into the bundles. After compression that saves a few kilobytes and none of your visitors will notice, which is why it's off. If you turn it on and a page looks different, turn it off again.
• Maximum CSS cache size (100 MB): the disk space the plugin's CSS files may take on your server. A file stays six months after a page last used it, because a page cached by a CDN may still ask for it. Above this size the files unused the longest go first. Lower it only when your hosting gives you little disk space.
• Leave these stylesheets alone (Empty): for a stylesheet that breaks the page in a bundle, usually because its CSS is invalid. That stylesheet keeps its own <link> in its own place, and the CSS around it is still bundled, so the order doesn't change. Fill in a regular expression on the URL: main|extra keeps main.min.css and extra.min.css as they are.
• Extra CSS (Empty): CSS that goes inline into the head of every page, so it applies at the first paint without a request of its own. Use it for a small fix, such as .hero { min-height: 60vh; } to reserve the height of a banner that would push the content down when it loads (CLS). Keep it short, because it comes along with the HTML of every page.

A 400 kB theme, or a page that looks different

A theme with 400 kB of CSS still has 400 kB of CSS after bundling, in better pieces. That needs a lighter theme or a page builder that loads CSS per widget.

If a page looks different after you turn bundles on, first turn off combining, critical CSS and unused CSS in other plugins and in your page builder: one optimizer at a time. When it still looks different, one stylesheet doesn't survive bundling, usually because it's invalid: put its name under Leave these stylesheets alone and clear the cache.