Speeding up the loading time is always on the wishlist of site owners trying to improve their site performance on search results and drive more traffic. You can choose a reliable hosting provider, optimize images for SEO, install a caching plugin, and take many other tasks to achieve that.
Removing unused CSS is another effective method to boost your WordPress site speed.
But what is unused CSS in WordPress? How do they impact your site loading? How can you remove them?
We’ll answer all these questions in this article. Let’s first define unused CSS code in WordPress together!
What Is Unused CSS in WordPress?
CSS, or Cascading Style Sheets, refers to the style sheet language allowing you to decide the look and feel of your WordPress site, along with HTML. Each WordPress theme comes with a style.css file containing style rules to determine the formatting (layout, fonts, colors, etc.) of WordPress pages.
Still, not all CSS code is needed to display the page. Some of them prove completely useless for rendering your page. In other words, they don’t fulfill any function so you can remove them without affecting the page’s appearance.
Impacts of WordPress Unused CSS
Without a doubt, unused CSS increases your page loading time. To give a better understanding, it takes time for the browser to download, parse, and render them without any functionality or purpose.
Consequently, visitors have to wait longer to render the page and fully view it. This definitely creates a poor experience for users.
On top of that, low loading time also directly influences your search rankings. Google will mark your WordPress site as underperforming. This results in low traffic to your site.
How Unused CSS Is Added to WordPress
As mentioned, CSS is mostly included in WordPress themes, under the style.css file. Still, some WordPress plugins also contribute CSS code.
For example, WooCommerce, the most popular e-commerce plugin, uses CSS to present products. Page builder plugins adopt CSS to display custom pages. WordPress form builders, on the other hand, run CSS to style forms. There are many plugin types that create their own CSS files to enable their full functions.
A few tiny CSS files of several plugins don’t lead to a slow site speed. However, if any of them add up, then you will notice a considerable impact on the site loading time.
How to Identify Unused CSS in WordPress
There are multiple ways to try out when it comes to checking unused CSS in WordPress sites. You can use Google Pagespeed Insights, Chrome DevTools, or Purifycss.online tool to figure out the unused WordPress CSS.
#1 Use Google Pagespeed Insights
As the name indicates, this tool gives you insight into your page speed along with recommendations to improve it.
After you enter the page URL, in case your page contains any useless CSS, it’ll be addressed under the Opportunities section in an orange or red flag. In the example below, you can see Reduce unused CSS clarifying which CSS files are influencing your page loading time.
#2 Use Chrome DevTools
If you want more detailed identifications about existing unused CSS, go for the Chrome DevTools.
To get started with the tool, firstly open your desired web page, then press Control+Shift+P (on windows) or Command+Shift+P (on Mac). You can also right-click on the page and choose Inspect.
Afterward, head to the Sources, click on the 3 dot icon in the top right corner and select Coverage.
Choose Start Instrumenting coverage and reload page and it’ll show you a report as below. Now open individual files and double-check both used and unused CSS.
#3 Use Purifycss.online Tool
Another powerful gizmo to identify WordPress unused CSS is Purifycss.online tool. It majorly helps crawl your WordPress pages or posts and examines every CSS file and inline style.
Bear in mind that the tool will reduce unused CSS code of specific pages only, not all your pages. This may overwhelm you when you have tons of pages to clean up the CSS.
Just go to https://purifycss.online/ and enter your site URL in the Website URL box.
The report presents the percentages of used and unused CSS as well as how your clean CSS code looks.
How to Remove Unused CSS in WordPress
Although you can remove unused CSS in WordPress manually, we suggest making use of a plugin. Not only does it save you time but this method also reduces improper changes to your style.css file.
WP Rocket should be the first option crossing your mind to reduce unused CSS. This simple yet powerful plugin enables you to improve your CSS files by excluding most of the unused CSS code.
To use the plugin, install and activate it for your site.
- Download the WP Rocket plugin from their site
- Go to Plugins → Add New and hit Upload Plugin from your admin dashboard
- Choose the plugin’s zip file you’ve just downloaded
- Visit Settings → WP Rocket on your admin menu
- Open the File Optimization tab
- Head over to the CSS Files section and check on the Remove Unused CSS (Beta) option
- Ensure the plugin takes the CSS wiping out tasks by pressing Activate Remove Unused CSS
It’s possible for you to decide which file shouldn’t be touched by entering the CSS filenames, IDs, or classes in the ‘CSS safelist’ box.
Remember to save your changes after taking all these actions. A successful unused CSS removal will give rise to a message saying “Remove Unused CSS is complete!” You can now go back to the Google Pagespeed Insights tool to make sure of the improvement in your page speed.
Apart from WP Rocket, there is another plugin called Asset CleanUp to reduce the unused CSS on your WordPress site. Unlike the former, you can download it for free from the WordPress repository.
Asset CleanUp has gained trust from over 100 thousand users worldwide with a 4.9/5-star review. It promises to be a compelling solution to boost your page speed.
Ready to Remove Unused CSS WordPress
Unused CSS never performs any function in your site format and styling. Reducing fruitless CSS turns out to be one of the most effective ways to speed your WordPress page loading time.
You’ve been guided on how to clean up unused CSS using the WP Rocket plugin. Before installing the plugin, you can consider identifying how much unused-CSS code is existing tools like Google Pagespeed Insights, Chrome DevTools, or Purifucss.online.
Do any sections above confuse you? Share with us your CSS removal experience in the comment section below.
