PluginsArmorProCitedProBoostPro
PricingDocsBlogAboutGet Started

CSS Optimization

Remove unused CSS per URL, minify CSS files, and control original stylesheet delivery.

Last updated Feb 11, 2026

Why CSS Optimization Matters

CSS files are render-blocking by default. The browser won't paint anything on screen until all stylesheets have been downloaded and parsed. For sites with multiple CSS files from themes and plugins, this can add hundreds of milliseconds to the First Contentful Paint.

BoostPro offers two CSS optimization strategies: removing unused CSS and minification.

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.

  • Default: Off
  • How it works: Parses all stylesheets on the page, checks each selector against the page's DOM, and outputs only the matched rules
  • Per-page: Each URL gets its own tailored CSS, so a blog post won't load slider styles it doesn't use

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. Best 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 (similar to JS delay). More aggressive but maximizes performance.
  • Remove: Completely removes the original stylesheets. Maximum performance, but any CSS missed during analysis won't be available. Use only after thorough testing.

Excluding stylesheets

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

elementor-frontend
woocommerce-general

Safelist selectors

Some CSS selectors are added dynamically by JavaScript (e.g., .menu-open, .is-active) and won't appear in the static HTML. Add these selectors to the safelist so they're always kept:

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

Important

Start with the Async stylesheet behavior. Only switch to Delay or Remove after confirming all pages display correctly. If you notice missing styles on interactive elements (menus, modals, sliders), add their CSS selectors to the safelist.

CSS Minification

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

  • Default: Off
  • Typical savings: 10-20% per file
  • Cache location:/wp-content/cache/boost-css/
  • Skips: Files already minified (.min.css) and external stylesheets

How Caching Works

BoostPro caches minified CSS files using content-based hashing:

  1. First request: Minifies and caches the CSS file
  2. Subsequent requests: Serves from cache
  3. Source file changes: Detects the change via file modification time and regenerates
  4. Background refresh: Stale cache is served while refreshing in the background

The cache has a 100MB size limit and a weekly cleanup that removes files older than 30 days.

Inline Small Images as Data URIs

When enabled, CSS minification also converts small background images (under 4KB) referenced in stylesheets into inline base64 data URIs. This eliminates extra HTTP requests for tiny icons and decorative images.

  • Default: Off
  • Size limit: Images under 4KB are inlined
  • Impact: Reduces HTTP requests at the cost of slightly larger CSS files

Excluding stylesheets from minification

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

my-custom-styles
plugin-special-css

Recommended setup

  1. Start with CSS Minification alone (low risk, immediate benefit)
  2. Test your site to make sure styles look correct
  3. Enable Remove Unused CSS with Async stylesheet behavior
  4. Browse your site and check that interactive elements (menus, modals, sliders) still work
  5. Add any missing selectors to the safelist (e.g. JS-toggled classes like .menu-open)
  6. Once stable, optionally switch stylesheet behavior to Delay or Remove for more aggressive optimization
  7. Run a PageSpeed test to measure the improvement

Troubleshooting

  • Missing styles after enabling Remove Unused CSS: Some CSS selectors are added by JavaScript and won't be detected during analysis. Add them to the safelist (e.g. .menu-open, .is-active)
  • Broken styles after minification: Exclude the problematic stylesheet handle from minification
  • Styles not updating: Clear the BoostPro CSS cache and your page cache
Previous← JavaScript OptimizationNextImage Optimization →