Stand with Loading of the JS files is critical in Magento since it not only influences the speed of page loading but also the customer experience. And though there are multiple steps you should take to speed up Magento 2, optimizing JS loading should be at the top of the list.
In this article, you'll learn how to configure Magento 2 Rocket JavaScript Extension that helps you to optimize JS bundling and defer the loading of all or some JavaScript files.
Watch this short video in order to learn how to configure deferred javascript in Magento 2 or follow the steps below.
To configure Rocket JavaScript Extension in Magento 2:
1. Navigate to Stores > Configuration > Magefan Extensions > Rocket JavaScript and enable the extension.
2. Enable the Enabled Deferred JavaScript option in order to move all of the JavaScripts to the end (bottom) of a page, before the </html> closing tag.
3. Specify the pages which you don't want to move the JS to the bottom on in the Disallowed Pages for Deferred JavaScript field.
4. Defer the loading of some JS files by specifying them in the Ignore Deferred JavaScript With field.
5. Enable the JavaScript Bundling Optimization if you want to manage what JS files to include in the JS bundle manually.
6. Enter the list of JS files you want to be Included In Bundling in the corresponding option (we recommend it be configured by developers).
Pro tip: to reduce the size of the bundle, optimize Magento JS bundling by compiling a list of JS files from all pages.