How to Reduce JavaScript Execution Time in Magento 2

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.

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

• Google PageSpeed Insights(PSI)
• GTMetrix
• Pingdom
• WebPageTest

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.

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

i) Magento 2 into production mode

ii) Go to Stores -> Configuration -> Advanced -> Developer

iii) Set Minify Javascript Files option -> Yes

iv) Flush Cache from System > Cache Management

i) Magento 2 into production mode

ii) Go to stores -> configuration -> advanced -> developer

iii) Set merge javascript files option to yes

iv) Flush cache from system > cache management

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.

i) Magento 2 into production mode

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

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.

We have a module for bundling in Magento Amasty_Extension.

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

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

2. To enable Magento’s built-in bundling from the command line

3. To optimize bundling by minifying Javascript files:

4. Enable Cache busting on static file URLs.this ensures users get the latest version of the assets anytime they update:

5. To enable Magento’s built-in merging from the command line

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.

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

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.