Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Remove Unused CSS in WordPress (The Right Way)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to remove unused CSS in WordPress so that your site will load faster?

Unused CSS is any CSS code added by your WordPress theme or plugins that you don’t really need. Removing this CSS code improves WordPress performance and the user experience.

In this article, we will show you how to easily remove unused CSS in WordPress without breaking your website.

Removing unused CSS in WordPress

What Is Unused CSS in WordPress?

Unused CSS in WordPress is CSS code that loads on your website but isn’t actually needed in order to display the page.

The extra code can make a visitor’s browser take a bit longer to render a page, which creates a bad user experience. The slower loading times can even affect your search rankings, resulting in less traffic to your site.

You can see how unused CSS code is affecting your website by using Google Pagespeed Insights. It will show you a section titled ‘Remove unused CSS’ with details of which CSS files are affecting your loading times.

Unused CSS code issue in Google Pagespeed Insights

Why Is Unused CSS Added in WordPress?

CSS is used to style the appearance of your WordPress website. Your WordPress theme includes CSS, with most of it included in a single style.css file.

In addition to your theme’s CSS, your WordPress plugins will also load their own CSS.

For instance, WooCommerce will load CSS to display products, a page builder plugin will add its own CSS to display your custom pages, and a form builder plugin will include CSS to style your forms.

Then, you have your web fonts, icon fonts, and other elements that will need to add their own CSS files as well.

Usually, these files are very small and load quickly. However, if your WordPress site has a lot of them, then the effects can add up and have a noticeable impact on your site speed.

How to Remove Unused CSS in WordPress

There are a few different ways that you can reduce unused CSS on your WordPress website.

However, it would be quite a difficult task to completely remove all unused CSS in WordPress. Because of the way WordPress works behind the scenes, some unused CSS may be hard to find and remove.

That said, we will show you two methods to remove unused CSS, and you can choose the one that works best for you.

Method 1: Remove Unused CSS in WordPress Using WP Rocket

This method is easier and is recommended for beginners. It greatly improves the overall delivery of CSS files on your WordPress website, including removing most of the unused CSS.

We think it is the best solution for beginners because it is easier and achieves the main goal of providing a better experience for your users. This means your website loads fast on speed testing tools and also feels fast to your users.

First, you need to install and activate the WP Rocket plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab.

File optimization in WP Rocket

Next, you need to scroll down to the CSS Files section and then check the box next to the ‘Remove Unused CSS (Beta)’ option.

Since this feature by WP Rocket is in beta, it will ask again if you want to enable the setting. You can go ahead and click the ‘Activate Remove Unused CSS’ button.

Click the Remove Unused CSS option

Once the ‘Remove Unused CSS’ option is active, you can then specify CSS filenames, IDs, or classes that shouldn’t be removed under the ‘CSS safelist’ box.

Simply enter them into the box.

Add files to CSS safelist

Next, you will need to save your changes by scrolling down and clicking the ‘Save Changes’ button.

When you do that, WP Rocket will start to process your CSS files and show you a progress bar.

View remove unused CSS progress bar

It will take a few minutes for the plugin to process and remove unused CSS files from your website.

You will see a ‘Remove Unused CSS is complete!’ message when the plugin has completed the process.

Remove unused CSS complete notification

Now, visit the Google Pagespeed Insights tool and test your site’s performance.

Remove Render-Blocking CSS for WordPress

WP Rocket lets you optimize your CSS files and remove render-blocking CSS from your website.

To start, you can navigate to the ‘File Optimization’ tab in WP Rocket. From here, scroll down to the CSS Files section and then check the box next to the ‘Optimize CSS delivery’ option.

Optimize CSS delivery

This option generates a CSS file that only contains the CSS code needed to display the visible part of your website. It loads that file first, displays the page to your visitors, and then loads other CSS files using a technology called deferred loading.

By removing this render-blocking CSS, your website becomes viewable to users much more quickly than it would if you had to load all the CSS files before the page is displayed.

