CSS Optimization - BoostPro Docs

Remove unused CSS per URL, minify stylesheets, inline small images as data URIs, and control delivery method.

Overview

CSS files are render-blocking by default. The browser will not paint anything on screen until all stylesheets have been downloaded and parsed. BoostPro offers two strategies to reduce CSS impact: removing unused CSS and minification.

All CSS optimization settings are located on the BoostPro → Advanced tab.

Remove Unused CSS

Most WordPress pages only use a fraction of the CSS loaded by themes and plugins. Remove Unused CSS analyzes each page's HTML, identifies which CSS rules are actually needed, and strips the rest. Each URL gets its own tailored CSS, so a blog post will not load slider styles it does not use.

Default: Off
Badge: Advanced
Parser: Uses the Sabberworm PHP CSS Parser library
Cache key: MD5 of the URL (results cached per page type/device)
Cache location:/wp-content/cache/boost-used-css/

Cache invalidation

The used CSS cache is automatically invalidated on:

Theme switch
Customizer save
Post save (for the affected URL)

Delivery method

Choose how the used CSS is delivered to the browser:

Inline (default): Injects the used CSS directly in the <head>. Eliminates the extra network request. Fastest option for most sites.
File: Saves the used CSS as a cacheable external file. Better for pages with large amounts of used CSS, since browsers can cache the file across page views.

Original stylesheet behavior

Control what happens to the original full stylesheets after used CSS is extracted:

Async (default): Loads the original stylesheets asynchronously in the background as a safety net. If any CSS was missed during analysis, the full styles still load without blocking render.
Delay: Defers loading the original stylesheets until user interaction, with a 5-second fallback timer. More aggressive but maximizes performance.
Remove: Completely removes the original stylesheets. Maximum savings but needs thorough testing. Any CSS missed during analysis will not be available.

Excluded stylesheets

Some stylesheets should be processed as a whole. Add their handles or URL patterns to skip them from unused CSS removal, one per line:

elementor-frontend
woocommerce-general

Excluded selectors

Some CSS selectors are added dynamically by JavaScript (e.g., .menu-open, .is-active) and will not appear in the static HTML. Add these selectors to the safelist so they are always kept. Common JS-toggled classes are auto-safelisted.

.menu-open
.is-active
.modal-visible
.swiper-slide-active

Important

Remove Unused CSS with "Remove" stylesheet behavior can break dynamic styles (accordions, modals, tab switches). Safelist those selectors or use Async mode as a safety net.

Minify CSS

CSS minification removes whitespace and comments from your CSS files to reduce their size.

Default: Off
Badge: Advanced
Skips: Files already minified (.min.css) and external stylesheets
Cache location:/wp-content/cache/boost-css/ (100MB limit, 30-day cleanup)

Custom exclusions

If a stylesheet has issues when minified, add its handle or URL pattern to the exclusion list:

my-custom-styles
plugin-special-css

Inline small CSS images

When CSS minification is enabled, you can also enable inlining of small url() images in CSS. Images under 4KB are converted to inline base64 data URIs, reducing HTTP requests at the cost of slightly larger CSS files.

Default: Off
Size limit: Images under 4KB
Requires: CSS minification must be enabled

Per-page disable

Both CSS minification and Remove Unused CSS can be disabled for specific pages via the Resource Manager. This is useful for pages with known CSS compatibility issues.

Tip

Start with CSS minification alone. Add Remove Unused CSS with Async stylesheet behavior first, then try Delay or Remove only after testing all pages thoroughly.