How to reduce & remove unused Javascript in Wordpress

pattern 25

Pagespeed flags a page with “Reduce unused javascript” if it has a Javascript file with more than 20kb of unused code. It’s a recommendation to make pages render faster and also to avoid serving wasteful code for mobile users who don’t have unlimited data plans.

You should load the flagged Javascript file deferred(defer HTML attribute) and with low priority(fetchpriority HTML attribute), or remove it from loading, to address it. In most cases, you should defer and load with low priority the JS from marketing plugins and all other non-essential plugins.

What defines the plugin you will use is if you want to remove it from loading completely or just load with low priority. Another factor is that speed caching plugins offer a different number of optimization features. Choose one that addresses Core Web Vitals, not just Pagespeed.

You could use techniques such as delaying javascript until user interaction and others, but this would only fool Pagessped and the issue, as it defeats one of the purposes of this recommendation, which is to not serve unused code to users, especially 3G who may have limited plan data.

The Delay javascript feature was specifically created to trick Pagespeed.

Reduce or remove unused Javascript with Perfmatters

Perfmatters offers defer and fetchpriority features. Load the Javascript with defer and fetchpriority=”low” attributes to address Pagespeed flagging.

You can also remove unused Javascript from loading. Check in the frontend admin page of the plugins to detect all pages using it, and then remove it from loading on all pages not using it with Perfmatters.

Perfmatters offers many features alongside removing unused JS. To use it, Install Perfmatters, go to “Assets”, enable the Script Manager, and click on the “Perfmatters” button at the top of each page to remove unused JS or CSS.

Perfmatters 20% OFF Coupon: WPALPHA

image 2
Perfmatters Remove Unused JS interface

Reduce or remove unused javascript with Wp Rocket

Wp Rocket offers only the defer JS feature.

image 2

Reduce or remove unused Javascript with Asset Cleanup

To reduce unused Javascript, you can remove it from loading. Check in the frontend admin page of the plugins to detect all pages using it, and then remove it from loading on all pages not using it with Asset Cleanup.

After installing Asset Cleanup, enable the option to load Asset Cleanup’s dashboard. Go to Wordpress pages or posts and you will notice a new button “Manage CSS & JS” in each one. Click on it and a new page opens with the enqueued files from that specific page.

Remove the unused JS enabling the “unload on this page” button. Only remove 100% unused JS files, after clicking and interacting with all elements on the page.

image 2

To better assist you with removing unused CSS or JS, change the Assets List Layout to “grouped by size”, which will list assets by size. Test any combination of removed assets using “Test Mode”.

Reduce or remove unused Javascript with code (Advanced)

If you want to dequeue(remove from loading) a javascript asset without using a plugin, use the following code snippet on functions.php:

/**
 * We 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' ) ) {
        // Remove Scripts
		wp_dequeue_script( 'jquery-ui-core' );
        wp_deregister_script( 'jquery-ui-core' );
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );

How to reduce/remove unused Javascript in Wordpress with Autoptimize

Use any of the guides above, as all plugins/solutions above are compatible with Autoptimize.

Get your Wordpress unused Javascript optimized and your pages faster!

🚀Boost your website Speed & Performance

*No spams

guest

0 Comments
Inline Feedbacks
View all comments