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.
Enabling the Prioritize Resource Loading feature in the HTML section helps to solve the issue:
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. However, enabling the corresponding option in the CSS section may help to improve the score:
⇾ 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.
⇾ Document request latency (partially)
This metric evaluates the loading performance of the page, which is the foundational resource for any web page. The warning indicates a delay in retrieving and processing the page. Reducing the page size and loading time can significantly improve the user experience.
The Server Push option can partially improve this metric while also having a positive impact on the website's overall performance. 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.
For specific files that need to be preloaded, the Advanced Server Push options let you specify which files to preload and how:
Our Full Page Cache Warmer extension can help improve page load speed, ensuring website pages are always cached and returned quickly to users when requested. The extension is available separately via this link: Full Page Cache Warmer.
⇾ 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.
⇾ Improve image delivery
There are several aspects that will help to improve the website performance by optimizing images:
Serve images in next-gen formats
To improve website speed while maintaining image quality, it is best to use the modern image formats like WebP or Avif. These are modern image formats that provide 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 and Avif formats. To do so, create image copies in next-gen formats in image optimization patterns: Content → Image Optimizer → Image Folder Optimization Settings.
After that, allow the extension to show optimized 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.
Compressing images is also a crucial technique for optimizing website performance. The smaller the image file sizes, the less 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?
⇾ Layout shift culprits
Preventing layout shifts during page load can improve your website's PageSpeed Insights score and enhance user experience. Although the extension can't fix all shifting elements, you can preload specific images on website pages to ensure the layout stays stable during page load. To do this, enable the Preload feature in Stores → Configuration → Amasty Extensions → Lazy Load.
If the theme doesn't automatically add dimensions to images (such as weight and height), enabling the Add Aspect Ratio Styles to Image Tags feature will help improve the page layout stability during loading:
⇾ 3rd parties
Using third-party scripts or resources from domains other than your own website can have a significant impact on your site's performance, user experience, and Core Web Vitals scores. To minimise this, it's recommended to enable the JavaScript Optimization Strategy feature in Stores → Configuration → Amasty Extensions → Google Page Speed Optimizer → JavaScript:
If you encounter any difficulties while configuring the extension, do not hesitate to contact us.
Related Articles
What is the difference between Lazy Load and Google Page Speed Optimizer extensions?
There are two landing pages created for marketing purposes: Lazy Load and Google Page Speed Optimizer. However, both landing pages represent the same extension. Regardless of the landing page, there are three optimizer versions that we offer: Google ...I've enabled lazy load, but the images on my website disappeared. What should I do?
There are a number of reasons for banners/carousels/sliders etc. disappearing from the frontend after enabling the Lazy Load functionality. To resolve this issue, you may try the solutions below. 1. Try adding the image class or part of its name to ...What optimizer settings do I use for images, if I have both the Jet Theme and the Google Page Speed Optimizer module?
The Image Optimizer inside Jet Theme is a Lite version of any optimizer-type modules. So, considering you have the Google Page Speed Optimizer extension, it leads over the optimizer settings inside the Jet Theme. If you have already installed, or are ...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 ...What do I choose: Google Page Speed optimizer or Full Page Cache?
Our Full Page Cache Warmer extension is recommended for those looking to enhance page load speeds. The warmer emulates visitor behavior, and timely warms up pages' cache so that your customers and Googlebot always get the needed content faster. If ...
Announcements
⚡ Have you enlarged the functionality of the Amasty extension with your own code? Share your improvements with us!
At Amasty, we understand that some of our clients require customized features to perfectly align the extension with their business needs. If you have developed new functionality within an Amasty module and would like to share it, please submit a ticket