How to optimize JS with the Google Page Speed Optimizer extension?

How to optimize JS with the Google Page Speed Optimizer extension?

      To optimize JS with the Google Page Speed Optimizer extension, please follow the next steps:
      1. Transfer Magento to the Production mode. It can be done with the next command from the root Magento folder:   
php bin/magento deploy:mode:set production 
      2. Navigate to Stores > Configuration > Google Page Speed Optimizer > JavaScript and enable the Amasty JS Optimization option:



      3. Save the configuration and clear the Magento cache. 
      4. Press the Run Optimization button to start JS optimization. Optimization of JavaScript includes bundling, merging, and modification: 



      5. At the beginning of the process, the extension will suggest you choose the store views for JS optimization: 



      6. Then, the extension analyses the store view and optimizes JS files. In case there are pages that the extension is unable to optimize automatically, it will request to open the pages manually: 



      Important: if you don't receive the message, but the link disappears from the popup window, it was successfully optimized, and you may close it.

      7. After successful optimization of main website pages, the extension will suggest optimizing additional pages. You can create JS bundles for your custom CMS pages and the checkout page. JS from the checkout page is not bundled by default in order not to break Magento functionality. 



      8. On the last step, the extension will list the commands to run to apply optimized JS to the website frontend. It's important to run them in the exact order they are printed:



      Now the JS optimization is finished. You can check whether JS was optimized in the Developer Console of your browser. To do so, open the console, switch to the Source tab, and check the www.website.com > static > cache/merged folder. It should contain one JS file with a similar name: 



      To complete JS optimization, enable the Move JavaScript To Page Bottom option on the module configuration page and clear the Magento cache after:



      You can check whether JS was moved to the page bottom in the Developer Console as well. Open the console, switch to the Elements tab, and search for the minified file name. When optimized successfully, the JS will be placed at the page bottom right before the closing </body> tag:



      Congratulations! You've just optimized JavaScript on your Magento with the Google Page Speed Optimizer extension. ‚Äč
      • Announcements

      • Already Done in Q2'22

        Extensions updates Blog Pro NEW a feature of changing the blog’s fonts; NEW post matching when switching between storeviews/languages; NEW live search for blog; NEW an option of adding the blog’s summary below the blog title on the main blog page; NEW read
      • What to expect in Q2'22

        Amasty always strives to deliver new functionality in accordance with the most popular customers’ requests and e-commerce trends. In this article, we'll share our plans on new extensions, improvements, fixes, and other releases the team intends to be
      • March'22 results

        New Solutions In March, the team presented two new suites that combine features of top Amasty extensions and are attractive price-wise: Must-Haves Suite. Don't know how to grow your business or what to start with? Get our must-have set of features for
      • February'22 results

              Time to check the results of February! It's been a tough end to the month, but let's digress a bit and check out what the team has done.       Extensions updates. Besides technical fixes, February was rich in new features and improvements:  Jet
      • January'22 results

              Can't help but start with the biggest news of the past month: Amasty switched to Product Subscriptions. It means that all extensions can now be acquired by subscription only. The initially purchased code of the module is still available in the customer