How to Reduce JavaScript Execution Time in Magento 2

1. Overview

JavaScript execution time refers to the time spent executing, evaluating, and parsing each JavaScript file that your page loads.it is all about unused JavaScript, that are not in use or that are unwanted for your site and block the site speed.
Magento 2 has a lot of JavaScript files, to load the home page almost 200 scripts load. The use of more third-party extensions to your Magento site means allowing a lot of JavaScript and slows down the website. It takes time for JavaScript to be loaded, interpreted, and executed. So we recommended removing the unused extensions, reducing the JavaScript load time by applying the given instructions in this blog.
Below is the overview of how to reduce the JavaScript execution time in Magento.

2. How to Identify ‘Reduce Unused JavaScript’ ?

There are some popular tools you can use to identify the JavaScript execution time. One of the recommended tools is Google PageSpeed Insights.

3. How to reduce JavaScript Execution time?

As per Magento standard JavaScript execution time should be less than 2 seconds. Once you reduce the JavaScript execution time it will improve your site’s Total Blocking Time (TBT) score.
Use the below steps to reduce the JavaScript execution time.

3.1 Minify JavaScript And Merge JavaScript

Remove unnecessary code, whitespaces and reduce the JavaScript file size. You can enable Minify JavaScript settings from the Magento backend.

Configuration Minify JavaScript

To enable minify JavaScript in Magento 2 do the following setting:
i) Magento 2 into production mode
/bin/Magento deploy:mode:set production
ii) Go to Stores -> Configuration -> Advanced -> Developer
iii) Set Minify Javascript Files option -> Yes
iv) Flush Cache from System > Cache Management

Configuration Merge Javascript

To enable merge javascript in magento 2 do the following setting:
i) Magento 2 into production mode
/bin/magento deploy:mode:set production
ii) Go to stores -> configuration -> advanced -> developer
iii) Set merge javascript files option to yes
iv) Flush cache from system > cache management

3.2 Move JavaScript from Header to Bottom in Magento 2

Magento 2 Javascript extension allows you to enable deferred Javascript loading and move JavaScript code from the head to bottom automatically, that way you increase the website loading speed and eliminate render-blocking.
So basically Javascript< script > tags just before the closing < /body > Tag or in the section of your HTML. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.

Configuration for Move JavaScript from Header to Bottom

i) Magento 2 into production mode
/bin/magento deploy:mode:set production
ii) Go to Stores > Configuration > Advanced > Developer
iii) Set move JavaScript code to the bottom of the page option to yes
iv) Flush cache from system > Cache Management

3.3 Advanced Javascript Bundling in Magento 2 ?

What Is Javascript Bundling?

JavaScript bundling is an optimization Process, hits impact on reducing the number of server requests for JavaScript files. Bundling this by merging multiple JavaScript files together into one file to reduce the number of page requests.

Javascript Module Bundling

We have a module for bundling in Magento Amasty_Extension.

Configuration for Amasty bundling

i) Backend > Stores > Configuration > Advanced > Developer > Javascript settings
  • Merge Javascript file : No
  • Enable JavaScript bundling: Yes
  • Minify JavaScript files : No
  • Move JavaScript code to bottom : Yes
ii) Backend > Store > Configuration > Amasty extension > Google Page Speed Optimizer > Settings > Javascript Setting
  • Amasty JavaScript optimization: Enable
  • Is Magento Cloud: No
  • Run optimization option and follow all steps
  • Click on the save config button
iii) From CLI
  • Set store mode as production
  • Run full deployment
  • Clear all cache and set all permissions

3.4 Enable Javascript Bundling Commands

Javascript bundling does not work unless your Magento store is in production mode, once in production mode, javascript bundling can only be enabled using the command lines.
1. Switch to Production mode
$bin/magento deploy:mode:set production
2. To enable Magento’s built-in bundling from the command line
$ php -f bin/magento config: set dev/js/enable_js_bundling 1
3. To optimize bundling by minifying Javascript files:
$bin/magento config:set dev/js/minify_files 1
4. Enable Cache busting on static file URLs.this ensures users get the latest version of the assets anytime they update:
$bin/magento config:set dev/static/sign 1
5. To enable Magento’s built-in merging from the command line
$ php -f bin/magento config:set dev/js/merge_files 1

3.5 Use CDN

Use CDN(Content Delivery Network) to speed up the content delivery to your user. CDN supports delivering all the static web content like CSS, Javascript, images, fonts, etc. When a Visitor in a particular location (e.g US) makes the first request for static content on your website. Then the asset is retrieved from your actual server when it is being delivered, and the assets get cached on the CDN’s US server, the nearest CDN based on visitors’ location. When next time visitors request the same content on your website, the request goes to the nearest CDN edge server to check if the asset is already in cache. If the request is already cached by the same edge server then the visitor will receive a response from the server. This helps in improving the load time.

4. Minimize the Third-Party Extensions

The third-party extension you use for your store could be causing your page speed to slow down. The use of many third-party modules means more load of unwanted JavaScript files. you can reduce the use of third-party extensions if you can. Sometimes there is a possibility that many modules are unnecessary. They introduce extra processing with a negative impact on performance and speed. You can uninstall the extensions which are not in use. It will help to minimize the load of resources and improve site speed. find a list of the extensions that were used. Remove all extensions except the core Magento extensions and run a performance test to identify the slow plugins

5. Our Results

Before Optimization

After Optimization

6. Conclusion

I hope this article will help you to reduce javascript execution time in Magento 2. However, the practical tricks offered here should help you observe improvements in your web page load time. To Optimize your website, Contact us.