After enabling the ‘Optimize CSS delivery’ option, click the ‘Save Changes’ button and wait for WP Rocket to generate the necessary CSS file for all your posts and pages. It will also automatically clear the cache for your website.

Once finished, you can go ahead and test your website performance again using Google Pagespeed Insights.

Additional File Delivery Tweaks to Boost Performance

WP Rocket also allows you to remove query strings from static files, combine Google Fonts files, and minify HTML.

All of these tweaks add tiny improvements to your overall speed, which adds up to a faster loading experience for your visitors.

Basic file optimization

You will also see options to minify and combine CSS files. These options will reduce HTTP requests and give you an additional speed boost.

However, you will need to carefully check your website to make sure that nothing is broken after enabling these settings.

Minify and combine CSS files

Additionally, you can apply the same optimization for JavaScript files on your website.

You can minify and combine them to serve as a single file and defer loading for JavaScript files to improve performance.

Optimize JavaScript delivery

For more details, see our step-by-step tutorial on how to properly set up WP Rocket in WordPress.

Method 2: Remove Unused CSS in WordPress Using Asset CleanUp

This method is a little advanced but incredibly powerful and will let you easily remove any unused CSS from any page of your WordPress website.

However, it is a bit complicated, and you will need to test your website functionality and appearance thoroughly to make sure nothing is broken.

First, you need to install and activate the Asset Cleanup plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Asset CleanUp » Settings page and switch to the Test Mode tab. From here, you need to turn on the ‘Enable Test Mode’ option.

Enable test mode option

This allows you to try out different settings and test them as an administrator without affecting website visitors.

After that, you need to visit the Asset CleanUp » CSS/JS Manager page. From here, you can unload unwanted CSS and JavaScript files on a page-by-page basis.

CSS / JS Manager

It will first fetch your homepage and will show you all the CSS and JavaScript files loaded on that page.

You need to scroll down and review the loaded files. If you see a file that you don’t need, then you can unload it for that particular page, post type, or sitewide.

Unloading files

The plugin also allows you to choose specific posts or pages from here, or you can access the same options by editing the post or page as you normally would.

On the post edit screen, you will find the Asset CleanUp box just below the post editor.

Asset Cleanup inside post editor

The plugin will automatically fetch and list all the files and assets loaded when a visitor views this page on your website.

You can then simply unload the unused CSS or JavaScript files that you don’t need on that page.

Unload files for a particular page

Important: Don’t forget to test your website after removing any unused CSS or JavaScript to make sure that everything is working fine.

Once you are done unloading and removing unused CSS and JavaScript files, you can go back to the plugin’s settings page and switch off the ‘Test Mode’.

Don’t forget to click on the ‘Update All Settings’ button to store your changes.

You can now test your website using Google Pagespeed Insights to see the change in the unused CSS notice.

CSS reduced in WordPress

Expert Guides on Improving WordPress Performance

Now that you know how to speed up your site by removing unused CSS, you may like to see some other guides related to improving WordPress performance:

We hope this article helped you learn how to easily remove unused CSS in WordPress. You may also want to see our complete guide on how much it costs to build a website and our expert picks for the best managed WordPress hosting.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

5 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Steve says

    I like to remove unused CSS from my site. I am already running the Litespeed cache. I am thinking to use WP Rocket or Asset clean up to do it (I am towards WP Rocket). Is any conflict between these plugins and Litespeed? Thank you!

    • WPBeginner Support says

      You would want to reach out to the support for the individual plugins to check for any current conflicts between them.

      Admin

  3. Paul Barrett says

    This may be wishful thinking of the highest order but this article reminded me of something that I’ve wondered about for a while.

    One of my complex websites is now four years old and has gone through a steady process of evolution. There is not only unused CSS but media, templates, pages. Is there any plugin to take a website inventory and tell me ALL the unused assets?

Leave a Reply to Paul Barrett Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.