“Remove unused JavaScript” is a recommendation that you may come across when running a page speed test of your WordPress site in the Lighthouse. Unused JavaScript files are render-blocking resources that are one of the main causes for slowing the page speed down. Also, they hugely affect site performance and user experience.

Therefore, when you run a page speed test, Lighthouse flags JavaScript files with more than 20 KB of unused code. In this case, you have to remove these unused JS files. But, how to remove unused JavaScript in WordPress? Well, Here, in this guide, you will find the process of removing the JS files and improving your site speed performance. So, let’s get started.

How to Remove Unused JavaScript in WordPress

When rendering your page, the browser must load, compile, and evaluate the unused JavaScript before proceeding with the other necessary work. Which ultimately slows down the loading time and impacts the performance.

The best solution to fix this issue is to remove the unused JS. So, here’s how to remove unused JavaScript in WordPress.

Detect Unused JavaScript

First, you have to analyze and detect unused JavaScript. Using the coverage tab in Chrome DevTools, you can perform this task.

Press Ctrl+Shift+C and Command+Shift+C (MAC users) to open the DevTools.
Then, press Ctrl+Shift+P and Command+Shift+P (MAC user).
After that, the command menu will appear, so type Coverage and select the “Show Coverage” command.
From the coverage tab, click on the reload button to reload and start capturing the JS and CSS files.
Filter the coverage by selecting JavaScript to see only the JS files.
Now you will see something like the following image. Here in the last column, the red color implies the unused JS, and the blue color implies the used JS.

Click on the URL, and it will open the resources and show the breakdown of all used and unused code.

Remove Unused JS in WordPress

Log in to your WordPress Admin Interface.
Navigate to the Appearance option from the left sidebar and then click Theme Editor.
From the right sidebar, click functions.php., and this will bring up the functions.php code editor.
Now, following the below image, you can edit the codes to remove the unused JS files on your functions.php.files.

* so that it is after the script was enqueued.
 */
function wp_remove_scripts() {
// check if user is admin
	if (current_user_can( 'update_core' )) {
            return;
        } 
	else {
    // Check for the page you want to target
    if ( is_page( 'homepage' ) ) {
        // Remove Scripts
		wp_dequeue_style( 'jquery-ui-core' );
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );

Besides, you can use plugins to remove the non-critical JavaScript files. The best ones are-

Conclusion

Your visitors will find it frustrating when they see that your page takes much time to load. The slow page loading speed can even increase the bounce rate. For optimizing page speed, removing unused JavaScript files is one of the essential ways.

To ensure the best performance, you should aim to have as few JS files as possible on your site. Now that you know how to remove unused javascript in WordPress, start working on them right now. Indeed, you can improve your site performance as well as the user experience.

How to Remove Unused JavaScript in WordPress [Fixing Guide]