What PageSpeed Insights metrics does Google Page Speed Optimizer cover?

What PageSpeed Insights metrics does Google Page Speed Optimizer cover?

The Google Page Speed Optimizer extension is designed to optimize images and code, which can help to improve certain PageSpeed Insights metrics and enhance the overall website performance. Our extension guarantees up to 97% rating if the fast server and default Magento theme are used. However, the performance of a website depends on various factors such as server configuration, theme development, and other important parameters that Google considers. While our module can optimize Magento, it cannot affect these external factors.

Before starting module configuration, please check how your website performs on PageSpeed Insights and see what metrics Google recommends you to improve (it is advisable to check several pages: homepage, product and category pages).



Based on the received statistics, the Google Page Speed Optimizer extension can be configured to improve these metrics. Below are instructions to configure the extension for each Google recommendation.
​
Kindly note that our extension can cover metrics described below only. To improve other Google recommendations, some third-party tools should be used.

⇾ Minify CSS

Minification is removing unnecessary data from a code without impacting the way the browser processes it. This can involve eliminating code comments and spacing, discarding unused code, utilizing concise variable and function names, etc. The purpose of minifying CSS, HTML, and JS files is to optimize webpage loading times. The larger the code file, the slower it loads, so it's important to keep them as compact as possible.

In Google Page Speed Optimizer extension, the setting responsible for CSS minification is located in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → CSS → Minify CSS.



⇾ Minify HTML

For this parameter, enable HTML minification in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → HTML → Minify HTML.



⇾ Combine JavaScript

This Google metric is covered by the Amasty JS Optimization feature in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → JavaScript. The Amasty Smart JS Bundling feature facilitates the combining of JavaScript files from home, category, and product pages into bundles. This allows for the loading of only the necessary JavaScript on a given page, reducing the overall load time and improving the webpage's performance.

Before running JS optimization, please create a full backup of your Magento instance just to be safe if anything goes wrong.

Set the Amasty JS Optimization option to Yes and then hit the Run button in the Run Optimization field. It will launch the JS optimization wizard with a full what-and-how list. JS files will be optimized, including minifying and merging into smart bundles.

For more details and steps on how to work with the Amasty JS Optimization tool, see the following article: How to optimize JS with the Google Page Speed Optimizer extension?



⇾ Minify JavaScript

JS minification is covered by the Amasty JS Optimization option described above. However, if you don't need advanced JS bundling, you can disable the Amasty JS Optimization feature and use only JS minification in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → JavaScript → Minify JavaScript Files.



⇾ Eliminate render-blocking resources

Render-blocking resources are sections of code that can cause delays in loading page content. These resources are typically JS and CSS scripts that require considerable processing time by the browser, however, they may not be essential for the initial user experience.

If this problem on your site is caused by JS, our extension can help through the general Amasty JS Optimization tool. In addition to that, Move JS to Page Bottom can be used to cover the metric. 



What concerns CSS, our extension can't fully affect it, since there are styles that cannot be moved to footer due to Magento limitations.

⇾ Keep request counts low and transfer sizes small

By utilizing the Advanced JS Bundling and JS Minification features, the page size in kilobytes can be significantly reduced, resulting in an increased page load speed. This can lead to an improvement in Google rankings for both mobile and desktop devices.



⇾ Avoid enormous network payloads (partially)

This warning indicates that the size of your webpage exceeds the recommended size suggested by Google. Therefore, reducing the total size of a page's network requests can significantly improve the user experience by enabling smaller files to download faster.

The Server Push option can partially improve this metric, while also providing a positive impact on the overall performance of the website. It is a performance optimization technique that allows files to be delivered from the server faster.  The setting can be found in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → Server Push/Preload → Enable Server Push/Preload.
The feature requires additional configuration to the server. Please refer to our User Guide for more details. 




⇾ Defer offscreen images

If you see this metric in PageSpeed Insights, Google prompts you to enable lazy loading of images to prevent them from appearing on the screen before scrolling. To improve page loading speed and meet this metric, activate the Lazy Load module and enable Use Lazy Loading Images in Stores → Configuration → Amasty Extensions → Lazy Load. You can also configure Lazy Load per pages, please refer to User Guide for more details. 



⇾ Serve images in next-gen formats

To improve website speed while maintaining image quality, it is best to use the WebP image format. WebP is a modern image format that provides superior compression compared to other formats, resulting in smaller file sizes and faster loading speed without sacrificing image quality. Google Page Speed Optimizer allows fast converting all or specific images into WebP. To do so, create WebP image copies in image optimization patterns: Content → Image Optimizer → Image Folder Optimization Settings.




After that, allow the extension to show WebP copies on the frontend with these settings: Stores → Configuration → Amasty Extensions → Image Optimization: Use User Agent for Loading Images and Replace With WebP and Image Resolutions.

⇾ Efficiently encode images

Compressing images is a crucial technique for optimizing website performance. The smaller image file sizes, the less amount of data is needed to display it. This helps pages load quicker. To enable image compression tools, navigate to image optimization patterns (Content → Image Optimizer → Image Folder Optimization Settings) and choose the needed options: 



For the feature to work correctly, additional tools must be installed: JPEG optimization tool / PNG optimization tool / GIF optimization tool / WEBp tool. Find the instructions in the article: How to install image optimization tools?

⇾ Properly size images 

Google recommends that website images should be resized proportionately for each device. This means that images should be optimized for different screen sizes, so they can be displayed correctly and load quickly on any device. Our extension offers the functionality to create image copies in sizes suitable for tablets and mobiles, and furthermore, there's an option to choose the resize algorithm. The features can be found in image optimization patterns: Content → Image Optimizer → Image Folder Optimization Settings. 




See detailed instructions on how to create image optimization patterns in our User Guide and the following article: How to optimize images using Google Page Speed Optimizer extension?

If you encounter any difficulties while configuring the extension, do not hesitate to contact us.