Once we get serious about optimizing a WordPress website, one of the essential tasks is to locate all those unused JavaScript and CSS files, and disable them.
Why are JavaScript and CSS useless?
Well, the first thing you should know is that they won’t always be useless.
They may not be necessary on some pages but useful on others, although you may also find some really unused JavaScript and CSS files all over your website.
One of the reasons for finding unused JavaScript and CSS files is due to plugins, because when a developer creates a utility for WordPress he doesn’t know where each person who installs his plugin is going to use it, and if it needs JavaScript or CSS styles he will load them all over the web, so that the utility is always available.
A clear example is the Contact Form 7 contact form. For its correct operation and display it needs JavaScript and CSS, but as the plugin author does not know where you are going to put the form, what the plugin does is to load its necessary resources throughout the web.
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.
How to detect unused JavaScript and CSS
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, in that list you will see that there are JavaScript and CSS files with 100% of unused bytes in the page, that is, those files have been loaded but the page does not need them for the correct loading and display of all its content and resources.
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.
Once you have identified which JavaScript and CSS files have no use in your page or pages, we know where to start, how to optimize the load by eliminating the load of all that unnecessary code.
Note: When optimizing your WordPress website, removing unused JavaScript and CSS should be done on a page-by-page basis. There are few unused JS and CSS files that load across the entire site, most are per page. However, it is ideal to start with the ones that load unused throughout the site first.
How to remove unused and/or unnecessary JavaScript and CSS code
There are several ways to eliminate these unused codes.
With code
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:
// Disable Emojis
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );Code language: JavaScript (javascript)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:
// Remove styles Contact Form 7 in pages without forms
add_action( 'wp_print_styles', 'wphelp_deregister_styles', 100 );
function wphelp_deregister_styles() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}
// Remove JavaScript Contact Form 7 in pages without forms
add_action( 'wp_print_scripts', 'wphelp_deregister_javascript', 100 );
function wphelp_deregister_javascript() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}Code language: JavaScript (javascript)To remove unused CSS and JS files you can use the __return_false() or __return_empty_array() functions.
For example:
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
Code language: JavaScript (javascript)You can also use the wp_dequeue_script or wp_deregister_script() function to override scripts or wp_deregister_style() to override styles.
For example:
add_action( 'wp_enqueue_scripts', function ()
{
wp_dequeue_script( 'devicepx' );
}, 20 );Code language: JavaScript (javascript)With plugins
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.
Asset CleanUp is a plugin to optimize WordPress that has lots of additional utilities, very similar to Autoptimize, but what stands out above the rest is the management of JavaScript and CSS, both globally and page by page.
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.).
Additionally, you will see that there are advanced options, marked with a padlock, belonging to the Pro version, but with the free version options we can easily disable unused JavaScript and CSS.
That said, if you identified in the previous step which JavaScript and CSS files were unused on the page, you have the necessary information to, from the plugin settings, deactivate them safely and quickly, at the click of a button.
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.
