Pagespeed flags a page with Remove unused javascript if it has a Javascript file with more than 20kb of unused code. To address it, you can either delay, defer, or remove the JS causing it from loading. In most cases, you should delay the JS from marketing plugins and all other non-essential plugins until user interaction.
The main difference between delay and defer is that with delay, you download the minimal code initially, rendering the page visually quickly. As the user starts interacting with the page, the delayed JS does run.
What defines the plugin/solution you will use, is if the plugin’s javascript you want to fix offers support for delaying, or if you want to remove it from loading completely. Not every plugin is compatible with these techniques.
Another factor is that speed caching plugins offer a different number of optimization features. Choose one that addresses Core Web Vitals, not just Pagespeed.
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.
Example: 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(overall load time will increase). If +90% of customers are from desktop, it may be better to delay the mobile menu’s JS.
How to Delay Unused javascript with Wp Meteor
Wp Meteor lets you load JavaScript after user interaction. Install and move the bar to either “Delay until first interaction” or “1/2 seconds”. The first will delay all Javascript till user interaction with a few essential exceptions, and the latter with a timeout equivalent.
If you have any issues with the delaying of assets, exclude scripts using regular expressions or keywords that match the plugin that are having errors. For a full list with plugins or themes execution compatibility exclusion, click here.
On the Exclusions tab, enable the “Exclude script match…” checkbox 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)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:
Place the domain keyword on Wp Meteor, enable the checkbox “exclude scripts matching …”, and save changes.
How to Delay or Defer Unused javascript with Wp Rocket
Wp Rocket offers both delay and defer. Use defer with plugins that can’t be delayed(breaks functionality) and are non-essential. Use delay for non-essential plugins.
The Delay JS feature delays all javascript, including inline scripts. It has an automatic JS exclusion list and an optional list of exclusions that can be included if you’re having errors. It also lists the active installed scripts retrieved on your website, which you can exclude from delaying:
There is also a textbox for placing the javascript you want to be excluded from. Use it to place essential javascript that cannot be delayed.
How to remove unused Javascript from loading w/ Asset Cleanup or Perfmatters
To remove an 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 Asset Cleanup or Perfmatters.
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.
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”.
Use Perfmatters as an Asset Cleanup alternative. It offers many other Core Web Vitals features. 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
How to remove unused Javascript from loading in the main thread (Advanced)
You can run third-party scripts on web workers with Partytown, or Zaraz(Cloudflare Edge). They are improving support for more APIs, making it able to run not just pageviews triggers from analytics tools, but much more popular analytic metrics.
This technique is one of the ways to improve INP(interaction to next paint) in Wordpress, an upcoming Core Web Vitals metric.
How to remove unused Javascript from loading with code (Advanced)
If you want to dequeue a javascript asset without using a plugin, do the following on the 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 );
Can I 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!
