In this article I will show you How To Remove Unused JavaScript From WordPress, which will eventually help the site to load faster.
Things are straightforward when it comes to unnecessary JavaScript: the more unneeded code your website includes, the longer it takes for the site to load. Nobody likes to experience slow site performance and its subsequent repercussions, thus it’s critical to understand how to identify and get rid of extraneous JavaScript files from websites.
What Does “Unused JavaScript” Mean?
Unused JavaScript files are files that are not required for rendering, or for loading and showing the page’s primary content.
Types of Unused JavaScripts
1. Non-critical JavaScript is used elsewhere but is not utilized for the material at the top of the page.
2. JavaScript that has expired is no longer in use. Some portions of prior versions of the page may no longer link or may have been used just temporarily.
Find the Unused JavaScript on your site
There are several techniques for analyzing and locating the JavaScript files that need your attention.
1. Finding Unused JS via Lighthouse
An open-source, automated tool for raising the caliber of web pages is called Lighthouse. Any online page, whether one that requires authentication or is public, may be tested with it. It features audits for SEO, progressive web applications, performance, and more.
2. Finding Unused JS via GTmetrix
The GTmetrix Waterfall Chart is another resource for locating JavaScript files. After checking the performance of your URL, open the Waterfall Chart and select the JS tab. The list of unused JS that you need to manage is located there.
Remove the Unused JavaScript from your site Using Plugins
1. Asset Clean Up
Asset Cleanup prompts you with welcome messages that walk you through the plugin when you install it. Many cache plugins are compatible with Asset Cleanup, however keep in mind that activating overlapping functionality might lead to problems.
When you visit any WordPress page or post, you’ll see a new “Manage CSS & JS” button; click it to open a new page containing the enqueued files from that particular page.
On the WordPress interface, a new button To enable the “unload on this page” button, remove the unnecessary CSS. After you have clicked on and interacted with all of the page’s components, only eliminate 100% of the unneeded JS files.
2. WP Rocket
Use WP Rocket‘s Delay JavaScript Execution option to postpone the execution of JavaScript files. Go to the Delay JavaScript Execution option under the File Optimization tab and mark it. There is practically nothing further that has to be done. Your performance score and the PSI report will clearly differ once WP Rocket takes care of everything.
Remove unused Javascript in WordPress without a plugin using code
If you want to dequeue a javascript asset without using a plugin, do the following on your functions.php file:
/**
* This will Dequeue the jQuery UI script as example
*/
function wp_remove_scripts() {
// check if user is admin, therefore only logged-out users wont load the script
if (current_user_can( 'update_core' )) {
return;
}
else {
// Check for the page you want to target
if ( is_page( 'homepage' ) ) {
// This is to Remove Scripts
wp_dequeue_script( 'jquery-ui-core' );
}
}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );