User Manual - Google Page Speed Optimizer
- Installing the Magento 2 Google Page Speed Optimizer
- Set up cron
- Uninstalling the Magento 2 Google Page Speed Optimizer
- Extension Compatibility
- Introducing to Magento 2 Google Page Speed Optimizer
- Extension Overview
- Key Features
- Using Magento 2 Google Page Speed Optimizer
- Extension Configuration
- Monitoring and Insights
Installing the Magento 2 Google Page Speed Optimizer extension
Command Line Installation
-
Backup your web directory and store database
-
Download the Google Page Speed Optimizer installation package
-
Upload contents of the Google Page Speed Optimizer installation package to your store root directory
-
In SSH console of your server navigate to your store root folder:
cd path_to_the_store_root_folder
Run the following command:
php bin/magento module:enable Aheadworks_GooglePageSpeedOptimizer
then:
php bin/magento setup:upgrade
after:
php bin/magento setup:static-content:deploy -f
-
Flush store cache; log out from the backend and log in again
|
Make sure the installation is done from the FTP administrator account. Otherwise, set 775 permissions to the store root directory after the extension is deployed. |
Composer Installation
If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store:
1. Login to your ssh console and navigate to your store folder:
cd path_to_the_store_root_folder
Run the following commands:
|
composer config repositories.aheadworks composer https://dist.aheadworks.com/ |
After the command was executed successfully, you can use the composer to install the extension.
To install the extension:
2. Login to your ssh console and navigate to your store folder:
cd path_to_the_store_root_folder
3. Run the following command to install the latest version of the extension:
composer require aheadworks/module-google-page-speed-optimizer
if you need to install a specific version, run this command:
composer require aheadworks/module-google-page-speed-optimizer<version>
| Specify the version of the extension in <version> |
When prompted, enter Public Key (Username) and Private Key (Password):
Both Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site:
To upgrade the extension:
To update or upgrade an extension:
Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root.
If a composer package exists for the extension, run one of the following.
Update per module name:
composer update aheadworks/module-google-page-speed-optimizer
Updater per version:
composer require aheadworks/module-google-page-speed-optimizer:<version>
Run the following commands to upgrade, deploy, and clean the cache.
php bin/magento setup:upgrade --keep-generated
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
Set up cron
If you have already configured cron jobs for your Magento installation then you can skip this step. Read the following instructions on setting cron job for your Magento store: Magento user guide.-
Generally, it would be enough to run in SSH console of your server:
crontab -e
And insert the following line:
*/3 * * * * php -c <ini-file-path> <your Magento install dir>/bin/magento cron:run
*/3 * * * * php -c <ini-file-path> <your Magento install dir>/update/cron.php
*/3 * * * * php -c <ini-file-path> <your Magento install dir>/bin/magento setup:cron:run
Remember to confirm the Save request when exiting the installation.
Uninstalling the Magento 2 Google Page Speed Optimizer extension
Since Magento introduced declarative Database you need to be very careful when uninstalling or disabling the module.
|
NOTE: Please be very careful when uninstalling/disabling this module. This module uses a declarative DB scheme. Once the module is uninstalled its DB tables will be lost. |
Manual Removal
1. Disable the module by executing the following commands:
php bin/magento module:disable Aheadworks_GooglePageSpeedOptimizer
php bin/magento setup:upgrade
2. Remove the extension files from the following folder:
app/code/Aheadworks/GooglePageSpeedOptimizer
Automatic Removal (via Composer)
1. Disable the module by executing the following commands:
php bin/magento module:uninstall Aheadworks_GooglePageSpeedOptimizer
Extension Compatibility
|
Module Version |
Magento Version |
|
As of version 1.0.0 |
2.4.7 - 2.4.9 |
Introducing to Magento 2 Google Page Speed Optimizer
Extension Overview
The Google Page Speed Optimizer for Magento 2 extension transforms slow storefronts into high-converting, green-zone sites by offloading heavy image processing to dedicated SaaS cloud servers. Built to maximize mobile performance, it cuts bounce rates, elevates your Google search rankings, and secures more completed checkouts.
The module automates front-end code minification, script deferral, HTTP/2 Server Push, and instant Back/Forward page restores—giving your shoppers a lightning-fast browsing experience while saving server resources and eliminating expensive developer bills.
Key Features
-
Offload heavy image compression and WebP/AVIF conversion to cloud SaaS servers to keep your hosting fast and lightweight.
-
Eliminate render-blocking resources by minifying and deferring non-critical JS, CSS, and HTML.
-
Instantaneously restore previously visited pages using native Back/Forward Browser Caching.
-
Preload critical fonts and stylesheets early with advanced HTTP/2 Server Push settings.
-
Track mobile and desktop performance gains directly inside your Magento admin panel.
Using Magento 2 Google Page Speed Optimizer
Extension Configuration
To open the settings, go to Stores > Configuration > AHEADWORKS EXTENSIONS > Google Page Speed Optimizer.
Monitoring and Insights
In the Monitoring and Insights section, configure the following options:
-
Show Metrics on Frontend – set this option to Yes to display a small pop-up on the storefront showing real-time Core Web Vitals and Back/Forward Cache status;
-
Allowed IPs for Metrics Popup – enter IP addresses (one per line) allowed to see the metrics pop-up. If left empty, the pop-up will be visible to everyone;
-
Enable Core Web Vitals Dashboard – set this option to Yes to collect and view PageSpeed scores in Reports > Core Web Vitals Dashboard. Once set to Yes, the following dependent fields will appear:
-
Google API Key – enter the API key used for PageSpeed Insights requests (click Here to obtain the API key via Google Cloud Console);
-
Dashboard Data Retention (Days) – specify the number of days after which dashboard history is automatically removed;
-
Dashboard Update Frequency – specify the cron schedule for capturing speed metrics (recommended: 1-2 times daily, e.g., 0 2 * * *);
|
The schedule field uses standard Cron expression syntax to determine when automated image optimization runs on your server. Each expression consists of five space-separated fields, configured from left to right as follows:
|
-
URLs to Monitor – enter one absolute URL per line to track their PageSpeed scores and metrics.
Image Optimization
In the Image Optimization section, configure the following options:
-
Activate Optimization Service – click Activate to connect your website and unlock cloud image compression features. Once connected, the button changes to Deactivate with a green checkmark;
-
Enable Image Optimization – set this option to Yes to enable background image compression and optimization across the store;
-
Auto-Optimize New Images – set this option to Yes to automatically convert new image uploads to WebP or AVIF (note: folder filters below do not apply to this feature);
-
Image Compression Format – choose the output format for optimized images:
-
WebP – ensures maximum browser compatibility;
-
AVIF – delivers smaller file sizes for advanced performance optimization.
-
Image Compression Quality – set the quality level for image conversion from 0 (lowest quality, highest compression) to 100 (highest quality, lowest compression);
-
Included Folders – specify additional folders for mass optimization and image cleanup. Enter paths relative to pub/media (e.g., wysiwyg/home). Standard catalog folders are in scope by default; do not start paths with /media/;
-
Excluded Folders – specify folders to skip during mass optimization and image cleanup. Enter paths relative to pub/media (e.g., wysiwyg/secret); do not start paths with /media/;
-
Generate Mobile Images – set this option to Yes to create smaller WebP or AVIF images specifically for mobile devices to load faster;
-
Generate Tablet Images – set this option to Yes to create smaller WebP or AVIF images specifically for tablet devices to load faster;
-
Add Images to Queue – click this button to publish async scan and conversion queue messages for background workers;
-
Clear Mobile and Tablet Images – click this button to remove resized mobile and tablet image files from the server;
-
Clear All Optimized Images – click this button to remove all optimized images from the server for a fresh start or full cleanup.
Lazy Loading & Media Optimization
In the Lazy Loading & Media Optimization section, configure the following options:
-
Enable Lazy Load – set this option to Yes to delay loading images until visitors scroll down to them, making the initial page load much faster;
-
Desktop Eager Load Limit (Home Page) – specify the number of leading images above the fold to exclude from lazy loading on the home page for desktop viewports so they load instantly;
-
Desktop Eager Load Limit (Category Pages) – specify the number of leading images above the fold to exclude from lazy loading on category pages for desktop viewports;
-
Desktop Eager Load Limit (Product Pages) – specify the number of leading images above the fold to exclude from lazy loading on product pages for desktop viewports;
-
Desktop Eager Load Limit (CMS Pages) – specify the number of leading images above the fold to exclude from lazy loading on CMS pages for desktop viewports;
-
Mobile Eager Load Limit (Home Page) – specify the number of leading images above the fold to exclude from lazy loading on the home page for mobile viewports;
-
Mobile Eager Load Limit (Category Pages) – specify the number of leading images above the fold to exclude from lazy loading on category pages for mobile viewports;
-
Mobile Eager Load Limit (Product Pages) – specify the number of leading images above the fold to exclude from lazy loading on product pages for mobile viewports;
-
Mobile Eager Load Limit (CMS Pages) – specify the number of leading images above the fold to exclude from lazy loading on CMS pages for mobile viewports;
-
Eager Load Image Patterns – enter RegEx patterns (one per line) to load matching images instantly with high priority. Note: The first image on every page is always prioritized automatically;
-
Main Content Eager Load Limit – set the maximum number of images in the main content area to load with high priority;
-
Lazy Load Image Exclusions – enter RegEx patterns (one per line) to exclude specific images from lazy loading. Note: this will not overwrite existing loading attributes in your theme;
-
Enable Async Image Decoding – set this option to Yes to display text and layout immediately while images process in the background to prevent page freezing;
-
Instant-Load Image Count – set how many top images to exclude from background processing so they appear first;
-
Exclude from Async Decoding – enter RegEx patterns (one per line) to skip async decoding for specific images;
-
Lazy Load Videos – set this option to Yes to delay loading embedded videos (like YouTube or Vimeo) until users scroll to them to speed up the page;
-
Defer Iframes – set this option to Yes to delay loading embedded content (like Google Maps or widgets) until users scroll to them;
-
Exclude from Iframe Lazy Load – enter RegEx patterns (one per line) to skip lazy loading for specific iframes.
Javascript Optimization
In the Javascript Optimization section, configure the following options:
-
Move JS to Footer – set this option to Yes to move JavaScript code to the bottom of the page so the main content loads faster;
-
Footer JS Exclusions – enter RegEx patterns (one per line) to skip moving specific scripts to the bottom (e.g., .*gtm\.js.* or .*checkout.*);
-
JS Loading Rules – set specific scripts to load asynchronously (async) or delayed (defer) using RegEx patterns. Click Add to specify a rule by entering the Regex pattern and selecting the corresponding Attribute (async or defer). Note: This feature works even if "Move JS to Footer" is disabled;
-
Delay Magento Core JS Loading – set this option to Yes to postpone core Magento scripts until the browser is idle, allowing the visual part of the site to load first;
-
Maximum Script Delay (ms) – specify the maximum wait time in milliseconds before delayed scripts are forced to run (recommended: 2000);
-
Delay Knockout.js UI Rendering – set this option to Yes to postpone heavy UI components until the browser is idle, allowing the main page layout to load first;
-
Maximum UI Rendering Delay (ms) – specify the maximum wait time in milliseconds before delayed UI components are forced to run (recommended: 2000);
-
Move External Scripts to Footer – set this option to Yes to move external scripts to the bottom of the page so the main content loads faster;
-
External Script Exclusions – enter parts of script URLs (one per line) to skip moving them to the bottom (e.g., google-analytics.com or connect.facebook.net);
-
Minify JS – set this option to Yes to compress JavaScript files using Magento's built-in optimizer. Note: This feature only works in Production mode.
|
Note: The Minify JS option is disabled if your Magento store is running in Developer or Default mode. Magento only allows native JS minification in Production mode. To enable this setting, switch your Magento instance to Production mode using the command line:
bin/magento deploy:mode:set production
bin/magento setup:static-content:deploy -f
|
CSS Optimization
In the CSS Optimization section, configure the following options:
-
Enable Async CSS Load – set this option to Yes to prevent CSS files from blocking the initial page render, significantly improving loading speed;
-
CSS Async Loading Exclusions – enter RegEx patterns (one per line) to skip asynchronous loading for specific stylesheets and load them synchronously instead (e.g., styles-l.css or styles-m.css);
-
Minify CSS – set this option to Yes to compress style sheets using Magento's built-in optimizer. Note: This feature only works when Magento is running in Production mode.
HTML Minification
In the HTML Minification section, configure the following options:
-
Minify HTML – set this option to Yes to remove unnecessary spaces, line breaks, and comments from the page code to reduce overall payload size and speed up loading;
-
Keep HTML Cache Markers – set this option to Yes to preserve cache-related comments in the HTML output, ensuring compatibility with third-party caching systems (e.g., Varnish or full-page cache engines);
-
Remove Protected Comments – set this option to Yes to strip out special comments (such as those starting with !) from embedded styles and scripts to save extra bytes. Note: Ensure this complies with your third-party script licenses before enabling.
Back/Forward Caching
In the Back/Forward Caching section, configure the following options:
-
Enable Back/Forward Caching – set this option to Yes to allow pages to load instantly when customers use the browser's back or forward navigation buttons;
-
URL Exclusions – enter parts of URLs (one per line) to skip back/forward caching for sensitive or dynamic pages.
Developer settings (Advanced)
Note: Any link added to this section will load on every page. Only include resources that are absolutely critical. Adding non-essential assets provides no benefit and can actually degrade your site's performance.
In the Developer settings (Advanced) section, configure the following options:
-
-
Load Critical Assets in Head – set this option to Yes to force core assets like stylesheets and scripts to load first before any other content;
-
Critical Assets Load Priority – click Add to specify individual critical resources to preload in the <head> tag. For each entry, set the following parameters:
-
Sort Order – specify a numerical priority order for loading the resource;
-
Resource URL – enter the absolute or relative path to the asset (e.g., frontend/Magento/luma/en_US/css/print.css, frontend/Magento/luma/en_US/Hyva_Theme/js/hello.min.js, or [https://example.com/static/.../file.jpg](https://example.com/static/.../file.jpg));
-
Type – select the resource hint type:
-
Preload – tells the browser to fetch the resource early in the page lifecycle;
-
Preconnect – establishes an early connection to an external domain;
-
Prefetch – requests resources needed for future navigation;
-
DNS Prefetch – performs early DNS lookup for an external domain.
-
As – specify the resource type for accurate fetch prioritization: Script, Style, Font, Image, Fetch/XHR, Document, or Video;
-
Font-Only CORS Support – set to Yes if the resource is a font file that requires cross-origin (CORS) headers to load correctly;
-
-
Enable Server Push – set this option to Yes to send configured resources to the browser before they are requested to speed up loading (requires HTTP/2 and uses Link response headers);
-
Server Push Load Priority – click Add to specify assets to be pushed via HTTP/2 server push using the same fields (Sort Order, Resource URL, Type, As, and Font-Only CORS Support).