How to Safely Remove Unused CSS in WordPress – And Why
The guiding principle of WordPress is that the internet is for everyone, and that anyone can make a website, even without coding knowledge. And it’s true – you need precisely zero coding knowledge to create a website, but that means relying on somebody else’s coding.
The pitfalls are obvious: it may so happen that your website comes to contain code, often in CSS, that it doesn’t really need to run. This tutorial is all about how to remove unused CSS from your WordPress website. But what is CSS? How come your website has code it doesn’t need? If the code does nothing, why not just leave it? We will attempt to answer these questions, and more. Here’s what we’ll be talking about:
Qode Themes: Top Picks
View Collection
CSS stands for cascading style sheets. It is a set of instructions for a browser which dictate how a web page looks to users. A web page is structured using a markup language, such as HTML, but HTML is not legible to the user. A web browser reads HTML and presents contents to a user in human-readable form.
But a browser’s default interpretation of a marked-up text would make for a lot of indistinguishable pages, and that’s where CSS comes in. CSS has many uses: changing font size, colours, and type, line breaks and paragraph spacing, adding and manipulating background images, and much more.
There are many ways how unnecessary code could find its way to your website. When it comes to CSS, it will likely be down to something you have installed on your WordPress website which affects the way it’s presented to the user. For instance, a theme has its own CSS, making your website different from all others not using the same theme. A plugin such as a page builder might have its own CSS, and so have fonts, icon fonts, and many other pieces of software you may install.
But what’s the harm, we hear you asking. Well, the end result is that your website is loading a lot of files it doesn’t need to function, meaning that your loading time is unnecessarily extended. Slow loading times do not affect just your visitors’ user experience – search engines take bounce rates (how quickly a user “gives up” on your website) and loading time into account.
And while CSS files tend to be small, there can be very many of them on any given website. This is why there is no such thing as harmless useless code.
Determining whether a website suffers from unused CSS issues is relatively easy: Google has a tool specifically for it. You can use Google PageSpeed Insights to determine whether your website suffers from any unnecessary slow-ups and see how many of them can be ascribed to unused CSS.
We’ve run the test on a website which, clearly, has many issues. You can expand the results for deleting unused CSS to see Google’s suggestions.
Clearly, this only works for Google’s criteria. However, while all search engines have different algorithms, they tend to work in similar ways. Besides, slow loading times are slow loading times no matter how you cut it, and nobody wants that.
The challenge here is knowing which CSS is useless. The answer? You don’t need to know that yourself. You can, and should, rely yet again on somebody else’s code. In this case, it is a plugin: Asset CleanUp.
First, install and activate the plugin. You will immediately be taken to the plugin’s Getting Started screen. To get started removing unused CSS, select Settings from the right-hand side menu.
In order to test different settings without affecting website visitors, you need to enable the plugin’s test mode. To do that, select the Test Mode tab and slide the slider and click Update All Settings.
Now, this plugin has a lot of options and settings. We will be concentrating on removing unused CSS. To do that, we need the CSS & JS Manager settings. It will open on the Homepage sub-tab. This is where you can see which files are loaded on your website’s homepage.
Scrolling down the list, you can see each of these files, along with a lot of relevant data, such as its source, position, file size, and the rest. You might also get a Tip, a useful hint on whether a piece of code is needed on the page or not.
In the case of Contact Form 7, for instance, you can see that the file is related to a form. The recommendation is that the file be unloaded on the Homepage if there are no forms on it. The same also goes for all the other pages not using a form.
To unload Contact Form 7’s CSS from the Homepage, activate the slider and click Update.
And it’s as simple as that: you have now made your website a little quicker to load by removing unused CSS.
The trouble is, you need to do all this for all the posts and pages, too. To load a list of CSS for a post, for instance, switch to the Post tab, and search for it in the search field and select a post from the list.
Once you are satisfied with the CSS you have unloaded, test if everything loads properly, and you’re done. You can then switch the test mode off, to make the settings apply to all users, and not just the logged-in admins.
In Conclusion
As you can see, there are good reasons for you to make sure whether your website suffers from unused CSS. It takes some work to remove all unused CSS from your website, especially if it contains a lot of pages, but the results are well worth it – your visitors will appreciate faster loading times, while search engines will not penalize you for slowness and bounce rate, leading to more potential visitors.
