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!
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
- Size of JS files downloaded will be reduced
Magento 2 JS bundling techniques:
1. Basic Bundling – Default Magento Bundling
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
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 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 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.
- 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).
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