How To Avoid and Remove Unnecessary CSS in WordPress

If you want to optimize the speed of your WordPress website, you need to remove unnecessary CSS. It delivers a faster page loading experience to the users and improves your site ranking in the Google page speed test.

We focus on using reliable and fast web hosts, enabling caching, optimizing images, and removing unused plugins to reduce server load, compress Javascript & CSS, use a content delivery network, etc.

But sometimes, we can improve our page performance even more by avoiding those components which load as bloats. So, next in the list, you can remove unnecessary CSS and JS files from WordPress to make your page feel smooth and fast. In this article, we will mainly focus to avoid and remove unnecessary CSS.

Of course, there are great plugins to unload specific CSS from a page, such as Asset CleanUp, or Purify CSS, to name a few. In this article, we will show how to do it with and without installing plugins on your WordPress site.

Before that, let’s go through…

• What is unused CSS?
• Why do plugins load all CSS?
• What if we don’t serve these CSS’?
• Why is removing CSS not an easy task?

What Is Unused CSS?

Unused CSS is the CSS code that loads regardless of its importance on a particular page. Some of these codes do their work to design page elements. However, the rest (most) of them are not required because a single page does not demand all the CSS codes written for the entire website. 

Most of the time, almost 80% of the CSS files probably do not do anything on a single page. You can test it on your personal site’s homepage and observe how many CSS files are being used on the page against the total number of CSS files being served. 

Why Does the Plugin Load All CSS?

During development, the theme developers need to write the theme in such a way that it will support all kinds of websites, whether it’s a blog, forum, WooCommerce site, and so on. It has a decent level of complexity because individual sites require various HTML elements along with their own adjustments.

These include our daily used elements:

1. Search bar
2. Navigation bar
3. Widgets
4. Icons
5. Typography
6. Comment box
7. Social media section
8. Author bio section
9. Buttons
10. Tables

and the list goes on…

For example, when a plugin is including the style.css file, it would be something like this:

<style>
    @import url("style.css");
    p {
           color: blue;
           font-size: 16px;
        }
</style>

99% of the time, developers put all the CSS codes in this style.css file. It loads all the codes from the style.css file regardless of the certain elements you are using on a particular page, and all the CSS will be served to your visitor’s browser. And for this, you have no right to blame the developers either.

What if We Don’t Serve These Elements?

In your blog, you don’t need WooCommerce if you are not running an additional store; you don’t need a comment box either using a third-party commenting system (Disqus, for example). So these elements can certainly be avoided while loading the page.

Although they are not necessary for all pages on your site, some elements are needed on certain pages. A good example is the author box; it is a part of your blog posts; however, on pages such as the homepage and a privacy-policy, an author box is worthless.

Avoiding this CSS will only improve your page performance because they are unused CSS and simply are not doing anything good.

Note: It’s not just the elements of your theme. Plugins do inject additional CSS into your pages. This is another good reason for keeping the installed plugin count low on your site.

Why Is Removing CSS Not an Easy Task?

Filtering out the unnecessary CSS is not an easy job to deal with, mainly because of dynamic classes. It’s a technology to load the function of a class at runtime. It allows loading CSS functions that are uncertain or not known before a web page starts loading.

The Javascript function of your site can load CSS classes as needed, and it does not have to keep track of the name of classes before any one of these classes is loaded and run. This behavior makes it challenging to identify which part of the CSS you will unload and whether it is safe, given missing CSS can break your page.

Also, extraction of used CSS is not easy like critical CSS because there might be JS files that call a specific CSS class following a particular event of a button click. These CSS classes might be required for animation, such as the “go-to top” button on your page. Being dynamically inside Javascript, these CSS classes are extremely difficult to find for removal.

Note: Critical path CSS is an important style/CSS required to render above the fold contents. The rest of the required CSS is loaded in the page’s footer section to avoid render blocking.

How To Find/Analyze Unused CSS Files (This Cover JS Files As Well)

To remove unnecessary CSS files, we need to analyze those files first. The most comfortable way to do this is the coverage tab in the Chrome dev tool. To initiate it;

• First, open the page you want to debug.
• Press Ctrl + Shift + I to open the chrome dev tool.
• Click on settings icon > select more tools > select coverage.

• Then click on the reload button that appears below.

• Chrome will analyze your webpage, and it will prepare a report where you can see the element’s URL, their types, total bytes, unused bytes, and Usage virtualization.

You need to focus on the Usage virtualization tab, mainly the correlation between used and unused bytes of page elements. Red color represents the number of unused bytes, whereas blue color means the number of used bytes.

Then you can select the URL to dig a little more to find out what exactly is being used and what are unused codes. You can see the unused and used code section in the same red-blue color representation.

