You might be just discovered your site is taking more time to load. Think about what should you do to speed up your WordPress site loading time?
You already know there are many ways to speed up your site. But let me remind you, one of the most effective ways to increase your site loading speed is by reducing unused CSS.
Having a lot of unused CSS in your website hurts your website load time. Removing those files improves your site performance and user experience. It can also help you improve your site rankings in Google PageSpeed Insights.
Even if you run your website through speed testing tools such as Google PageSpeed Insights, you may get a warning to remove Unused CSS. Heavy CSS affects multiple items in PageSpeed Insights. Removing unused CSS not only improves scores for “removing unused CSS” but also other items in PageSpeed Insights.
To remove unused CSS from WordPress, you can use the free plugin Asset Cleanup. We will show you the tutorial in detail but before that let’s discuss what is unused CSS and how to find them.
What is Unused CSS?
CSS is the language used to design your WordPress website’s theme. Theme developers write the theme in such a way that the theme supports almost all types of sites and these sites may require several types of HTML elements like below:
- Typography
- Icons
- Tables
- Forms
- Buttons
- Widgets
- Navigation bar
- Author box
- Search bar
- Comments
- Galleries
- Social media buttons
99% of the time, theme developers write everything into a single file style.css.
But the problem is when a visitor opens a website, the browser typically has to download, parse, and process all external stylesheets on the visited page before it can display the page content to the visitor. Regardless of what features you use on your site, CSS code is written for all the features served to your visitors.
Unused CSS is CSS code that loads on your website but isn’t actually needed in order to display the page. If any CSS exists on such a page that is not needed for the page, the browser will waste its time on it. So when you delete that CSS, that page load festers.
How to Find Unused CSS?
From some online tools to plugins, there are many ways to find unused CSS of your WordPress site. But in my opinion, installing another plugin for finding unused CSS can be the cause more loading time. So here, we will talk about the two most easiest and recommended online tools to find your unused CSS.
With Google PageSpeed Insight:
To identify unused CSS, first, go to Google PageSpeed Insight and enter your site URL. Now, check under the Opportunities section, you’ll find the “Reduce unused CSS” option with an orange or red flag if the page has any unused CSS to reduce. Expand the option by clicking the dropdown and then see the location of the unused CSS.
Chrome DevTools:
This is another easy and popular option to find your unused CSS. Go to your website page > Inspect, and press Control+Shift+P. Now, start typing coverage, select the Show Coverage and click the reload button. Next, choose “CSS” in the dropdown to only show CSS usage.
How to Reduce Unused CSS?
There are many plugins available in the market for reducing unused CSS but most of them are paid. Asset Cleanup is a free plugin that allows you to reduce unused CSS easily and work no less than those pain plugins. That’s the reason we choose the Asset Cleanup plugin for showing you this tutorial.
First thing first, install and activate the Asset CleanUp plugin.
Now, go to the “Asset CleanUp > Settings” page and switch to the Test Mode tab and turn on the “Enable Test Mode” option. As it sounds, enabling test mode allows you to test out different settings without affecting website visitors.
To upload files from plugins and themes per page go to “Asset CleanUp > CSS / JS Manager”. The redirected page will contain the CSS and javascript enqueued files on a page-by-page basis. Reduce the unused CSS enabling the “unload on this page” button.
Click the dropdown and select “All Styles & Scripts > Grouped by location (themes, plugins, core & external). This will help you to view the resource files grouped in a different category.
With this plugin, you not only can deactivate a particular CSS that is not needed for a particular page but also deactivate for individual posts alone.
Asset Cleanup has a note box where you can write down why you removed that asset from loading.
And finally, click on the “Update” button to save changes.
Retest Your Site For Unused CSS:
You went through a process to reduce unused CSS. Now, shouldn’t you need to check if the process actually worked for you or not?
Of course, you should! For doing that, again test your site in Google PageSpeed Insight.
As you can see in the below image, the “Reduce unused CSS” warning is removed.
Conclusion:
You can also use Content delivery networks (CDN) for delivering CSS files. A CDN can dramatically reduce the network latency and download time for CSS files. Though your WordPress site will still load the unused resources, CDN reduces the server load time. It is important to note that a CDN does not host your website’s content but instead helps cache content. This can also help you improve your site rankings in Google SERPs.
However, when it comes to removing unused CSS from your WordPress website, it would be quite a difficult task to completely remove all unused CSS. Because of the way WordPress works behind the scenes, some unused CSS may be hard to find and remove. But you can still work on it to minimize the margin. With the above tutorial, you can reduce the impact of unused CSS by a good percentage and improve speed and user experience.
We hope this article helped you learn how to easily reduce unused CSS in WordPress. If you have any questions, leave a comment. And don’t forget to check our WordPress Tips section for more tutorials.
You might be just discovered your site is taking more time to load. Think about what should you do to speed up your WordPress site loading time?
You already know there are many ways to speed up your site. But let me remind you, one of the most effective ways to increase your site loading speed is by reducing unused CSS.
Having a lot of unused CSS in your website hurts your website load time. Removing those files improves your site performance and user experience. It can also help you improve your site rankings in Google PageSpeed Insights.
Even if you run your website through speed testing tools such as Google PageSpeed Insights, you may get a warning to remove Unused CSS. Heavy CSS affects multiple items in PageSpeed Insights. Removing unused CSS not only improves scores for “removing unused CSS” but also other items in PageSpeed Insights.
To remove unused CSS from WordPress, you can use the free plugin Asset Cleanup. We will show you the tutorial in detail but before that let’s discuss what is unused CSS and how to find them.
What is Unused CSS?
CSS is the language used to design your WordPress website’s theme. Theme developers write the theme in such a way that the theme supports almost all types of sites and these sites may require several types of HTML elements like below:
99% of the time, theme developers write everything into a single file style.css.
But the problem is when a visitor opens a website, the browser typically has to download, parse, and process all external stylesheets on the visited page before it can display the page content to the visitor. Regardless of what features you use on your site, CSS code is written for all the features served to your visitors.
Unused CSS is CSS code that loads on your website but isn’t actually needed in order to display the page. If any CSS exists on such a page that is not needed for the page, the browser will waste its time on it. So when you delete that CSS, that page load festers.
How to Find Unused CSS?
From some online tools to plugins, there are many ways to find unused CSS of your WordPress site. But in my opinion, installing another plugin for finding unused CSS can be the cause more loading time. So here, we will talk about the two most easiest and recommended online tools to find your unused CSS.
With Google PageSpeed Insight:
To identify unused CSS, first, go to Google PageSpeed Insight and enter your site URL. Now, check under the Opportunities section, you’ll find the “Reduce unused CSS” option with an orange or red flag if the page has any unused CSS to reduce. Expand the option by clicking the dropdown and then see the location of the unused CSS.
Chrome DevTools:
This is another easy and popular option to find your unused CSS. Go to your website page > Inspect, and press Control+Shift+P. Now, start typing coverage, select the Show Coverage and click the reload button. Next, choose “CSS” in the dropdown to only show CSS usage.
How to Reduce Unused CSS?
There are many plugins available in the market for reducing unused CSS but most of them are paid. Asset Cleanup is a free plugin that allows you to reduce unused CSS easily and work no less than those pain plugins. That’s the reason we choose the Asset Cleanup plugin for showing you this tutorial.
First thing first, install and activate the Asset CleanUp plugin.
Now, go to the “Asset CleanUp > Settings” page and switch to the Test Mode tab and turn on the “Enable Test Mode” option. As it sounds, enabling test mode allows you to test out different settings without affecting website visitors.
To upload files from plugins and themes per page go to “Asset CleanUp > CSS / JS Manager”. The redirected page will contain the CSS and javascript enqueued files on a page-by-page basis. Reduce the unused CSS enabling the “unload on this page” button.
Click the dropdown and select “All Styles & Scripts > Grouped by location (themes, plugins, core & external). This will help you to view the resource files grouped in a different category.
With this plugin, you not only can deactivate a particular CSS that is not needed for a particular page but also deactivate for individual posts alone.
Asset Cleanup has a note box where you can write down why you removed that asset from loading.
And finally, click on the “Update” button to save changes.
Retest Your Site For Unused CSS:
You went through a process to reduce unused CSS. Now, shouldn’t you need to check if the process actually worked for you or not?
Of course, you should! For doing that, again test your site in Google PageSpeed Insight.
As you can see in the below image, the “Reduce unused CSS” warning is removed.
Conclusion:
You can also use Content delivery networks (CDN) for delivering CSS files. A CDN can dramatically reduce the network latency and download time for CSS files. Though your WordPress site will still load the unused resources, CDN reduces the server load time. It is important to note that a CDN does not host your website’s content but instead helps cache content. This can also help you improve your site rankings in Google SERPs.
However, when it comes to removing unused CSS from your WordPress website, it would be quite a difficult task to completely remove all unused CSS. Because of the way WordPress works behind the scenes, some unused CSS may be hard to find and remove. But you can still work on it to minimize the margin. With the above tutorial, you can reduce the impact of unused CSS by a good percentage and improve speed and user experience.
We hope this article helped you learn how to easily reduce unused CSS in WordPress. If you have any questions, leave a comment. And don’t forget to check our WordPress Tips section for more tutorials.
Sidratul Sohrat