Advanced V/S Magento JS Bundling — The Right Website Speed Booster
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.
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
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.
Originally published at https://www.zealousweb.com.
