We live in a time when everyone is looking for faster-loaded stores. Nowadays about 90% of Magento 2 Luma-based themes have the issue with overloading JS that in turn slows down the website loading. Many experts state that the best performance is achieved by JS optimizations and we agree with them.
In the interest of helping you fix the problem, we prepared the release 1.7.12 for the Magento 2 Page Speed extension. It includes the new delayed unpack mode for the scripts. This is an experimental feature that delays JavaScript until user interaction.
That's what we now will talk about. Go on reading.
The benefits of a JavaScript delay based on user interaction
The new advanced Page speed module’s feature runs the unpack after some interaction to ensure that the JS is deferred. When we say interaction we mean some user activity such as scrolling and navigation. It looks like the visitor lands on the page with a minimum of js. In other words, the page's JavaScript resources are not downloaded until you move your mouse or click on something. Once he begins interacting with the page, the new feature downloads all existing js that were specified in the require.js configuration.
What will it give you? - We answer.
When we delay JavaScript based on user interaction, this enables sending the minimal code required to provide the value for content. It occurs when something in JS isn’t needed right away, so we can load the rest on demand.
This improves page-load times and has a big impact on Largest Contentful Paint (LCP) at the same time. LCP is an important web performance metric - one of the three Core Web Vitals from Google. The metric ensures a better user experience and lower bounce rates. A high LCP score has a positive impact on your store ratings.
Since the benefits are obvious, let's see how to use the new feature correctly.
Feature configuration - an overview
To enable the JavaScript delay based on user interaction, go to the Deferred Javascripts section in the Page Speed module configuration.
Here you can see the Yes-No field "Run unpack on user interaction". Select Yes if you want to speed up your website loading.
Note: you should disable the "Merge Javascript files", “Enable JavaScript Bundling” and “Enable Advanced Javascript Bundling (Require.js)” options in the JavaScript Settings section. It will prevent possible issues in the new feature work in your store.
Right here you can check the results of using the feature
Visit the Page Speed module demo to see how the feature works.
Conclusion
We'd like to remind you that our Magento 2 Page Speed module provides different optimization tools to improve the page load speed and optimize Magento 2 performance. Learn more here:
- https://docs.swissuplabs.com/m2/extensions/pagespeed/quickstart/
- https://swissuplabs.com/blog/we-know-how-to-improve-magento-2-page-speed-join-learn-more/
Consistency is a word that’s often associated with the Page Speed module by SwissUpLabs. We update our extension regularly to offer you the best ways in performance optimization.
Today, we introduced you to the new feature. It supports Magento 2.4.4 and higher. We hope you start using it as soon as possible.
We would appreciate your feedback.
