My Cart 0

User Manual - Google Page Speed Optimizer

 

 

Installing the Magento 2 Google Page Speed Optimizer extension 

 

 

Command Line Installation

  1. Backup your web directory and store database

  2. Download the Google Page Speed Optimizer installation package

  3. Upload contents of the Google Page Speed Optimizer installation package to your store root directory

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

     

  1. 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:

  • Minute: The minute of the hour when the task executes (range: 0–59).

  • Hour: The hour of the day in 24-hour format (range: 0–23).

  • Day of the Month: The specific day of the month (range: 1–31).

  • Month of the Year: The month in which the task should run (range: 1–12).

  • Day of the Week: The day of the week (range: 0–6, where 0 stands for Sunday, or 1 for Monday).

 

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

  1. Open your server terminal, go to the Magento root directory, and run:

bin/magento deploy:mode:set production

  1. If static files are not deployed automatically, run:

bin/magento setup:static-content:deploy -f

  1. Refresh the Admin Panel page. The Minify JS drop-down field will become active, allowing you to set it to Yes.

 

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

 

Report incorrect information

Still Have Questions?

Our customer care team is here for you!

Contact Us