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 WP Rocket
- Remove Unused CSS In LiteSpeed Cache
- 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
1. Remove Unused CSS In WP Rocket
The easiest way to remove unused CSS is with WP Rocket.
The remove unused CSS feature is found in the file optimization settings when you enable “optimize CSS delivery.” This is an automatic process where WP Rocket does the following:
WP Rocket will collect all the stylesheets and scripts found on a page and send them to our external tool to process. The tool will pick anything that can be identified as a CSS selector. Later on, it will compare the HTML of the page with the selected data to match what CSS selectors are actually used on the page. Only matching CSS selectors will be preserved and saved as used CSS. Used CSS entries are saved in the Database.
Once the process is done, it will say it’s complete.
2. Remove Unused CSS In LiteSpeed Cache
If you’re using LiteSpeed Cache, generating unique CSS (UCSS) in the Page Optimization CSS settings will remove unused CSS. This is a QUIC.cloud service, so you will need to generate a domain key before using it. You will also need to turn CSS Combine on in order to generate UCSS. After enabling this, you should turn on cache mobile since UCSS is different on mobile and desktop, then purge the cache. Obviously you will also need to be using a LiteSpeed host.
3. 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).
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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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.
9. Disable WooCommerce Styles On Non-eCommerce Pages
By default, WooCommerce loads styles across your entire website.
10. 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):
11. 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.
12. 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.
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.