Want to remove unused CSS in WordPress so 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 enhances WordPress performance and user experience.
In this tutorial, we’ll show you how to easily remove unused CSS in WordPress without breaking your website.
What is Unused CSS in WordPress?
Unused CSS in WordPress is CSS code that loads on your website but isn’t actually needed 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 impact 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.
Why Is Unused CSS Added in WordPress?
CSS is used to style the appearance of your WordPress website. Your WordPress theme comes with 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 example, 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.
Next, 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 too much 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 some 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 difficult to find and remove.
That being said, we’ll show you two ways 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 enhances the overall delivery of CSS files on your WordPress website, including removing most of the unused CSS.
We think it is the best method 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 thing, you need to install and activate the WP Rocket plugin.
Upon activation, you need to go to Settings » WP Rocket page and switch to the ‘File Optimization’ tab.
Then, 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.
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.
Next, you’ll 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.
It will take some minutes for the plugin to process and remove unused CSS files from your website.
You’ll see a ‘Remove Unused CSS is complete!’ message when the plugin has completed the process.
Then, visit the Google Pagespeed Insights tool and test your site’s performance.
Remove Render-Blocking CSS for WordPress
WP Rocket allows you to optimize your CSS file 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.
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 done, you can go ahead and test your website performance again using Google Pagespeed Insights.
Additional File Delivery Tweaks to Boost Performance
WP Rocket also lets you 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 add up to a faster loading experience for your visitors.
You’ll also see options to minify and combine CSS files. These options will decrease HTTP requests and give you an additional speed boost.
However, you’ll need to carefully check your website to ensure that nothing is broken after enabling these settings.
Method 2. Remove Unused CSS in WordPress using Asset CleanUp
This method is a little advanced but incredibly powerful and will allow you to 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.
Firstly, you need to install and activate the Asset Cleanup plugin.
Upon activation, you need to navigate to the Asset CleanUp » Settings page and switch to the Test Mode tab. From here, you need to turn on the ‘Enable Test Mode’ option.
This lets you try out different settings and test them as an administrator without affecting website visitors.
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.
The plugin also lets you 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’ll find the Asset CleanUp box just below the post editor.
Be sure 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.
We hope this article has helped you learn how to easily remove unused CSS in WordPress.