Magento 2 Performance Optimization With JS Bundling

Why performance optimization is vital

Performance optimization is among the top critical factors defining the success of an online business. 57% of visitors abandon pages that load longer than 3 seconds and nearly 80% of users avoid pages they have had a poor experience with. This means that merchants’ livelihood literally depends on seconds and milliseconds of page load time!

PWA is still the preferred option, but…

Magento is one of the dominant eCommerce platforms as of now, yet it is not immune to page performance challenges. A general agreement across the industry is that a well-optimized PWA implementation can solve many of the pain points incurred by the default Magento technology stack. To exemplify, ScandiPWA frontend, when set up correctly, allows to reduce page load time to just 20ms, all while offering flexible mobile-first UX and next-generation data exchange protocols, by a wide margin superior to those used in stock Magento.

But what if, for whatever reason, migration is not an option? Are there viable alternatives to PWA that allow to speed up Magento 2?

As a development agency with a strong focus on Magento, we are consistently in touch with online businesses globally, staying in tune with the latest eCommerce trends. And [disclaimer] we can conclude that upgrading your Magento 2 frontend to PWA makes the most difference and brings the more holistic and sustainable results showing improvements across UX, performance, SEO, user engagement, and beyond.

There are, however, ways to selectively affect various aspects of a Magento 2 website, if needed. Thus, when it comes to improving performance, we’ve had good results with advanced  JavaScript bundling.
A specific tool we have used and had success with, is MagePack advanced JavaScript bundler. The package is well-documented, making the implementation fairly straightforward. On average, our team was able to fit both implementation and QA in roughly 20 dev hours.

About advanced bundling with MagePack

For each page loaded in the browser, JavaScript bundling aims to decrease the number and size of the requested assets. MagePack does this by building the bundles in a way that each page in your store only needs to download a common bundle and a page-specific bundle for each page accessed.

How it works

A common way to achieve this is by defining bundles by page type. For example, some of Magento’s page categories may include the following: 

• Category
• Product
• CMS
• Cart
• Checkout
• etc.

Each page categorized as one of these page types has a different set of RequireJS module dependencies. When RequireJS modules are bundled together by page type, you end up with just a few bundles covering the dependencies of any page in your store.

This allows you to create separate bundles for the dependencies common to different types of pages: a bundle for Category-only pages, a bundle for Search-only pages, a bundle for Checkout pages, and so on.

Another way to use it is to create bundles by purpose, such as 

• Common features
• Product-related features
• Checkout features
• Taxes
• Form validations
• etc.

There are no set rules as to how you should define your bundles. Some bundling strategies will work better than others depending on your particular needs and the structure of your Magento 2 store. 

In general, splitting bundles by page type allows for decent performance optimization on a clean Magento installation. Still, keep in mind that some customizations may require more in-depth analysis and different approaches to asset distribution.

Our experience with JS bundling

Below is a sample of before and after audit comparison from one of the projects where our team has implemented this optimization technique.

As seen from the table, the results are quite reassuring, especially given how little effort was required to achieve these improvements. The bundling delivered improvements in the most heavily weighted parts of the google page speed metrics. You may notice some decreases, however, these were only minor and are outweighed by the benefits.

Additionally, further optimization is usually possible via more detailed configuration adjustments.

Wonder how much faster your Magento store can become? Let us help you! Our team is always ready to help or suggest best practices suited for your project’s needs.

Related articles:

90+ PageSpeed score for BigCommerce

Share on: