Removing redundant JS will help to improve First Content Paint and Largest Contentful Paint Web Vitals metrics. It will speed up page rending on mobile and desktop platforms.
On an average page Magento 2 doesn’t use more than 30% of loaded script files:
Below red lines are what’s being ignored:
I’ll show you how I managed to get rid of unused Javascript on a sample Magento 2.4.7 website. We will use Google chrome coverage tab and manually swap JS files.
Let’s get started.
1. Using Coverage Tab to Remove Code Junk
Firstly, we need to identify what code blocks are not being used on a particular page.
Google Chrome Coverage Tab will help us:
The red bar shows redundant code. We just need to remove them from the original file, for example jquery.js.
This is a tedious task. Make sure you don’t miss something otherwise it wouldn’t work.
Next step we need to make Magento use our custom JavaScript file instead of the default one.
2. Replace Magento 2 Library JavaScript File With The Custom One
For example, let’s rewrite jquery.js.
We will use requirejs-config paths setting.
Inside a custom module Vendor_Module create a file app/code/Vendor/Module/view/frontend/requirejs-config.js:
var config = {
paths: {
‘jquery’: ‘ Vendor_Module/js/jquery’
}
}Place custom jquery.js in app/code/Vendor/Module/view/frontend/web/js folder.
Copy the library jquery folder in your custom module as well.
cp -r lib/web/jquery app/code/Vendor/Module/view/frontend/web/js
Then recompile:
php bin/magento deploy:mode:set production
And see Magento use your file:
Repeat this step for any other default JavaScript file you overwrite.
3. Disable Javascript Bundling
Magento 2 has a built-in function - Javascript bundling.
It bundles all JS files together to lower the number of web requests a browser makes.
It’s supposed to improve performance but it introduces lots of redundant code to load and process.
I’d advise to keep this setting off.
You can access it at Stores > Configuration > Advanced > Developer > Javascript Settings. Make sure you are in the developer mode first:
php bin/magento deploy:mode:set developer
Or you can simply disable it by running the following CLI command:
php bin/magento config:set dev/js/enable_js_bundling 0
Recompile afterwards:
php bin/magento deploy:mode:set production
4. Reduce the Number of 3rd-party Resources
You can have many external service scripts on your Magento 2 store: tracking, virtual chats, AI agents etc.
They all load their Javascript library files.
Here is an example of 3rd-party resources loaded on a Magento site.
We see that almost 50% of code isn’t used. Having that much redundant code negatively affects website speed and start render time.
See if you can reduce the number of external scripts you put on your pages. Try alternatives, maybe their libraries are optimized better.
Find this article useful? Share it on LinkedIn with your professional network, spread the knowledge!
If you find this post interesting do not hesitate to sign up for our newsletter and join the 1007 people who receive Magento news, tips and tricks regularly.
Thank You!
