Table of Contents
Well, the first thing you should know is that they won’t always be useless.
But not only plugins, WordPress also makes this kind of “mistakes”, for example, loading files for displaying emojis, even if you do not use them on your website.
If it is clear to you why this happens, let’s see how to detect these unused code files and then learn how to remove them, depending on each case.
To achieve this we will use the browser’s development console. The screenshots I will show you are those of Chrome but they are very similar in the rest of modern browsers.
To begin, open the browser console with the key combination or by right-clicking on the page to analyze and clicking the “Inspect” option.
Once the console is open we are going to add a tool hidden by default: Coverage, which you will find by clicking on the settings menu → More tools → Coverage.
When you click on ‘Coverage’ the new tool will appear at the bottom of the console, with an icon for you to reload the page and analyze the resources it loads.
If you click on the icon, the page will reload and a list of resources will appear, sorted from most to least weight in bytes, and the column we are looking for, “Unused bytes“.
This tool, ‘Coverage’, is used to show all the codes that load a page and their coverage index, that is, how necessary they are for the loading of that page, from 0 to 100.
As you will see, it is enormously useful for what we are analyzing.
Well, from there, if you click on any file with unused bytes, its code will be displayed at the top, with color indicators in which red is unused bytes and blue are the bytes in use.
Of course, in files with 100% unused bytes all the code will be in red.
There are several ways to eliminate these unused codes.
As always, one of the cleanest methods of eliminating what’s left over is to use WordPress functions that, in this case, avoids loading these unnecessary files.
A very clear example would be the scripts and styles that WordPress loads by default for compatibility with emojis that, if you do not use them, they will always be loaded unnecessarily.
What you have to do is, in this case, disable them like this:
Another good example, applicable to many plugins, is to override Contact Form 7 styles and scripts on pages that do not have forms, like this:
To remove unused CSS and JS files you can use the
You can also use the
wp_deregister_script() function to override scripts or
wp_deregister_style() to override styles.
If you do not feel confident enough to remove JSS and CSS files without using codes there is a plugin that can help us in this task.
And my favorite without a doubt, is Asset CleanUp, which although it has a paid Pro version, with the free version that we have in the directory of WordPress.org serves us well enough for this task.
To do this it has some settings screens in which to configure what we want to analyze and optimize and how.
But most importantly, it adds a box to the WordPress editor from which we can check which JS and CSS files are loaded on each page and, from there, decide whether to disable them or not.
They are displayed sorted by code coming from plugins, the theme, WordPress core, third party and custom code, and to see a particular resource face you must expand them.
Each section tells you which JS and CSS files are loaded, from which source and options for:
- Disable it on the current page.
- Disable it on the entire site.
- Disable it on all current content type (posts, pages, etc.).
Just remember to refresh the page where you change settings.
Trick: If you know of any JS or CSS that will only be needed for a specific page or post, you don’t need to disable it on a page-by-page basis except for the one that needs it. Disable it globally and then you can enable it only on that page.
I hope I have helped you to understand this important task of WordPress optimization, and that it will help you to manage your web resources more efficiently, offering better loading times and a better experience to your visitors and users.