Welcome to PotatoCommerce - Top Quality Magento Extensions Store

Home > Blog > Why “Merge of JavaScript” in Magento 2 is bad.

Why “Merge of JavaScript” and Require.JS are not good for Magento 2 performance

Posted on 26 January 2018

Why “Merge of JavaScript” in Magento 2 is BAD for performance

Most articles about Magento 2 performance optimization say that enabling native Magento 2 feature of JS/CSS files optimization will do the trick. The thing is, it’s wrong - this feature does not work as expected.

Merge of files can be enabled at Stores > Configuration > Advanced > Developer > Javascript Settings

These screenshots display performance data before and after enabling native feature of merge of files in Magento 2.

Magento 2 performance without merge of javascript files

Merge of Javascript disabled

As you can see, this page has 167 requests from browser to a server. 144 of 167 files are Javascript files.

Now let’s enable Merge of Javascript files and check again.

Magento 2 performance with native merge of javascript files

Merge of Javascript enabled

Actual result: 165 requests, i.e. only 3 files of 144 were merged.
Expected result: 24 requests (167-144+1=24).

The problem is that native feature of Javascript merge does not merge all js files, but only those JS files which are declared on the HTML page. Files which are loaded by require.js are not merged.

There is another useless option in Magento 2 - Enable JavaScript Bundling. How does it work? Well, it takes all scripts of a module and merge them into a single script. If you enable this feature, a page will load the whole javascript content regardless of whether it is used on the page or not. As a result, page size increases - bad news for store performance. You can learn more in this Inchoo blog post.

Magento 2 performance javascript optimization

Magento Javascript and CSS optimization

How does require.js work in Magento 2?

Now let’s see what is wrong with require.js. This is a scheme of loading a script by require.js.

Magento 2 - how does require.js work

How does require.js work in Magento 2?

The green circle is our script. For example, it requires 3 more libraries (yellow circles), the third library requires 3 more libraries (blue circles), and the first blue circle requires 3 HTML templates (grey squares).

Information about such dependencies is stored in the script file along with its content. To check whether script requires any other resources, require.js should download the script and analyze its content.

That is why requires.js works this way: “I need file A, I am starting to download it, done… starting to execute it… stop, it requires B and C files.. Okay, downloading these files as well, executing it… damn, the B file requires D, E and G files… Good, now everything is ready and I can finally start executing all the scripts.”

As for Magento 2 platform, such queue can have 8-10 cycles. Moreover, a browser should also download require.js file itself with its settings on the 0th cycle.

If you have HTTP/2, then all advantages of this network protocol are leveled by require.js logic. If you don’t have HTTP/2, then you have an additional problem of browser limit for simultaneous connections.

So, it looks this way on a live store:

Network waterfall Magento 2

Network waterfall (without HTTP/2)

This page (screenshot above) has a limit of 6 simultaneous connections which is caused by HTTP protocol limitation. If HTTP/2 is used, then there would not be such a limitation, but ‘groups’ will remain because of require.js logic.

So, what can we do?

By default, Magento 2 platform has 144 scripts on a home page (+10 HTML files), 156 scripts on category page and 166 scripts on product page. Surely, a real store with a bunch of 3rd-party modules will make the problem even more difficult.

The good news is, PotatoCommerce has developed Performance Optimization Tool for Magento 2 which solves all the problems with JS and CSS files optimization. The solution eliminates dependencies in require.js in a smart way, so a browser download all Javascript files in a single request. Along with this, Performance Optimization Tool can minify JS, CSS and HTML, has lazy load feature, an unique feature of image files merge, defer parsing of Javascript, and an ability to control optimization of any file if necessary.