Magento 2 Javascript Merge and require.js. What is the Harm for the Performance?

Merge of JavaScript and do not work in a proper way in Magento 2. In fact, most of the files that are loaded by require.js are not merged. Is there a solution to solve this problem? Let’s figure it out.

Challenge One. The negative influence of “Merge of JavaScript” on Magento 2 stores’ performance

There is quite a common opinion about the positive influence of enabling native Magento 2 features of JS/CSS files optimization. However, it is not the truth as this feature does not work as expected.

You can empower Merge of files following the way:

Stores > Configuration > Advanced > Developer > Javascript Settings

Below you can see the performance data before enabling native features of the merge of files in Magento 2 and after it. 

merge files in Magento 2

This page literally includes 167 requests from the browser to a server. As you can see, 144 of 167 files are Javascript files. Then we enable Merge of Javascript files and check it once again.

Merge of Javascript

What do we have now? 165 requests and only 3 files of 144 were merged. This is the actual result. The expected result was 24 requests (167-144+1).

The truth is: the native feature of the Javascript merge does not merge all JS files. It merges only those JS files that are declared on the HTML page. It means that the files that are loaded by require.js are not merged.

Enable JavaScript Bundling is another unclear option in Magento 2. It works in the following way: all scripts of a module are taken and merged into a single script. When you enable this option – the whole Javascript content will be loaded regardless of whether it is used on the page or not. But unfortunately, the page size will increase which is not good for store performance. 

Enabling Javascript

Challenge Two. The work of require.js in Magento 2

The option related to require.js. looks not so clear as well. Let’s have a look closer. 

This is how a principle of loading a script by require.Js looks like, where:

  • A green circle is a script.
  • Yellow circles are 3 more libraries that it may require.
  • Blue circles represent 3 more libraries that the third library requires.
  • Grey squares are 3 HTML templates that the first blue circle requires.

data about dependencies

The data about these dependencies are stored in the script file together with its content. In order to control whether the script requires other resources, require.js should download the script and check up its content. It justifies why requires.js works in the following way:

“I need file A, so I am going to download it. When it is done, I am starting to execute it. But! It requires B and C files. I am also downloading these files and executing them. The file B requires files D, E and G. Finally, everything is done and I can start executing all the scripts.”

In the case of Magento 2, this queue may include 8-10 cycles. Additionally, a browser should download the require.js file itself with its settings on the cycle.

With HTTP/2 – all these network protocol’s benefits are leveled by require.js logic. If you do not have HTTP/2 – you face one more challenge of browser limit for simultaneous connections. In a real store, it looks like this: 

Require.js

On this screenshot, you may see a limit of 6 simultaneous connections that is resulted by HTTP protocol limitation. There will not be such a limitation when HTTP/2 is applied, but groups will remain because of require.js logic.

The Solution

What can be done in such cases?

There are 144 scripts on a home page, 156 scripts on the category page and 166 ones on the product page that Magento 2 proposes by default. And a real store that involves numerous 3rd-party modules will make the challenge even more serious.

Luckily, there is a real solution, crafted by the Aitoc team, known as the Google Page Speed Optimization for Magento 2. The tool is able to solve all the problems with JS and CSS files optimization painlessly and in the most efficient way. It effectively eliminates dependencies in require.js, that’s why a browser downloads all JS files in a single request. 

Besides JavaScript files, the robust Google Page Speed Optimization tool supports merging and minification functionality for stylesheets, inline small CSS and provides Defer parsing of CSS as well.

Haven’t you tried this powerful solution yet? So what are you waiting for?