How to Remove Unused CSS and JavaScript Files in WordPress

Website owners and developers as well usually care about improving the website’s loading speed. One of the most effective techniques to do that is removing the unused CSS and Javascript files. This execution is quite simple. We are going to show you how to find unused CSS and JS files, and then clean up CSS and JS with a dedicated plugin or a self-created plugin in WordPress.

Analyze and Find the Unused CSS / JavaScript Files

Before removing CSS / JavaScript files in WordPress, we should check and briefly analyze them. The most convenient and easy way to do it is using Coverage Tab in Chrome DevTools.

To open Chrome DevTools, press Ctrl + Shift + I or click the right mouse button and choose Inspect. Next, click settings icon > More tools > Coverage.

After that, click the Reload button (the circle arrow icon).

Chrome will check your website and export a report as follows:

Focus on the Usage Visualization section and the correlation rate between used and unused code: red color means the number of unused bytes and blue color means the number of used bytes.

You can click an URL to find out exactly what code isn’t used. The unused code is marked with red.

Removing the Unused CSS / JS Files

In this article, I suggest 2 methods to remove CSS or JS files in WordPress. They are using a plugin and manual-removing.

Method 1: Use Plugin to Remove the Unused CSS / JS Files

I recommend you to use Asset CleanUp to clean up CSS / JS Files in WordPress. This plugin has a free version on wordpress.org.

Asset CleanUp: Page Speed Booster

Author(s): Gabe Livan

Current Version: 1.3.9.7

Last Updated: August 31, 2024

wp-asset-clean-up.1.3.9.7.zip

98%Ratings 100,000+Installs WP 4.5+Requires

This plugin is very easy to use. After installing and activating it, go to Asset CleanUp > CSS / JS Manager to check pages and elements on your website by choosing the corresponding tabs.

In the example below, I choose the Homepage tab to check my website’s homepage.

Click the Front Page or Sample Page button in the content area of the Homepage tab. Then, wait for the plugin for a few seconds to load information.

After that, you’ll see a list of CSS and JS files that your homepage will load. The total number of these files is displayed in the Total enqueued files section. These files are classified by groups so it’s very easy to see.

You can expand to see the detailed information of each file or group of files then choose Unload on this page to stop loading each file.

You’ve already finished removing unused CSS / JS files using the plugin. In case you are not interested in it, you may refer to the following method.

Method 2: Manually Remove the CSS / JS Files by Creating a New Plugin

We need to use the following functions:

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

Besides, you may need the conditional tags of WordPress to remove the unused CSS / JS files on a certain page or post. It will help you proactively control how to load the CSS / JS files.

Now, let’s create a plugin to remove the unused CSS / JS files!

Go to the wp-content > plugins, create a new folder named remove-resources that includes a .php file named remove-resources.php with the following content:

<?php
/*
 * Plugin Name: Remove Resources
 * Version: 1
 * Description: remove unused CSS JS files
 * Author: elightup
*/

To remove the unused CSS / JS files, we use the __return_false() or __return_empty_array() function. Also, you can use the wp_dequeue_script function to remove scripts.

For example, I’m removing styles and scripts of Jetpacks and BBPress by adding the below code into the remove-resources.php file:

// Remove styles of plugin
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
add_filter( 'bbp_default_styles', '__return_empty_array' );

// Remove bbPress scripts on non-bbPress pages
add_filter( 'bbp_default_scripts', function ( $scripts )
{
return is_bbpress() ? $scripts : [ ];
} );

// Jetpack scripts
add_action( 'wp_enqueue_scripts', function ()
{
wp_dequeue_script( 'devicepx' );
}, 20 );

Finally, save the remove-resources.php file and activate the created plugin to make it work.

It’s all done now!

Last Words

So by these 2 methods, you have one more way to improve your website loading speed and performance. Besides, you should also remove unused scripts and styles in plugins. If you're using Beaver Builder, this post can help you remove these unnecessary scripts.

Do you find it helpful for you? If you have any questions, leave a comment. And don’t forget to follow our upcoming articles in Meta Box to get more useful techniques for WordPress.