How to Remove Unused CSS in WordPress With Plugins

Disclosure: WPrBlogger content is reader-supported. This means we may receive financial compensation if you purchase products or services on the merchant website, but at no additional cost to you.

Reduced unused CSS is a common error notice in tools like PageSpeed Insights. This superfluous code, often caused by themes and plugins, needlessly bloats your website’s file size, leading to slower load times and a poor user experience.

As a long-term WordPress user, I’ve seen the negative impacts of unused CSS firsthand. It can seriously slow down pages and increase the bytes consumed by networks, especially for mobile users. 

There are many ways to remove unused CSS scripts from a WordPress site, but I will only focus on beginner-friendly and most effective methods in this guide. 

Also, in this guide, you will learn why unused CSS rules are performance problems. How to detect it, and the best strategies for removing unused CSS scripts without compromising your website’s functionality. 

So, let’s dive in and optimize WordPress CSS for maximum speed and performance.

What is Unused CSS in WordPress?

Unused CSS refers to Cascading Style Sheets code that is present in your WordPress theme or plugins but is not being used to style any elements on the current website page. 

This can happen for several reasons, such as:

• Outdated themes or plugin scripts – Themes and plugins may include CSS code that is no longer necessary after updates or changes.
• Customizations – Some CSS styles may become redundant if you’ve made custom modifications to your theme.
• Development leftovers – Developers may sometimes leave unused CSS code in their themes or plugins.

Moreover, some plugin functionality is not needed on certain pages, yet they execute sitewide. 

An example of such a plugin is contact forms builders. 

Most websites only add contact forms to the Contact Us page, So loading the contact forms CSS script sitewide is unnecessary. 

Another example is when a user is on the website’s homepage. The browser doesn’t need to load the CSS rules for styling the blog or Contact Us page.

However, because the Contact Us or blog page CSS codes are in a global stylesheet, the browser will still have to download and render them. This is not only time-consuming but also unnecessary.

You need to optimize the loading of the CSS script to only execute on the pages where it is actually required. 

Why Remove Unused CSS in WordPress?

Unused CSS is a performance killer and can significantly impact your website’s loading speed. 

It adds unnecessary weight to your website’s file size, significantly slowing load times. This, in turn, can negatively impact user experience, as visitors are more likely to abandon a slow-loading website.

In addition to affecting user experience, slow load times can hurt your website’s search engine rankings. 

Google and other search engines prioritize websites that load quickly, so removing CSS files not used on a page can help improve your site’s visibility in search results.

By eliminating unused CSS rules, you can:

• Improve website speed – Due to more lightweight code and efficiency, your site speed is likely to improve and perform optimally.

• Enhance SEO – As a result of improvement in speed and performance, you may experience a boost in search ranking position. 

• Reduce server load – A smaller website file size puts less strain on your server. This is a no-brainer. 

• Optimize mobile performance – Unused CSS can be particularly detrimental to mobile devices. Considering the percentage of mobile internet traffic, you should optimize WordPress CSS styles for mobile users.

Aside from this fact, fixing reduced CSS warnings has a significant real-world performance impact on First Contentful Paint, Largest Contentful Paint, and Time to Interactive.

Too many unused CSS files loading on a page increases FCP, LCP, and TTI, which are part of core web vitals metrics.

By resolving the unused CSS warning, you should see reduced scores for these metrics in PSI.

How to Detect Unused CSS Styles in WordPress 

Several tools let you find unused CSS rules in a URL. Your technical knowledge and comfort level determine which tools you use. 

Nevertheless, the most popular tool for detecting unused CSS scripts is Google’s PageSpeed Insights. 

Enter the specific URL in PageSpeed Insights and click “Analyze.” Wait a few minutes; PSI will run a comprehensive performance test, both for field and lab tests. 

Then, you get the result, as shown in the image below. 

Other tools for finding unused CSS include Code Coverage in DevTools, PurifyCSS, and UnCSS. 

These tools work differently. So, you need to understand this and know which option is right for you. 

For developers, UnCSS seems to be a better option. It lets you manually remove unused CSS styles in your site code. Just paste your HTML and CSS code into the tool and let it do its magic. 

Once the process is complete, copy the optimized or used code and go use it. 

For beginners or those who need automation, a simpler way to investigate CSS rules not used on a page is PageSpeed Insights, which is the right tool. 

It pinpoints the CSS files that need to be removed and suggests resources to help you fix the problem. 

Removing Unused CSS with WordPress Plugins

Several effective WordPress plugins can help you remove unused CSS and improve your website’s performance. 

