How to remove unused Javascript in WordPress

Last updated on September 28, 2022 | By

A safe and modern way to address Pagespeed “Remove unused javascript” is delaying the javascript from marketing plugins and all other non-essential plugins until user interaction.

The remaining options to remove unused js are using Asset Cleanup or by removing the unused js using code.

For optimal website experience and Core Web Vitals, delay all non-essential js and dequeue(remove) unused javascript assets. For dequeuing, check the frontend of the plugins to detect all pages using it, and then dequeue from pages not using it, with Asset Cleanup plugin.

How to remove unused javascript in WordPress with a free plugin: delay non-essential plugins

Wp Meteor is a free, tested, and up-to-date plugin that lets you load javascript after user interaction. Install it on WordPress and move the bar to “Delay until first interaction”. This will delay all your Javascript till user interaction with a few essential exceptions.

image 4

If you have any issues with the delaying of assets, exclude scripts using regular expressions or keywords that match the plugin. For a complete plugins or themes execution compatibility exclusion list, click here.

On the exclusions tab, enable the “Exclude script match…” box and paste the problematic plugin keyword or the following code(quick solution):

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

image 5

To find the keyword to exclude, either use the asset name or use Chrome Dev Tools; click F12 on Chrome, click the “Network” tab, and hover over “Initiator” to see which file triggered the asset loading:

How to find unused javascript using a Chrome Dev Tools
Analytics.js was initiated by www.googletagmanager.com/gtag, we can use the gtag keyword to delay analytics.js

Place the domain keyword on Wp Meteor, enable the checkbox “exclude scripts matching …”, and save changes.

Note that not every plugin is compatible with such delays. You should never delay a script that is essential for the initial render, it will break your website. WP Meteor is not compatible with Nitropack. WP Meteor is known to have delay issues with the Elementor Offcanvas addon.

If your website has ads or menus and your userbase experience depends on it or you want to prevent any issues that may arise from using the delay javascript feature, add a javascript from its plugin to the execution compatibility exclusions and avoid errors.

E.g.: if you have a website with +40% users on mobile, you may add the menu javascript theme to the excluded javascript from delaying execution to avoid users having to click two times to get the menu to work(Your overall load time will increase).

If your website has 90%+ customers from desktop, it may be better to delay the mobile menu’s javascript.

How to remove unused Javascript with Wp Rocket: delay non-essential plugins

Wp Rocket updated its logic for delaying javascript, it now delays all javascript, including inline scripts, and has a default list of exclusions(alongside its internal JS exclusion list) that can be included if you’re having errors.

Delaying any 3rd party plugins will also fix the Pagespeed “Reduce the impact of third-party” warning.

The textbox now is for placing the javascript you want to be excluded from. Use it to place essential javascript that cannot be delayed:

Delay Javascript Execution Wp Rocket

For a complete plugins or themes execution compatibility exclusion list, click here.

The following formula can be included on WP Rocket to exclude essential Javascript to avoid errors:

(?:wp-content|wp-includes)(.*)
/jquery-?[0-9.]*(.min|.slim|.slim.min)?.js
js-(before|after)

The reason behind this formula is as follows:

  • (?:wp-content|wp-includes)(.) – excludes all internal javascript files
  • /jquery-?[0-9.](.min|.slim|.slim.min)?.js – excludes jQuery
  • js-(before|after) – exclude inline scripts. Only inline scripts that are added using wp_add_inline_script() will be excluded.

If you haven’t bought Wp Rocket yet, consider using my reflink.

How to remove unused Javascript by dequeuing with Asset Cleanup (not delay)

After installing Asset Cleanup, you’re prompted with welcome messages guiding you through the plugin. Asset Cleanup is compatible with many cache plugins, but avoid enabling overlapping features which may cause issues.

Some advanced options such as removing Inline JavaScript Files are only available on Asset Cleanup Pro.

Go to any WordPress page or post and you notice a new button “Manage CSS & JS”, click on it and a new page opens with the enqueued files from that specific page.

image 5
New button on the WordPress interface

Remove the unused CSS 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 your unwanted 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”.

How to remove unused Javascript in WordPress without plugin using code

If you want to dequeue a javascript asset without using a plugin, do the following on your functions.php file:

/**
 * 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 );
⚠️ Be careful placing code on functions.php or in the Insert Head and Footer plugin, it can brick your website. Always backup your site before any changes.

Can I use Asset Cleanup and Wp Rocket?

Asset Cleanup and Wp Rocket are compatible, but avoid enabling overlapping functionalities from both to not cause issues.

How to remove unused CSS in WordPress

Check our article on How to remove or reduce unused CSS in WordPress.

Can I remove unused Javascript in WordPress with Autoptimize?

As of 2022, Autoptimize does not offer the option to remove unused Javascript. Install Wp Meteor and our guide above to remove unused Javascript. Wp Meteor and Autoptimize are compatible and can be used together.

How to remove unused javascript google tag manager/Facebook?

Use our guide to find the keywords to delay the plugin Javascript. It could be fbevents.js, gtag, gtm.js, or use the domain keyword.

Get your Javascript optimized safely and your pages tested