Want to remove unused CSS in WordPress for better PageSpeed Insights scores?
Removing unused CSS can be done using asset loading plugins like Asset CleanUp or Perfmatters, CSS removal websites, and even using specialized CSS removal plugins. However, a good way to remove unused CSS is to avoid plugins and builders with heavy CSS to begin with.
- Remove Unused CSS In Asset CleanUp Or Perfmatters
- Generate Critical CSS
- Use CSS Removal Tools
- Inline Critical CSS And Defer Non-Critical CSS
- Minify And Combine CSS
- Serve CSS From A CDN
- Disable WooCommerce Styles On Non-eCommerce Pages
- Avoid Heavy Page Builders
- Avoid Plugins That Inject CSS
- Remove Unused CSS With RapidLoad
- Unload Custom CSS With Asset CleanUp Pro
1. Remove Unused CSS In Asset CleanUp Or Perfmatters
Choose A Plugin To Remove Unused CSS
Asset CleanUp is free while Perfmatters is paid, but the UI/UX is better. Asset CleanUp has a pro version that lets you unload custom CSS (step 11) while the free version and Perfmatters do not. I wrote a comparison on Perfmatters vs. Asset CleanUp – but I personally use Perfmatters.
Activate The Script Manager
If using Perfmatters, enable the script manager in the settings. There are also settings for removing bloat, browser resource hints, and other settings that can improve speed. If using Asset CleanUp, enable Test Mode in the settings which lets you test removing CSS without it breaking your site. Perfmatters does not have a test mode so you will either need to create a staging site or check your site for visible errors after unloading each CSS file (trial and error).
Remove CSS Where It Doesn’t Need To Load
Some plugins, page builders, and CSS files load across your entire WordPress site. If some files are only being used in specific areas of your site, disable them everywhere else. Depending on which asset loading plugin you use, you can disable CSS files everywhere except current URLs, posts, pages, disable them on a single URL, or use regex to disable CSS files using URL patterns.
- Disable contact form plugin on pages that don’t have a contact form.
- Disable affiliate link management plugin on pages that don’t use aff links.
- Disable social sharing plugin on all pages (since it’s usually for blog posts).
- Disable unused functionality in your page builder (see this post for Elementor).
2. Generate Critical CSS
If you’re using WP Rocket or another cache plugin, you’ve probably seen an option to optimize CSS delivery (or similar).
This generates critical path CSS and loads all other CSS asynchronously without render-blocking. While it might not actually help remove CSS, it can help with delivering it faster.
- Enable optimize CSS delivery.
- Check for “rocket-critical-css” in your source code to make sure it’s working.
- If it’s not working, regenerate critical CSS in WP Rocket and page builders (if using one).
- Scan your website using PurifyCSS.
- Download the combined, purified, and minified CSS.
- Paste the code into your cache plugin (fallback critical CSS).
- Exclude files from CSS delivery using WP Rocket’s helper plugin.
- If those don’t work, Gijo Varghese’s FlyingPress plugin has great reviews.
3. Use CSS Removal Tools
There are plenty of free online tools to remove unused CSS.
PurifyCSS – free CSS removal tool. Add your website, click “clean up CSS” with minify output turned on. Once the scan is complete, download your combine, purified, and minified CSS file.
Unused-CSS – freemium CSS removal tool. You can run a page through the tool and it tells you much CSS will be removed (and the percentage of CSS selectors used). You will need to give them your email and sign up for a paid plan if you want to download the CSS for your entire site.
UnCSS – more tedious CSS removal tool which requires you to copy/paste your HTML and CSS into their tool and download it. KeyCDN says it’s more accurate than PurgeCSS since it looks at actual web pages rather than individual files but is also slower and requires more manual set up.
4. Inline Critical CSS And Defer Non-Critical CSS
WP Rocket lets you minify/combine CSS and optimize CSS delivery (to generate critical CSS and inline it). However, Autoptimize can yield even better results than WP Rocket – as it did for me.
5. Minify And Combine CSS
Minify CSS should almost always be enabled and strips unnecessary characters from CSS files, making them smaller.
Whether combining CSS files is beneficial is debatable, but WP Johnny suggests enabling this for smaller sites and disabling it for large sites. You should enable it on your site and test results.
If you’re using Autoptimize to minify CSS (called “optimize CSS” in the settings), this should be disabled in your cache plugin. WP Rocket does this automatically when enabled in Autoptimize.
6. Serve CSS From A CDN
If you’re using a CDN, make sure CSS files (and other assets) are being served from the CDN. Sometimes, CDNs don’t automatically rewrite assets so they’re being served from the CDN. A CDN Rewrite can make sure they are. This can be enabled in Perfmatters or WP CDN Rewrite.
7. Disable WooCommerce Styles On Non-eCommerce Pages
By default, WooCommerce loads styles across your entire website.
8. Avoid Heavy Page Builders
At minimum, consider hard coding your header, menu, footer, and blog sidebar. You can still use your page builder to design other content, but these areas load across your entire website and can significantly improve PSI scores. Hard coding is much more lightweight than page builders.
I hired WP Johnny to remove Elementor and replace it with Gutenberg. The first thing he did was hard code these and I immediately saw an improvement. If you want to remove Elementor or Divi all together, popular alternatives are Oxygen Builder, GeneratePress, and Gutenberg.
Just to give you an idea of everything loaded with Elementor (Divi’s no better):
9. Avoid Plugins That Inject CSS
Some plugins (forms, sliders, and others) inject CSS that loads across your entire site.
Review this list of slow plugins to avoid or use tools like Query Monitor to find your slowest loading plugins. The WP Hive Chrome Extension lets you browse the WordPress repository while viewing whether a plugin causes high memory usage or has a significant impact on PageSpeed Insights. Install the extension and it adds a section to the right of the plugin info.
10. Remove Unused CSS With RapidLoad
RapidLoad is a premium plugin developed by the Autoptimize team.
To my knowledge, it’s the only fully automated plugin that removes unused CSS in WordPress. The only reason it has negative reviews is because people install it thinking it’s a free plugin, but then get prompted to buy a subscription. Otherwise, there are little to no complaints about it.
Download the plugin, buy a subscription, and the plugin will do the rest. It will automatically process each URL. On average, RapidLoad removed about 80% of the CSS for all my content.
11. Unload Custom CSS With Asset CleanUp Pro
If you need to unload CSS that is hardcoded (non-enqueued), Asset CleanUp Pro lets you do this while the free version of Asset CleanUp (and Perfmatters) do not.
Asset CleanUp Pro also lets you change CSS location to HEAD/BODY as well as unload CSS on other pages such as taxonomies, author, search, WooCommerce search, 404, and date archives.
Retest Your Site For Unused CSS
Run your WordPress site through PageSpeed Insights or Lighthouse and check for remove unused CSS errors. Hopefully this guide helped you optimize it enough to finally pass the audit.
Frequently Asked Questions
How do I remove unused CSS in WordPress?
Removing CSS can be done using an asset loading plugin, CSS removal websites, minification, and combination. Avoid WordPress plugins and page builders with lots of CSS.
How do I remove unused CSS using WP Rocket?
WP Rocket minifies and combines CSS files. It also optimizes CSS delivery which generates critical path CSS and loads other CSS files asynchronously without render-blocking.
How do I remove unused CSS using Autoptimize?
Autoptimize can minify, aggregate, inline, and defer CSS files. Their RapidLoad extension is specifically for removing unused CSS.
How do I remove unused CSS without a WordPress plugin?
If you don't want to use a WordPress plugin to remove CSS, use a CSS removal website like PurifyCSS or Unused-CSS.