Every WordPress theme and most WordPress plugins load a stylesheet on every page — including pages that have nothing to do with that theme or plugin's features. Unused CSS adds weight that has to be downloaded and parsed even though none of it will be used on that particular page.
How Much Does Unused CSS Actually Matter?
Unused CSS primarily affects two metrics:
Render-blocking CSS — stylesheets in the head of your HTML block rendering. The browser must download and parse them before displaying anything.
Total page weight — unused CSS adds to the overall data transferred. On mobile connections, every kilobyte counts.
For sites running Elementor, WPBakery, or Divi, unused CSS can be severe — these page builders load their entire CSS framework on every page regardless of which widgets are actually used.
How to Identify How Much You Have
Run your URL at pagespeed.web.dev. Look for "Reduce unused CSS" in the Opportunities section. It will tell you how many kilobytes are unused and estimate the potential time saving.
How to Fix Unused CSS in WordPress
Method 1: WP Rocket's "Remove Unused CSS" Feature
WP Rocket (€49/year) uses CSS tree shaking — it analyses each page, determines which CSS rules are actually used, and generates a minimal stylesheet.
Setup:
1. Go to Settings > WP Rocket > File Optimization
2. Enable "Remove Unused CSS"
After enabling, test your site thoroughly. Tree shaking can occasionally remove CSS for dynamically-loaded elements. Add broken selectors to the safelist rather than disabling the feature.
Method 2: Asset CleanUp — Disable Plugin CSS Per Page
For unused CSS coming from plugins, Asset CleanUp (free) lets you disable entire stylesheets on specific pages where they are not needed.
Practical applications:
- Disable WooCommerce CSS on non-WooCommerce pages
- Disable contact form CSS on every page without a contact form
- Disable slider CSS on pages with no sliders
Method 3: Switch to a Lightweight Theme
Themes like Kadence, Blocksy, and GeneratePress are built with lean CSS. For new builds, starting with a lightweight theme eliminates the unused CSS problem before it starts.
What About Elementor and Divi?
Elementor loads around 300–400KB of CSS on every page. Elementor does have an "Improved CSS Loading" option in Settings > Elementor > Performance — enable this. It loads only the CSS for widgets actually used on each page.
Divi loads its full framework on every page with no equivalent option.
Realistic Expectations
Removing unused CSS is a meaningful optimisation but rarely the single fix that transforms a slow site. Its impact is highest on heavy page builder sites with many plugins.
If your score is still poor after CSS optimisation, run your site through the HigherHost speed test to identify what else is contributing.
HigherHost provides managed WordPress and WooCommerce hosting with server-level performance optimisation and free site migration. View our hosting plans.