How to Reduce JavaScript Execution Time in Magento 2

Date : 05 Aug 2021 | 8 min read

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. In the lighthouse report, you can see the warning, “Reduce JavaScript execution time”. The audit fails when execution takes longer than 3.5 seconds. Your site speed will affect when JavaScripts takes a longer time to execute.
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 JS and slow down the website. It takes time for JavaScript to be loaded, interpreted, and executed. So we recommend removing the unused extensions, reduce the JavaScript load time by applying the given instructions in this blog.
Let me explain to you in detail how to reduce the JavaScript execution time in Magento 2.

2. Tools to identify this opportunity

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

3. Does website speed affect when JavaScript takes a long time to execute?

Yes, when JavaScript takes a long time to execute, some JavaScript factors that slow down your website. On the main thread, JavaScript is processed and compiled. The page cannot respond to user input when the main thread is occupied. If your page runs a lot of code before it’s needed, it will slow down your Time To Interactive, which is one of the most important metrics. If your JavaScript keeps track of a lot of references, it can quickly run out of memory. When a page uses a lot of RAM, it appears janky or slow. Memory leaks can cause your page to become fully unresponsive.

4. 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.

4.1 Minify JavaScript

Remove unnecessary code, whitespaces and reduce the Javascript file size. You can enable Minify JavaScript setting from the Magento backend.
To enable Minify JavaScriptin Magento 2 do the following setting
Magento 2 should be in production mode.
./bin/magento deploy:mode:set production
  • Go to Stores -> Configuration -> Advanced -> Developer
  • Set Minify Javascript Files option to Yes.
  • Flush Cache from System > Cache Management.

4.2 Remove unused code

Audit your site code and remove unwanted. Keeping unwanted code on sites increases the JS requests and harms load time.

4.3 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 js files.
You can reduce the use of third-party extensions if you can. Sometimes there is a possibility 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.

4.4 Use advance JS Bundling

The objective of JavaScript bundling is to reduce the number and size of JavaScript resources for each page loaded in the browser. One approach to accomplish this is to categorize by page types. You can classify Magento’s pages into a few page types, including Category, Product, CMS, Customer, Cart, and Checkout. Each page arranged into one of these page types has an alternate arrangement of RequireJS module conditions.
Enable this setting from the Magento backend.
Go to the Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line.

4.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.

5. Results achieved using the above techniques

Before Optimization

After Optimization

Aug 5th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.