In my opinion, plugins are the easiest way to reduce unused CSS in WordPress and minimize its risk to the barest minimum.

Plugins automate the process. You don’t need to manually look through hundreds of code lines to pinpoint which unused scripts to remove. 

Plus, if you’re a beginner with no coding knowledge, attempting to do it yourself will end in a frustrating experience. 

Here are some of the top WordPress plugins to remove unused CSS codes on your site:

1. WP Rocket

WP Rocket is a popular premium caching plugin that offers a wide range of features, including the ability to remove unused CSS. The plugin lets you automatically delete unused CSS on your site. 

The process is one click, and it will remove render-blocking CSS styles on your site. 

Undeniably, this is the best solution to optimize the CSS delivery. It achieves a better user experience and enables your site to load more quickly. 

The only problem here is that WP Rocket is a paid plugin. There is no free plan. So, you must purchase a license to use WP Rocket to remove unused CSS.

Get the WP Rocket plugin here and follow the next steps. 

Once the plugin is active on your site, go to its settings page and open the File Optimization Tab. 

First, check the Minify CSS files option. This helps remove white space, and developers comment on the script to reduce file size. In turn, it reduces the WordPress database size, loads faster, and performs more efficiently. 

Next, scroll to the Optimize CSS Delivery option. This is where you enable the removal of Unused CSS styles from your site. WP Rocket has two options to choose from – Removed Unused CSS or Load CSS Asynchronously.

However, it recommends Remove Unused CSS for better performance and compatibility. 

At this point, WP Rocket will automatically analyze your website’s CSS files and remove any unused styles. 

You don’t have to do anything else to allow the process to work. It automatically works every time you update your site. 

Whenever you update content, delete or add a plugin, update themes, etc. The removed CSS files feature will process your site files and eliminate any leftover scripts. 

Next, test your site again in PageSpeed Insights (PSI) to see how performance has been improved. 

Note: You may likely see reduced unused CSS errors in PSI because completely removing CSS that is not used on a site is almost impossible. There will still be some leftovers due to the way WordPress works. 

Also, PageSpeed Insights will trigger the reduced CSS warning if your page goes above what it considers an acceptable threshold.

However, the impact will be minimal to have any noticeable effect on real-user experience.

For example, here is a page with 498 kb potential saving for unused CSS error in PSI without WP Rocket. After enabling the Remove CSS files module in WP Rocket, it went down to 33kb.

Beyond CSS file optimization, WP Rocket automatically optimizes JavaScript files and critical images above the fold website area. To enable the JS file optimization features, find the settings in the same File Optimization tab. 

You can enable the Minifies JavaScript files option, Load JavaScript Deferred, and Delay Javascript execution. These are the settings that work for my blog. Test which option works for your blog, and stick to that. 

Each WordPress blog has a setting that works for it. After enabling an option, test your site to ensure it maintains its visual design, loads normally, and nothing breaks. 

The WP Rocket Critical CSS image optimization is automatic. It works completely behind the scenes. However, it only acts on images found above the fold.  

Learn more about how WP Rocket handles critical CSS generation in this guide.

2. FlyingPress

Another helpful WordPress plugin that reduces the number of unused CSS scripts is FlyingPress. You can bet this plugin is extremely efficient at getting the job done quickly. 

It has three ways it handles CSS codes not being used on a page. 

However, FlyingPress is also a premium plugin. You can buy it directly from the developer’s website. 

FlyingPress is a full-fledged WordPress performance plugin. 

From cache to image optimization, CSS and JS optimization, Lazy loading, and database optimization to bloat removal, FlyingPress ensures your site runs smoothly for real users. 

To use FlyingPress to remove unused CSS, first install and activate the plugin. 

Go to the FlyingPress setting page and enable the Remove Unused CSS setting. This will open the three settings options:

• Asynchronously – This option will load the unused CSS in the background without affecting site speed and performance. Other resources will continue loading, and the unused files will not block rendering. 

• On-user Interaction – The unused CSS will load when the user interacts with the page, such as by clicking a mouse, making onscreen movement, or scrolling. This option isn’t the best to consider. 

• Remove – FlyingPress will completely remove the unused CSS files from your website. I guess you should only consider this option if you’re sure of what you’re doing. 

The FlyingPress unused CSS Remove option gives the best performance result, but it may break your site. So, test your site behavior, performance, and visual aesthetics thoroughly if you enable the option. 

Beyond the three settings, you can exclude specific stylesheets from the remove unused CSS process. If you have CSS files that are essential for your site’s functions, enter their URL or path in the exclude stylesheet box.

