The new approach of JS bundling that works well for your website Page Speed score. Review new bundling method of Page Speed 1.3 release

The new approach of JS bundling that works well for your website Page Speed score. Review new bundling method of Page Speed 1.3 release

When trying to improve your Magento 2 website speed score you’ve probably done a lot. We guess you’ve implemented different speed optimization techniques such as JS bundling for faster server response time, etc.

But even having a really fast website, this doesn't guarantee good Google Page speed score. There is still a lot of JS files that make your browser send lots of requests. Ultimately that makes your page speed score lower no matter what you do about it.

We came up with a solution to the possible problem. We achieved a 75/99 Google Page Speed Score by implementing new combined js bundling method. Read ahead.

Why default Magento 2 JS bundling doesn't work well?

Magento team offers default method for better performance. You can turn it on in Magento Admin > Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings, or from the command line. Use the official guide to learn more.

You can use the default Magento 2 bundling to improve load time by:

  • reducing the number of requests to the server
  • reducing the size of requested assets.

Let’s look at possible pitfalls.

Most of the core Magento 2 frontend is built on heavy JS. A lot of unnecessary code decreases page load speed because of large files takes more time to load them. But as we mentioned above, many users still say that they would better to turn JS bundling off. They see increased page size.

Well, it really happens. Guess why?

The browser loads all the JavaScript bundles for each page request. Not just the ones you actually need. You can't rule on where to load a specific bundle. In the end, it impacts page load timing process for the user’s first visit to your website.

Advanced JavaScript bundling method

Then you’ve been suggested the advanced JavaScript bundling method. It aims to build the separate bundles for each page of your store. It looks like you download a common bundle and a page-specific bundle for each page accessed.

The method is based on r.js optimizer. There are some pitfalls, though.

  • You must have high technical skills as well as resources to implement.
  • Not always results in high PageSpeed Score.

Nevertheless, don’t be too quick to turn it off. There is another easier way of resolving JS bundling issues.

The easier way of JS content's bundling for a specific page

We came up with a better method that helps you to only bundle files which would be used on every page. It combines the default Magento bundling and r.js optimizer methods, and adds the default bundle.

Magento 2 Page Speed module has got implemented a bundling algorithm that allows you to:

  • Add only the necessary JS files for a certain page like separate bundle-product.js for each page of your Magento 2 store. You can put all checkout-related stuff into one bundle and load it only on the checkout page.
  • Keep using bundling to reduce the number of queries as well as dynamic connections of JS files. The module allows reducing the number of requests down for each page.
  • Use built-in and predefined bundling config for every type of page.

Do you like the idea to use JavaScript bundling like this? By the way, you don’t need any other technical skills.

We believe this is the optimal solution provided by M2 Page Speed 1.3 release. The main goal is to load the absolute minimum the customer needs to see.

As a result, you will see the improved website performance, and hence, amplified visitor engagement.

Test results before and after Page Speed module method

A typical Magento page load

You can see about 300 requests when the average page now is over 4MB in size.

Default Magento 2 bundling

All the JavaScript bundles are merged and loaded. It produces less requests, but too much 18MB page size. You just don’t need so heavy Java-script related page. It really decreases page load speed.

 

Page Speed module JS bundling method

With our bundling, you optimize benefit from bundling files. This is you who decides to on where to load a specific bundle. It keeps your website content more dynamic and engaging. You can see so little requests along with just merely 4.7MB page size.

The main thing is that you can see a higher Page Speed score at SwissUpLabs website. It was to be proved.

Well, if you want to achieve a 75/99 Google Page Speed Score as we did, start using the new js.bundling method provided by M2 Page Speed extension.

Use the benefit to decide on bundle content for a specific page!

We are waiting for your comments. Share your experience of bundling JavaScript.

Popular Magento Themes & Extensions

5 thoughts on “The new approach of JS bundling that works well for your website Page Speed score. Review new bundling method of Page Speed 1.3 release”

  • xub3r

    I didn't feel too much difference in between disabling Magento's JavaScript bundling and Enabling your advanced JavaScript bundling. In fact, I feel no difference at all when it comes to page speeds.

    Reply
    • Roman B.

      Please open ticket and our support will check what is wrong.

      Reply
      • xub3r

        nothing is wrong, everything is working fine but the load speed is same as before and we feel no difference at all. we will contact you in case we experience any issue. Thank you

        Reply
        • Roman B.

          Not everyone is provided by a good internet or a good hosting. I suggest you use a https://developers.google.com/web/tools/lighthouse/ tool to feel the difference

          Reply
          • xub3r

            Thank you Roman. I analyze the website before and after implementing the new update with Google Insights but feel no difference at all, but i will also give a try to lighthouse as well. will update you soon. Thanks

            Reply
Leave a Reply