How to Remove Unused CSS and JavaScript Files in WordPress
Tags: wordpress
Published: 2020-08-04 03:09:44

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, so let's see how to do it.

### Analyze and Find the Unused CSS / JavaScript Files

Before removing the unused CSS / JavaScript files, we should check and briefly analyze them. The most convenient and easy way to do it is using [Coverage Tab](https://developers.google.com/web/tools/chrome-devtools/coverage) 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.](https://cdn-images-1.medium.com/max/600/0*CgRjrtQrr2C5Di62.png)

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

![Chrome will analyze your website to find unused CSS / Javascript filesClick the Reload button to see unused CSS / JS files.](https://cdn-images-1.medium.com/max/600/0*zd-EkOzdbI2WkFhE.png)

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

![Check my website's homepage.The unused code is marked with the red color.](https://cdn-images-1.medium.com/max/600/0*Dg9u2fBtjit2Esnz.png)

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 the red color.

![The unused code is marked with the red color.](https://cdn-images-1.medium.com/max/600/0*AO3SeDWKINyvnar2.png)

### Removing the Unused CSS / JS Files

In this article, I suggest 2 methods to remove the unused CSS or JS files. 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. This plugin has a free version on [wordpress.org](https://wordpress.org/plugins/wp-asset-clean-up/).

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 this example below, I choose the **Homepage** tab to check my website's homepage.

![Check my website's homepage to find unused files.](https://cdn-images-1.medium.com/max/600/0*jjcaBua_efeMuXwc.png)

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](https://cdn-images-1.medium.com/max/600/0*X-jjVcl-5toyqfka.png)

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](https://cdn-images-1.medium.com/max/600/0*YGyQsaHiXeBTWcfQ.png)

```
<?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](https://metabox.io/speed-up-with-jetpack/) and BBPress by adding the below code into the `remove-resources.php` file:

<pre>// 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 );</pre>

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](https://cdn-images-1.medium.com/max/600/0*wC0ucDtv9rrdlN3S.png)

It's all done now!

### Last Words

So by these 2 methods, you have one more way to [improve your website loading speed](https://gretathemes.com/speed-up-wordpress-website/). Do you find it helpful for you? If you have any questions, leave a comment. And don't forget to follow our upcoming articles to get more useful techniques for WordPress.

 --- --- --- 

The publication at [Meta Box](https://metabox.io/remove-css-javascript-files-wordpress/).