Magento 2 Speed Optimization and Advanced Js Bundling

Magento 2 Speed Optimization and Advanced Js Bundling

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 topmost priority, especially for platforms like Magento that offer box features and high customizability. Though Magento provides merchants the 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:

1. Reduces the number of requests
2. The number of Javascript files loaded for each page will be reduced
3. The 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 is reduced but for every request, basic bundling loads all the bundles through 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.

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 Bundling	Magento Native JS Bundling
Issues that custom JS brings up can be skipped easily using the Advanced JS Bundling technique	Native 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 significantly	Comparatively less effective in improving page speed as the time taken to load all the JS files is long

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 were 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 a Magento agency can help, reach out to us.