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.

Open Chrome Devtools to find the unused CSS / JavaScript files.

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

Click the Reload button to see unused CSS / JS files.

 

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

Chrome will analyze your website to find unused CSS / Javascript files
Chrome will analyze your website to find unused CSS / Javascript files

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.

The unused code is marked with the red color.
The unused code is marked with a red color.

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.

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.

Check my website’s homepage to find unused files.

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.

Use Plugin to Remove the Unused CSS / JS Files

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:

Manually remove the CSS / Javascript files by creating a new plugin

<?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.

Create a plugin to remove the CSS / Javascript Files

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.

12 thoughts on “How to Remove Unused CSS and JavaScript Files in WordPress

  1. Hello Sir,

    I have tried to copy your plugin to removed 2 unused CSS and JS files generated by the SiteGround Optimizer plugin but it did not work.
    - https://xxxxx.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-css-c99b7ded61b6e6cc6cc78b419aeb9b62.css',
    -https://xxxxx.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-e445189f04d176a3c77040b71accf2fa.js

    Can you please give a solution for this?

    Thank you.

    S.Gray

  2. Hi S.Gray,

    It's the auto-generated combined CSS and JS file of the plugin SiteGround Optimizer. This feature helps you to reduce the HTTP requests by only loading one CSS or JS file. You can deactivate this plugin or turn off the combined option to remove two files.

  3. Hi Long.N

    I can't deactivate this plugin, the plugin is great,however it upload unused css and js files all the time.What you mean by turn off the combined option to remove two files?

    What code should I write in your plugin to remove these two unused css and js files?

    Thank you!

    Best,

  4. Hi S.Gray,

    For a better experience, please try to contact the plugin SiteGround Optimizer support to ask for help in this case.

  5. I was trying to remove unused ccs/Java script from my website and found this article

    I followed the instructions for the plug in option and when I did it my website home page looked not good. I went back and undid everything and it worked for desktop but my mobile site still looks bad.

    I was going to try to use an old back up but had the warning that if I go to my old back up I’ll start using http instead of https. (Which idk how I even started using https)

    I’m just not sure what to do. Thank you.

  6. how to reverse unload, i was using test option and i remove js file now site is broken in login only. when disable assets cleanup plugin its again working fine. how can i reset assets clean up plugin.

  7. Site speed is an issue that has more advantages when it comes to wordpress, but it is a hair-raising issue until the optimization is finished.
    The topic was useful, I think I was able to optimize my site. Thanks, it's a good explanation.

Leave a Reply

Your email address will not be published. Required fields are marked *