See this example below;

(As we aim to look for unused CSS, make sure you have selected the URL of a CSS file. In this example, I did select a JS file only for tutorial purpose)

How To Remove Unnecessary CSS?

There are multiple approaches to avoid, reduce or remove unnecessary CSS on your webpage. I will try to keep the hierarchy in reverse order of difficulty.

1. You Can Avoid Inline CSS Styling in the WP Editor

While creating a post, we usually type in the default Gutenberg editor, which is good because it allows you to create a beautiful-looking well-organized page. But the block adds additional inline CSS to your page.

Typically, if you keep your posts simple and do not use advanced Gutenberg styles, then you can avoid the inline CSS by using the code editor. You can use HTML elements such as <p> for paragraphs, <H1>, <H2>, etc for headings, <li> for list, and so on.

For example;

You will be able to use the classic editor too once you paste the final copy of HTML into your WordPress code editor.

2. Generate Critical CSS

Critical CSS can help improve First Contentful Paint (FTP), where it only renders above the fold contents in the header and delays the loading of other styles to last. Ultimately this improves your page speed and resolves the render-blocking warning in the page performance testing tool.

More than removing the CSS from a page, delaying is the key mechanism here, which avoids CSS loading during page load.

Various WordPress plugins can generate critical CSS, for example, Autoptimize, WProcket, etc. Alternatively, you can use Criticalcss.com to generate critical CSS in a couple of simple steps.

3. Use a CDN To Deliver CSS Files

CDN can drastically improve the content delivery speed because of its widely distributed network, which reduces the distance between users and servers. Thus it can reduce server latency and download of CSS (not only just CSS, though). Even if you have a lot of unused CSS files on your page, CDN can deliver them in less than 50 ms.

So the use of CDN won’t necessarily remove unnecessary CSS from your page; instead, it will quickly deliver the complete CSS along with other contents in so much less time. You can use good CDNs such as StackPath, Sucuri, Cloudflare, etc.

4. Use Asset CleanUp Plugin To Remove CSS Files (Plugin)

The Asset CleanUp plugin makes it very easy for the users to unload CSS from your site. It has a free version available in the WordPress repository. All you need to install and activate it to find and unload CSS files in CSS/JS manager.

I recommend using this plugin because you will find tips for each CSS file to choose whether you would want to unload or keep it. Also, debugging your site becomes easy because it provides a simple enable/disable option. You will know which action is breaking the site and which one is improving the performance.

You can also open any published page, and you will see a list of loaded CSS and JS files. These files are classified, so it’s easy to go through them. Then you can see which are the stylesheets not getting used on your page and then unload them sitewide or for individual pages.

Remember, sometimes CSS that seems unused on a particular page may still have work to do, so removing them can break the page. The good news is you can immediately revert the change if unloading of any CSS breaks a page.

5. Use Perfmatters Plugin To Remove CSS (Plugin)

Perfmatters is a premium plugin, which is another excellent option when it comes to unloading JS and CSS files from a page. It comes with a script manager that is super simple to use. You will have the ability to unload an entire plugin or individual js/CSS files from a page.

There is nothing to configure on your part. All you need to install the plugin, activate it, and you can see the script manager on the WordPress toolbar for each page of your site.

6. Create a Plugin Manually To Remove CSS (and JS) Files

It is a manual approach to remove unused CSS files, and you can create a plugin that will keep the record of removed CSS. In WordPress, when you want to remove unnecessary CSS/JS. There are four main functions you will require.

• wp_deregister_script($handle): Remove the registered scripts.
• wp_dequeue_script($handle): Remove the scripts enqueued before.
• wp_deregister_style($handle): Remove the registered stylesheet.
• wp_dequeue_style($handle): Remove the stylesheet that you enqueued before.

And other required functions to create the plugin are,

• __return_false()
• __return_empty_array()

You may also need conditional WordPress tags to remove unused CSS/JS files on a certain page. Now to create the plugin go to wp-content > plugins, create a new folder named “remove-resources” followed by .php extension.

Add the following content in the file:

For example, if you want to remove styles and scripts of the Jetpack plugin, you need to add the following code into the remove-resources.php file.

Finally, go to the WordPress plugin manager and activate the remove resources plugin. It will remove the CSS you have mentioned in your newly created plugin.

Final Words

It’s not easy to remove unnecessary CSS from your site, and it’s almost impossible for us as a user of WordPress! But with the mentioned steps, you will be able to reduce or remove unnecessary CSS from a page and improve page speed + user experience.

After reading the article, share your thoughts with us in the comment section, and don’t forget to share it.