close

Somewhere, in a parallel universe,
the-other-you just clicked on
"Subscribe To Our Monthly Newsletter"

The-other-you seems eager to stay updated with the technological changes.

Please enter your name.
Please enter your email. Please enter your email.

Advanced V/S Magento JS Bundling – The Right Website Speed Booster

Post by|Magento20 October,2020
231 View

eCommerce website development is a complex task, for it requires us to keep multiple parameters in check. The majority of our worries are to keep the UI user-friendly to achieve the optimum user experience and website speed.

In fact, in an eStore, website speed can be a make or break situation that can impact its bounce rate and the SERPs’ rank.

According to a survey, 64% of the dissatisfied shoppers will choose a different eStore to complete their purchase. And if your eStore takes more than 4 seconds to load, 25% of your total visitors will navigate away, never to return.

Image Source

Now, we can include a few checkpoints to ensure that our website performance doesn’t lag.

1. Add Expires Headers
2. Compression
3. Optimize image
4. Leverage Browsing
5. Minify JS/CSS
6. Merge JS/CSS
7. Bundling JS

So, as Magento developers, may use a plethora of simple techniques to boost our website speed. But there is one robust technique that we might overlook while considering website speed, Bundling JS.

In fact, it is a shocking truth that most Magento-based websites do not implement the default bundling JS option. While there are several reasons why we don’t use Bundling JS, there is a perfectly viable option that replaces this technique effectively, Advanced JS Bundling.

An alternate option for Bundling JS to perform is the Advanced Bundling JS option, which is also a part of Magento, but it is somewhat different from default Bundling JS. To know about Advanced Bundling JS, we will understand its meaning and tools required to use Advanced Bundling in Magento. We will understand both the options for bundling as per the Magento Standards, and we conclude to choose with the best option from the two of them.

Magento 2 JS Bundling

Magento 2 JS Bundling mechanism works to combine all the javascript bundles into some few javascript bundles and loaded for all the pages. Page rendering is blocked until the browser downloads all the bundles synchronously. Each bundle should be at least 100KB as per the Magento Standard.

To make it easier to use, you can also exclude the specific file that could not be processed in bundling using etc/view.xml.

Here is an example to understand this technique.

In etc/view.xml file for your theme you can exclude specific file as below:

<exclude>

<item type="file">Lib::mage/loader_old.js</item>

<item type="file">Lib::mage/webapi.js</item>

<item type="file">Lib::mage/zoom.js</item>

<item type="file">Lib::mage/translate-inline-vde.js</item>

<item type="file">Lib::mage/requirejs/mixins.js</item>

</exclude>

In this way, we can exclude some scripts from the bundle but can’t decide to load only page-specific bundles and this is the reason why it takes time to load the mini-cart data or other checkout related data after finishing the page load.

It also somewhat affects increasing the bundle’s file size while enabling Minifying/Merging JS in the backend. When we allow the Minify JS option in the backend, it turns out the file (bundle0.min.js) is 8 MB.

Well, most of the user says that it is better to Turn OFF for the Magento JS Bundling in the backend as well as Minifying/Merging as it increases the file size of the bundle and uses the alternate option for bundling is Advanced JS Bundling. In logical terms, it is somewhat right why we load unnecessary all the JS, which are mostly not required for specific pages.

Effects To Look-Out For During Magento JS Bundling

  • Slow down rendering
  • Slow Connections
  • Large connection Thresholds
  • Limited networks.

Advanced Bundling JS

Advanced Bundling combines all the packages and serves into one box. It boosts speed performance and reduces server requests and bundle size for each page loaded in the browser.

To use Advanced Bundling JS, we have to build bundles for each page, especially those necessary, like the Home page, Category Page, Product Page, Cart, and Checkout Page.

This way, you can benefit while requesting fewer page JS that are page-specific and are necessary. Using this, we can also load CSS files before the JS files and show the page’s full content faster. Users will feel the website more quickly without endless spinning wheel waiting time while browsing the site.

The mechanism of Advanced JS Bundling is excellent and very efficient as it helps to reduce the bites and bytes as your browser is only requesting files that are needed. It also helps to improve its modularity and extensibility. Magento Bundling is not a bad thing. Advanced JS Bundling is faster and provides various options compared to Magento bundling.

While using Advanced JS bundling, don’t rely on the Google Page speed score. Just experience the page load and feel the difference before use and after use of Advanced JS Bundling.

Effects To Look-Out For During Advanced JS Bundling

  • Increase the First Paint Score of the page.
  • Minimize Page load time.
  • Request fewer JS for page-specific
  • Increase page rendering and network connection fast.

Additional Note For Advanced Bundling JS

  • npm version > 6
  • node.js version > 8
  • Phantom.js (optional)
  • Make sure the website is in developer mode
  • Make sure Turn off the Merging/Minifying JS option from the backend

Comparison Between Advanced JS Bundling And Native Magento JS Bundling

Advanced JS Bundling Magento Native JS Bundling
It reduces page requests’ connection, but for each page request, it only loads page-specific bundles that define for each page. It reduces the number of page requests, but for each page request, it loads all bundles.
This is one of the Magento concepts, but it is necessary to create bundles for the JS custom as per the requirement. This is also one of the Magento concepts, and it is a default built-in feature. So no need to create any bundle custom.
Require some tools to configure, like npm, node.js, or phantom.js(optional). It is a built-in feature and is made of require.js
It is a flexible method as it only requests the files that are needed at page load. It is not as much flexibility. When the page loads, the browser doesn’t know about the js’ request and its requests.
It improves the customer experience considerably on the site. Much faster. It is not that much faster as compared to Advanced JS Bundling.

Final Take Away

Advanced Bundling is the recommended process by Magento to apply solutions manually or use an extension giving this feature. If you are not so technical but want to use this feature, you can use any paid or free extension available in the market as this is an excellent thing to apply on any website and remove the complexity of the page speed. In case you face any trouble during the task or find it too tedious, then you can always rely on a friend, ZealousWeb, to help you out with your Magento Development.

FAQ

Is it necessary to have the website in developer mode while configuring Advanced Bundling?

Yes, it is better to set a website in developer mode than to put in production while working on Advanced JS Bundling.

Is it compulsory to use the Advanced JS Bundling option?

It is not compulsory, but it is recommended to use it if you do not want to lose your visitor on-site while they see spinning wheels all the time.

Do we need to enable the Merging/Minifying JS option in the backend?

No, you don’t need to enable that option from the backend. Turn it off.


Speak Your Mind

Please enter your comment.
Please enter your name.