Exceptional eCommerce experience can differentiate your brand from the lot. It all begins with how quick your eCommerce store loads. 3 seconds is what you’ve got to show them what they need. The first impression counts and probably matters the most.

57% of mobile customers will abandon your site if they have to wait for 3 seconds for a page to load – Google

So, it’s needless to say performance optimization should be your top most priority, especially for platforms like Magento that offers out-of-the-box features and high customizability. Though Magento provides merchants ultimate liberty to weave a personalized experience, these capabilities pose a challenge in disguise. Performance!

Among the various Magento 2 speed optimization techniques, we’ll stick to capitalizing on JavaScript bundling techniques in this blog. Read on.

Why is Magento 2 JS bundling important for achieving high page speeds?

As a platform that supports growing businesses to enterprise-grade brands, Magento is loaded with built in features backed by tens of thousands of JS files. There are hundreds of JS files that need to load per page. Avoiding unnecessary JS files from loading for each page will result in reducing the time taken to load and improves page speed.

Advantages of Magento 2 JS bundling:

  • Reduces the number of requests
  • Number of Javascript files loaded for each page will be reduced
  • Size of JS files downloaded will be reduced

Magento 2 JS bundling techniques:

1. Basic Bundling – Default Magento Bundling

Bundling is basically packaging all the JavaScript files into several bundles. The number of connections are reduced but for every request basic bundling loads all the bundles though the requested page might be dependent on only a few bundles. Hence the overall size of the JS files loaded per page request is still big.

When the dependent bundles are cached by the browser, you’ll be able to witness an improvement in page speed. As the bundles are loaded synchronously by the browser, the first-time experience for a user wouldn’t be that great. After all, it matters the most as you are looking for that competitive edge right from the first digital interaction.

2. Advanced JS Bundling

Advanced Bundling is an innovation of the Basic Bundling technique to overcome the shortcomings of the latter. Advanced Bundling combines the packages making it into a single large file and requires a page-specific approach for building bundles. Home Page, Category Page, Product Page, Carts etc., have to be optimized for JS bundling separately. A page-wise approach helps in keeping only the necessary JS files required for the page.

Hire Magento Developers for USD 35 Per Hour

Advanced Bundling also provides provisions to load the CSS files before JavaScript. This technique renders page contents faster to users. Advanced Bundling reduces the number of requests drastically, reduces the size of Javascripts loaded by sticking to just page-specific files.

Magento JS Bundling Vs Advanced JS Bundling – Which one’s better?

We’ve knocked the factors that highlight the advantages of Advanced JS Bundling over JS Bundling.

Advanced JS BundlingMagento Native JS Bundling
Issues that custom JS brings up can be skipped easily using Advanced JS Bundling techniqueNative bundling if enabled for customized Magento, issues will arise and it’ll be hard to locate
Reduces the number of page requests. Loads only page-specific JS.Reduces the number of page requests but loads all JS bundles for each request
Custom JS bundles have to be created.A built-in feature in Magento. Just enabling the option would suffice. No custom bundles required.
Tools required to configure JS – npm, node.js, or phantom.js(optional).Built using Require.js and doesn’t require any tools to configure
Improves loading speed significantlyComparatively less effective in improving page speed as the the time taken to load all the JS files is long

Here’s a glimpse of our hands-on experience that would inspire you to implement Advanced JS Bundling.

Magento 2 Performance optimization for a 45-year-old electrical supply giant in the US

The brand’s B2B2C eCommerce website operating on Magento 2 has products from 14 of its subsidiary brands hosted in a single Magento instance and two other sales channels integrated into its Magento backend. Catering to a wide customer base the enterprise-grade store holds 6500+ SKUs leading to hundreds of PLP, PDP, checkout, cart pages and content pages.

Challenges:

  • Owing to a wide range of products, numerous third-party extensions and complex customizations done, the Magento 2 store had a long list of JS files (300+ default and 400+ custom JS files).
  • JS Merging and Minification was complex due to custom JavaScript used.

Solution:

We carried out custom JS bundling techniques using npm, node.js and phantom.js for listing pages, landing pages, cart, checkout, order confirmation and content pages which resulted in improving the page speed by 50%.

Speed up your Magento 2 store

Advanced JS bundling clearly fares over default JS bundling options provided by Magento but the former requires technical knowledge to customize Javascript. If you think an Magento agency can help, reach out to us.

talk to our magento team