FlyingPress will skip the stylesheet when deleting CSS rules that are not used on the page. The same goes for CSS selectors that should be included in used CSS files.

Use this function to force FlyingPress to include the selectors in the used CSS rules.

3. NitroPack

NitroPack is a cloud-based caching and optimization service that can significantly improve your website’s performance. 

It offers a beginner-friendly option to delete CSS rules not used on your site. 

When you enable the Remove Unused CSS feature in NitroPack, you will have more options to fine-tune the settings. You can optimize further to achieve maximum performance.

Here’s how NitroPack optimizes CSS files and removes rules that are not used. 

First, sign up for a free NitroPack account. Next, download the plugin and connect it to your WordPress site. 

Then, go into the plugin’s Cache setting and click the HTML & CSS tab. Locate the removed unused CSS option. Enable it. 

Enabling the Remove Unused CSS reveals two other settings: Remove duplicates and Inline the final CSS. 

Removing duplicates will delete any used CSS rules in the final optimized files present in the critical CSS generation files. This ensures web browsers are not loading unnecessary duplicates of CSS rules while rendering the page. 

If a CSS rule or files are already loaded in the critical CSS above the fold, NitroPack will delete the same in the final optimized used CSS files. 

Next, the inline the final CSS option will add the optimized CSS file to the HTML document. This will reduce file size and improve loading time. 

Additionally, NitroPack lets you include/exclude critical CSS selectors from the process. This is handy if you want to keep or remove some CSS selectors from the used CSS process.

After activating these settings, you must test your site’s pages extensively to ensure the NitroPack Removed Unused CSS (RUCSS) features didn’t negatively affect the design or user experience. 

Especially if you have popups, embedded signup forms, and other dynamic content on your site. 

You can test your site using the Nitropack test mode setting. This feature lets you test the impact of Nitropack on your site in an isolated environment.

Under the test mode condition, NitroPack is disabled on the production site, so you can test every feature without disrupting user experience.

Check the comprehensive guide for more information on how to use the NitroPack test mode feature. 

4. Jetpack Boost

Jetpack Boost is a free plugin that includes several performance optimization features, including file minification and concatenation. 

It also automatically regenerates critical CSS files needed to display above-the-fold content, allowing the browser to render important elements quickly. When you make changes that affect your site’s HTML and CSS codes, it regenerates the files, too.

Though these features are not the same as removing WordPress CSS codes that are not needed on a page, the performance benefits are worthwhile. 

Jetpack Boost reduces file size (CSS & JS files) through minification, so they download more quickly during rendering. The concatenation features combine multiple files to reduce network requests. 

More on minification, the process strips unnecessary whitespace, comments, and semicolons from the CSS files. This significantly reduces the file size without affecting code functionality in any way. It cleans up the WordPress codes and makes loading more efficient.

The file concatenation improves optimization further. Let’s say you have 200 CSS & JavaScript files each on your site. 

Concatenation will combine, organize, and optimize several of these files together, group them by original placement, and reduce the number to the barest minimum. 

This process can help drastically reduce CSS bloat. It also has a significant positive effect on core web vitals metrics, such as First Contentful Paint and Largest Contentful Paint. 

Because by minifying and concatenating JS and CSS files, the first image on the page loads more quickly. And the biggest element on the page appears more quickly, too. 

If you’re on a tight budget, consider JetPack Boost as one of the best free code optimization plugins for WordPress. Using the JetPack Boost plugin, you can

• Activate cache for site pages
• Optimize Critical CSS (manually every time you update your site code.)
• Combine, minify, and concatenate CSS & JS files.
• Defer non-essential JavsScritps files.
• Automatically serve images from global CDN servers.
• Optimize images with Image CDN and image guide.

However, the JetPack Boost Pro plan gives you more functions and features, such as insights into performance history, priority support, auto-resize images, image quality control, and more.

Conclusion

Removing unused CSS is a simple yet effective way to improve your WordPress website’s performance. 

The fewer your site code, the faster web browsers can download and render the page. This provides users with a better site experience and allows them to interact with elements more quickly. 

However, since time is money. The best way to reduce unused CSS styles from a WordPress site is with a plugin. 

Except you have a valid reason to find and delete unused CSS codes manually, there’s no justification for a business owner not to use plugins. 

Therefore, I suggest you try WP Rocket, FlyingPress, or NitroPack. 

These plugins automatically detect, remove, and optimize CSS styles, ensuring your site performance is at its peak. 

And they do not require complex configuration. Even if you have never installed a WordPress plugin, you can get any of these plugins to work in under five minutes.