Website speed and performance are perhaps the most important aspects of good user experience. Abundance of unused CSS files is one of the key contributors to poor website health and performance. But you don’t have to worry as there are some incredible plugins that can be used to remove such unnecessary code from your WordPress site immediately.
What is unused CSS?
CSS is used to describe the visual presentation of a WordPress website which is usually written in a markup language such as HTML. WordPress themes and plugins both have their own set of CSS and will load them whenever you open a page or feature associated. For example, if you open your homepage, your WordPress theme will load up the homepage CSS files to display the page on the front-end. Another example would be when you open a product page via WooCommerce, the plugin will load its specific set of CSS to show the content of the page.
Over time, as you add more and more plugins, fonts, icons and other such visual elements to your WordPress site, the CSS files will add up resulting in a performance drop-off. In the simplest sense, unused CSS are the ones that load up alongside the page but aren’t contributing to loading the page. They are essentially unnecessary clutter that will slow down your website and cause performance issues, poor user experience and sub-optimal SEO results.
Most often than not, we end up using a theme with multiple plugins enabled and running on the same page. However, this might be completely unnecessary, and chances are you might not need to use them all.
Unused CSS in WordPress
There are very good examples to understand the difference between used and unused CSS on a webpage. Unused CSS on a WordPress page comes due to two main reasons:
- Completely redundant – you have a WooCommerce plugin which loads CSS on posts where you have no shopping cart or product elements. Similarly, a contact form plugin that loads resources on all the posts and pages while you have only one contact form in your contact page.
- Redundant on above the fold – when a webpage loads what users see is called above the fold area. Let’s say, you have a slider available at the bottom of the page which uses an external CSS file linked in the head section of your site. In this case, you can remove the slider CSS from the header section and move to footer area.
Why to Reduce Unused CSS in WordPress?
Google PageSpeed Insights and other speed measurement tools show “Reduce Unused CSS” as a problem when detecting excess CSS styles loaded above the fold area in your page. This will affect Largest Contentful Paint (LCP) which is one of the measurement parameters for Core Web Vitals. It will be there even you use lightweight themes like GeneratePress, Astra, Kadence, OceanWP, etc. So, regardless of the theme and plugins you use, you need to work on removing unused CSS from your site to improve the page loading speed and the score.
What is the solution?
Well, the title of the article is somewhat of a spoiler, but yes, removing unused CSS is possible and relatively easy as well through the use of some special plugins developed for this specific purpose. In this article, we will go over some of the best options available and guide you through the process of removing unused CSS from your WordPress website and enjoy browsing at blazing speeds. These plugins will generate used CSS required to load above the fold page content for each post type and delay the loading of unused CSS based on user interaction.
1. Hummingbird
The Hummingbird plugin is a great option for website optimization and extracting performance improvements. It is a very popular plugin with over 100,000+ active installations till date and was created by the same WordPress speed specialists who brought Smush image optimization, one of the most popular image optimization plugins with over 1 million active users.
Hummingbird will improve your website load speed and optimize site performance by minifying and deferring CSS. It will strip the unused code from your website’s CSS and defer the loading of CSS not used above the content-fold. First, you’ll have to install and activate the plugin. Then, open the Hummingbird plugin control dashboard. You can conduct a performance test if you want or skip it. Select “Asset Optimization” and click on “Activate”. The plugin will conduct a file check assessment to determine the files that can be minified and optimized.
Next, you’ll have the choice to either remove the CSS files automatically or manually. If you feel that removing the CSS files altogether could have negative impacts with WordPress, then remove them manually one-by-one whilst checking the website to see if there are any issues. However, if you are confident that the removal of the CSS files will not affect anything, then, go ahead with the automatic optimization.
The images provided below show how both the automatic and manual optimization settings work on the Asset Optimization page of the Hummingbird plugin.
Whichever approach you decide you take, make sure to publish your changes for the effects to take place.
And that’s about it. The Hummingbird plugin really does make the whole CSS optimization process convenient and simple.
2. Asset Cleanup
Next on our list, we have the Asset Cleanup plugin. The plugin’s mantra “Strip the fat first and get a faster website” aligns well with how the plugin functions, as Asset Cleanup will scan your website and detect all the assets that are loaded and remove the CSS/assets that are not necessary to load, this way reducing the bloat.
To begin the unused CSS removal process with this plugin, first install and activate it. Then open the plugin’s settings page. With this plugin, before making any changes you’ll have to enable “Test Mode”. This is because if you mistakenly unload the wrong CSS files, the front-end functionality and layout of the pages containing the code will break. So, by using the “Test Mode” function, you are safeguarding yourself from possible front-end collapses in the live site.
To enable “Test Mode” select the Test Mode tab and toggle the “Enable Test Mode” option.
Next open the CSS/JS Manager page of the plugin, and from here you will be able to remove unused CSS files from the homepage, posts, pages, custom post types and even media files.
For posts, and pages, you’ll have to enter a keyword or ID of the entity before you can manually manage its CSS.
Once, you enter the keyword or an ID and select the entity you want to configure, then you’ll be able to scroll down and review the loaded files and unload files that you feel are not required. After making the necessary changes, you can toggle off the “Test Mode” and click on the “Update” button on the bottom of the page to save changes.
3. Premium Options
There are two popular premium plugins that can also help to reduce unused CSS in WordPress.
- WP Rocket – this is state of the art caching plugin which has plenty of additional options to preloading, delaying JS, deferring JS and optimize CSS delivery. Under “File Optimization” tab, you can either enable “Generate Critical CSS” or “Remove Unused CSS” option. Removing unused CSS will run the service on their cloud server and create used CSS for your site to load on above the fold area. The generated CSS will be stored in database which you can delete and regenerate anytime when changing a plugin or theme on your site. Check out our complete guide on how to setup WP Rocket plugin in WordPress.
- Perfmatters – this is a performance optimization plugin and offers options for hosting Google Analytics locally, hosting Google Fonts locally, removing WooCommerce resources, delay JS and remove unused CSS. Unlike WP Rocket, here you have three options to decide the behavior of unused CSS delivery. You can delay, load asynchronously or completely remove depending upon the need.
Final Words
While removing unused CSS from your WordPress may not be as simple as other tasks on WordPress. With a little diligent practice and conscious trial-and-error, you should be able to navigate through the tricky waters with your website’s front-end functionalities intact. The plugins shown in this article will provide the platform for you, all you need to do is put in the effort and reap amazing web performance rewards.
And finally, make sure to check your website before and after implementing these changes on a web performance analysis tool such as Google PageSpeed Insights to get an accurate and objective representation of the effects that unused CSS has on your website.