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:
Below you can see the performance data before enabling native features of the merge of files in Magento 2 and after it.
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).
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.
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:
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.
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.
Haven’t you tried this powerful solution yet? So what are you waiting for?