How To Remove Unused CSS In WordPress

Learn How To Remove Unused CSS In WordPress to speed up your WordPress site .

You can learn how to identify and delete unused CSS on your website in this article, and prevent WordPress from moving megabytes of unused code without any plugins. Using Google PageSpeed Insights to evaluate your site, you may have seen the error like “Delete unused CSS.” Page speed and efficiency of the site are the main factors for online success. Through Google’s AMP initiative, caching strategies, Content Delivery Network (CDN),.htaccess tricks, and a few more are the ways to increase the pace of your blog.

As per a Google Adsense post details, it seems that if your site loads slowly and takes more than 3 seconds to load onto your mobile device, you may lose your visitor.
If your WordPress site is using a paid WordPress theme or a common one from the list of official WordPress themes, the theme is likely to be created for a variety of use cases. And you can only use a limited collection of all the features in the theme.

In that case, your website loads a whole lot of unused CSS which is not needed to style the pages of your website. For eg, the WordPress theme you’re using may also have styles for WooCommerce pages, but if you’re only running a blog on your WordPress site, then you’re not using the CSS included on your site for WooCommerce pages and thus serving unused CSS users.

If you checked your website on the Google Pagespeed tool, you’re probably already aware that there are unused CSS issues on your site. We’ll teach you in this guide how to search for unused CSS first, and then use a free tool to delete unused CSS from your WordPress pages.

That’s one of the reasons why we got married on Crunchify with WordPress and AMP. Google has started displaying AMP pages on the Result search page.

Pages load super fast on Crunchify. Within half a second most pages load. Look at photo below.

What is Unused CSS?

Design creators design the design in such a way that the theme fits nearly all forms of sites such as blogs, WooCommerce, forums etc. Each of these sites which include many styles of HTML elements (with their own variations) as below: Typography Icons Tables Forms & buttons Widgets Navigation bar WooCommerce Author box Search bar Reviews Galleries Social media buttons The list goes Whether you use it or not, your users will be provided with the css needed for all of these elements.

And if all those elements aren’t used?

I don’t need WooCommerce in my blog, comments (I use Disqus), and lots of such elements. Additionally, some elements such as tables, forms, author box, sharing buttons are only required on the posts page, not on the home page.

Ok, ‘unused css’ are all these.

PS: Plugins may also insert extraneous css, not just themes.

Why should you remove unused CSS in WordPress in the first place?

Come on, let’s be serious about it, you know why you should.

If you didn’t want to automate your web-page results, you wouldn’t be here. You have already run through a PageSpeed checker on your website and got a recommendation to delete unused CSS.

Most websites use lots of 3rd party repositories or other pre-constructed templates, with lots of functionality and coding to cover all possible situations, although only a small portion of it is actually being used. You end up transferring megabytes of unused CSS (dead code) which really takes your website a long time to load.

How to find or check unused CSS in WordPress?

Sadly, if you’re using WordPress, there’s no simple way to locate unused CSS, by only downloading a plugin and going through any configuration measures. While there are several resources online, this helps by uploading the URL to find the correct CSS.

Use Use PurifyCSS Online to check for unused css

Currently, you will consider a WordPress plugin for virtually anything. But sadly there is no single plugin available for deleting unused CSS. Therefore, we will use non-wordpress-specific manual software to delete unused CSS from your pages.

PurifyCSS is the friendliest non-developer application you can consider to manage unused CSS. The tool has a basic UI that helps users to either include the Website URL OR the HTML and CSS files. We’ll use the URL option for WordPress and have links to all sorts of pages on your site to let the tool catch CSS from everything and customize it for unused CSS.
Below is a short list of sites that you can use in the tool: Homepage URL Several end-page URLs from each folder of the web — to guarantee that CSS is used with all end items.
Email, Email, Privacy and all kinds of pages you can have on your web.
Archive tab, search tab, author pages Custom Post Style pages Touch the Clean up CSS button until you have attached all related forms of URLs from your web to the PurifyCSS Online resource.

Copy the tool’s latest CSS, and put it on your website. When installing the latest PurifyCSS created CSS, make sure you backup the original style.css and other CSS files on your site.

link: https://purifycss.online/.