10/8/2020 - #extensions
by: Anthony Grutter

Web performance is a focal point in e-commerce. It influences your position in SEO, your cost-per-click for the paid ads but also the customer experience and therefore your conversion rate.

A lot of aspects should be taken into account to increase the response times. Advanced JS Bundling is a concept to increase the loading speed of JavaScript files.

 

The JavaScript with Magento 2

 

Before going into too much details, here is a reminder of what exists in Magento 2.

 

RequireJs : asynchronous management of loading 

 

RequireJS is a Javascript library which allows the management of JavaScript files in an asynchronous manner. Only the needed files that are declared in dependencies in every piece of code are loaded.

 

<script>   require.config({             deps: [                 'jquery',                 'mage/translate',                 'jquery/jquery-storageapi'             ], </script>




Minification : page weight reduction

 

Magento's static files can be minified during the deployment process. The comments and spaces will be deleted from the code in order to reduce the weight of the page.

 

<script  type="text/javascript"  src=".../merged/526464e25b61833c4c2474dff007d8e3.min.js"></script>

 

Merging : reduce the number of loaded resources

 

The merging option can gather files of the same type into a single file and consequently reduce the number of calls performed to retrieve resources. Files loaded by RequireJS are not included in this merge because they are loaded after depending on the need of the page.

 

<script  type="text/javascript"  src=".../merged/526464e25b61833c4c2474dff007d8e3.min.js"></script>



Bundling JS : reduce the number of server calls

 

The necessary files required by RequireJS are gathered and preloaded through files bundlesX.js.  They are loaded in the cache and the page will not need to download them  when it needs them. The execution of the page is  therefore faster because we are not waiting for every little download of dependencies reliant on the quality of your  internet connexion.



<script  type="text/javascript"  src=".../fr_FR/js/bundle/bundle0.min.js"></script>

<script  type="text/javascript"  src="... /fr_FR/js/bundle/bundle1.min.js"></script>



The Bundling JS problematic

Does JS Bundling improve performance?



Even if the Bundling JS option can prove itself valuable at first sight, using it out of the box can have detrimental effects over the performance of your site if you are not careful.

The weak point of Bundling Js by Magento is that it generates bundle files which hold the entirety of the JavaScript files and modules that we can find in pub/static/frontend/myTheme. In other words every enabled Magento’s modules and files from the theme are included within the bundles files. These files are named bundles.js and contain JS files that are only used on the Checkout or worse, files that are specifically for the admin or even no page at all.



 

In this example we can see the TinyMCE library (used for the WYSIWYG editor) preloaded on our homepage. By multiplying the packaging of useless files we increase the weight of the page. The gain won by reducing the number of calls will quickly be erased by the overload of the excessive downloaded bytes.



Comparative of perks with and without native Bundling JS from Magento

 

Without Bundling JS

 

  • Reduce to the minimum the transferred bytes and only download the mandatory resources

  • Don’t delay the first rendering of the page.

  • Bad use of the network due to a cascading load of resources. Slow connection will be very impacted because the connections to the servers will be multiplied (around 200 separate JS files = 200 server connections).

 

With native Bundling JS from Magento

 

  • Reduce the number of HTTP requests. Saving on connection time to the server.

  • Increase the number of downloaded and interpreted bytes (useless loading).

  • Delay the first rendering of the page because of the download of bundle JS files

 

Bundling JS advanced configuration : the official method

 

The observation is simple : reducing the number of calls is a good lead of optimization but it shouldn’t be done to the detriment of the weight of the page because the user experience will be damaged.

 

The official Magento documentation about this subject:

https://devdocs.magento.com/guides/v2.4/performance-best-practices/advanced-js-bundling.html

 

It explains how to proceed to gather the files by page types. The goal is to create generics bundles to load on every page and others for specific pages (checkout, product page, etc).

 

The process is long and many mistakes can be done because you must generate a JSON to declare JS files depending on the calls that you can see in your browser. A quick read of the documentation will show you how fastidious it is by needing to merge JSON files by hand, the use of sed commands, installation of JS libraries to simulate browsing and save the passing resources… All of this without taking into account the maintainability of the generated file.

 

Although there are tools suggested by the community to ease the process (https://github.com/magento/baler), the process is close to what Magento explains in its documentation and feels insufficient. Therefore we have developed the Advanced JS Bundling in order to make this task faster and easier to maintain.

 

The method suggested by Blackbird

 

In order to easily dispatch the module by sections of the site we made simple configuration fields that are available in the back office.

 

It’s enough to list in these fields the name of the module or the name of the file that we want to be removed from the general bundle file and put it in another bundle.

 

It’s also possible to list modules and files that we don’t want to load at all with the bundles. These files will still be loaded by RequireJS only if they are needed.

 

 

During the generation of bundle files using the command “bin/magento setup:static-content:deploy” new files will be generated (only works in Production mode).

 

These specific bundle files will only be loaded on routes that you also specified in the configuration.

 

To easily spot the files that you need to exclude or make them bundle specific you can:

 

  1. Observe the folders within your theme: pub/static/frontend/theme/fr_FR/

 

  1. Inspect the content of bundle files from the tab Network / Preview of Google Chrome in order to have a detailed view and choose which are the biggest files to target..

 

Default configurations are provided with the module Advanced JS Bundling par Blackbird to ease its implementation.


If you can it’s always preferable to disable an unnecessary module that is never used on the site (depending on its dependencies): bin/magento module:disable Amazon_Login.

Write your comment

Ready
for take-off?

Blackbird is a web agency specialized in the development of eCommerce websites. We are Magento Experts and we offer our services and advice for e-marketing, strategy, branding, deployment and methodology.

Contact
+339 50 66 21 38


Legal terms
Agency 30, Avenue du Rhin
67100 Strasbourg
France
SEE MAP
FR - EN