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 steps below.

Step 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

Step 2. Navigate to Stores → Configuration → Google Page Speed Optimizer → JavaScript and enable the Amasty JS Optimization option:



Step 3. Save the configuration and clear the Magento cache. 

Step 4. Press the Run Optimization button to start JS optimization. Optimization of JavaScript includes bundling, merging, and modification: 



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



Step 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: 



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

Step 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. 



Step 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: