Google PageSpeed Optimizer for Magento 2
Google PageSpeed Optimizer speeds up Magento 2 for Core Web Vitals: it bundles and delays JavaScript, applies critical CSS per page type, converts images to WebP and lazy-loads them without delaying the main image.
Built-in PageSpeed Insights monitoring shows how each change affects the desktop and mobile score of your pages. Works with Luma and Hyvä themes.
- Delay GTM and chat scripts until interaction
- Critical CSS per page type
- JS bundling, minification and deferral
- Image compression and WebP conversion
- Lazy loading that keeps the main image first
- Built-in PageSpeed monitoring
Business Value
Google PageSpeed Optimizer is one Magento 2 speed optimization extension for JavaScript, CSS, HTML and images, with PageSpeed Insights monitoring built into the admin. Its settings map to Core Web Vitals: critical CSS, image preload and lazy loading that keeps the main image first work on Largest Contentful Paint (LCP), while delayed third-party scripts and JS bundling cut the main-thread work behind Total Blocking Time and Interaction to Next Paint (INP).
- Opportunity: Google uses Core Web Vitals as one of its ranking signals, and PageSpeed Insights shows how each page of your store scores on them.
- Problem: A default Magento store loads its JavaScript in the page head, third-party tags such as Google Tag Manager and chat widgets compete with the first screen, and images go out as full-size JPEG and PNG files. PageSpeed Insights reports this as render-blocking resources, long Total Blocking Time and "Improve image delivery". Check your store in PageSpeed Insights.
- Solution: The extension handles these causes from one admin section. It bundles only the JavaScript each page type uses, delays third-party scripts until the visitor interacts, applies critical CSS per page type, converts images to WebP and keeps the most important image out of lazy loading. It works with Luma and Hyvä themes, Mage-OS and Magento Cloud.
How does Magento 2 Speed Optimization work?
The extension works on four fronts. It reduces and reorders JavaScript and CSS so the first screen renders sooner, compresses images and serves them as WebP, loads offscreen images and videos only when visitors reach them, and tracks your PageSpeed score so you can see the effect of every change.
Each option is switched on separately, so you can roll changes out one at a time and check the result before the next step.
Performance Optimization of JavaScript and CSS
Advanced JavaScript bundling
On themes built on RequireJS, such as Luma, Magento loads many separate JavaScript files on every page, including code that page never uses.
JavaScript Optimization builds bundles from the files each page type actually requests on your storefront. A product page gets the scripts product pages need, a category page gets its own set, and code shared by most pages goes into a common bundle. As a result, every page loads fewer and smaller JS files.
Checkout is excluded from bundling by default, and you can exclude any other page. A pre-flight check runs before you turn the option on. If you want fewer HTTP requests on top of the bundles, Merge JavaScript files is available in the same section.
Delay JavaScript until user interaction
Google Tag Manager, chat widgets, analytics and review widgets can take a large share of main-thread time, yet none of them has to run before the visitor does anything.
The extension holds the scripts you choose until the first interaction (a tap, click, key press, scroll or mouse move) or until an optional timeout. This lowers Total Blocking Time without removing any functionality.
You decide what to delay with include and exclude patterns, and Dry Run mode only logs what would be delayed, so you can test safely on a live store. Core scripts are never delayed: RequireJS, jQuery, Knockout, Magento UI, Alpine.js and Magewire on Hyvä, as well as payment and reCAPTCHA scripts. See how to delay Google Tag Manager in the user manual.
Defer JavaScript and CSS to the page bottom
Render-blocking resources are one of the most common PageSpeed Insights findings. By default, Magento loads JavaScript in the page head, so the browser downloads and runs it before it shows the content. CSS files in the head have the same effect.
The extension moves JS and CSS to the bottom of the page, so the main content renders first. Magento's own option covers JavaScript only; here CSS moves too, and you keep control with exceptions: a list of scripts to leave in place and a rule that keeps specific CSS in the head.
Read more about fixing render-blocking resources in Magento 2.
Critical CSS per page type
Critical CSS is the small part of your styles needed to draw the first screen. When it is inlined and the rest of the CSS loads later, the page appears sooner and Largest Contentful Paint improves.
The extension keeps critical CSS as rules. Each rule matches pages by full action name, layout handle or URL pattern, so product, category, CMS and checkout pages, as well as pages of third-party modules, get their own CSS for each store view. When a rule matches, the remaining CSS loads without blocking the first render.
You can paste critical CSS into a rule yourself or let the built-in extractor take it from the real page, on demand or on a schedule. The extractor needs Node.js and Chrome on the server, while the storefront itself stays pure PHP. Setup is described in the user manual.
JS, CSS and HTML minification
Minification removes comments, whitespace and formatting from JS, CSS and HTML files, so the browser downloads less data.
The extension turns on Magento's minification for JS, CSS and HTML from one settings page, each type separately. Scripts that break when minified go on an exception list. Merge CSS files is available in the same place.
Preload fonts and connect early
Some resources the first screen needs, such as web fonts, are referenced deep inside CSS files, so the browser discovers them late.
The extension lets you preload fonts, open early connections (preconnect) to the third-party domains your pages use, and preload the home page hero image, optionally for a specific screen width only. The browser starts these downloads right away instead of finding them later.
Defer YouTube videos and Google Fonts
YouTube embeds and Google Fonts come from third-party servers, slow down the first load and are often flagged by PageSpeed Insights.
The extension replaces each YouTube video with its thumbnail and a play button, and the video loads only when the visitor clicks it. Other iframes, such as maps, can be lazy-loaded too. Google Fonts load without blocking rendering and use font-display: swap, so text stays visible while the font downloads.
Image Optimization: Compression, WebP and Lazy Loading
Images are usually the heaviest part of a page. The extension compresses them, serves them as WebP, loads offscreen images only when needed and makes sure the most important image loads first.
Lazy loading that keeps the main image first
Magento 2.4 lazy-loads product images in category listings only. Banners, CMS and Page Builder images, and background images load right away and compete with the content the visitor sees first.
The extension adds the browser's native lazy loading to images across the store, and to background images set by Page Builder or by the CSS classes you list. Offscreen images load when the visitor scrolls close to them.
The first images on the page skip lazy loading and can get fetchpriority="high", so the Largest Contentful Paint image is never delayed. On product pages, the main gallery photo is preloaded automatically. You can exclude any image by file name or type, and SVG files are skipped by default. More details are on the Lazy Load page.
Image compression
The extension compresses JPEG, PNG and GIF images with standard server tools (jpegoptim, optipng and gifsicle) and checks for you that they are installed. Choose the quality level: 100% (lossless, the default), 90%, 80% or 70%.
Optimization runs in the background by cron or from the command line. You choose whether it scans the media folder or the images your pages actually serve, including theme and static files. You can exclude a format, for example GIF, and restore the original images at any time, all of them or one format only.
WebP conversion
According to Google, lossy WebP images are 25–34% smaller than comparable JPEG files, and lossless WebP images are 26% smaller than PNG.
Once you turn WebP on, the extension creates a WebP copy of each image and serves it in a picture tag, with the original as a fallback for browsers without WebP support. Background images, the product gallery and swatches get WebP too, which helps with the "Improve image delivery" finding in PageSpeed Insights.
Responsive images
For the images you choose by file name pattern, the extension generates a set of smaller copies, so a phone gets an image sized for its screen instead of the desktop one. You can generate and clean up these sets from the admin or the command line.
Built-in PageSpeed Insights Monitoring
List the URLs you want to watch, and the extension runs PageSpeed Insights tests for them by cron, for desktop and mobile. Each page gets its own score history chart, so you can see how every change affects the score without checking pages by hand.
The tests run with your own free Google API key. You can also test any page from the command line.
Run Optimization from the Command Line
Frequent tasks can be run from the command line (CLI) instead of waiting for cron:
- Run a PageSpeed Insights test for a page of your store
- Optimize all images or a specific file or folder
- Create WebP copies of images
- Validate the image tools installed on the server
- Restore original images, all of them or one format only
- Clean up records of deleted images
- Extract critical CSS
See the full list of CLI commands in the user manual.
Full Features List of Google PageSpeed Optimizer
JavaScript Optimization:
- Pre-flight check
- JS bundling by page type
- Exclude pages from bundling
- Delay JavaScript until user interaction
- Dry Run mode for delayed scripts
- Merge JavaScript files
- Minify JavaScript
- Move JavaScript to page bottom
- Ignore URL list
- Defer YouTube videos
- Lazy-load iframes
CSS Optimization:
- Critical CSS rules per page type
- Built-in critical CSS extractor
- Defer non-critical CSS
- Merge CSS files
- Minify CSS files
- Move CSS to page bottom
- Add styles to HTML from CSS resources
- Defer Google Fonts
- Additional CSS styles
Image Optimization:
- JPEG, PNG and GIF compression
- Image quality level
- Image scan strategy
- WebP conversion with fallback
- WebP in product gallery and swatches
- Exclude image formats
- Optimization stats: scanned files, WebP files, saved size
Image Lazy Load:
- Native browser lazy loading
- Lazy-load background images
- Preload first N images
- Preload first N background images
- fetchpriority="high" for preloaded images
- Do not use lazy load for images
HTML Optimization:
- Minify HTML
- Preload fonts
- Preconnect to third-party domains
- Preload home page hero image
- Preload product main image
Command Line Interface:
- Run a PageSpeed Insights test for a page
- Validate the image tools on the server
- Run image optimization
- Create WebP copies of images
- Restore original images
- Extract critical CSS
Responsive images:
- Generate a set of responsive images
- Clean up the created responsive images
- Configure the file naming patterns
Google PageSpeed Insights:
- Google PageSpeed Desktop Score
- Google PageSpeed Mobile Score
- Score history per URL
- Run Google PageSpeed Test
- Specify URLs for monitoring in PageSpeed
The most visible improvement is on images. The module processes formats such as JPEG, PNG and GIF, and tracks which files have already been optimised, avoiding unnecessary reprocessing. In our case, it has processed more than 19,000 images, with an aggregate weight reduction of over 50%. PNGs benefit the most, while JPEGs keep a more balanced compression.
On the JavaScript side, bundling helps reduce the initial load by grouping frontend resources. It is not as visible as image optimisation, but it does show up in load and performance metrics.
The whole process runs in the background and, once configured, requires no day-to-day intervention. The module manages file state and applies optimisations progressively when new files appear.
The key is defining the compression level well from the start. From there, the system stays stable without needing external processes or manual adjustments.
Overall, it is a practical solution for reducing asset weight in Magento without adding complexity to the workflow.
Save time by starting your support request online and we'll connect you to an expert.
How can I speed up Magento 2 without coding?
Install the extension and turn its options on one by one in Stores > Configuration > PageSpeed Optimizer. A safe order is image compression, WebP and lazy loading first, then JavaScript and CSS optimization, then critical CSS and delayed third-party scripts.
Add your key pages to the built-in PageSpeed Insights monitoring to see how each step changes the score. Step-by-step instructions are in the user manual.
Does it work with Hyvä themes?
Yes. Image compression, WebP, lazy loading, preload, delayed third-party scripts and PageSpeed monitoring all work on Hyvä. Delay JavaScript never holds Alpine.js, Magewire or other Hyvä scripts.
JavaScript bundling and merging are built for RequireJS themes such as Luma. Hyvä doesn't use RequireJS, so you don't need these options there.
Will bundling or delaying JavaScript break checkout?
Checkout is excluded from JavaScript bundling by default. Delay JavaScript never holds Magento core scripts, payment scripts (PayPal, Stripe, Klarna) or reCAPTCHA, and Defer Google Fonts is skipped on checkout.
Before delaying scripts on a live store, run Dry Run mode: it only logs which scripts would be delayed.
Do I need Node.js to use critical CSS?
No. You can paste critical CSS into a rule yourself. Node.js and Chrome are needed only for the built-in extractor, which takes the CSS from the real page on demand or on a schedule. If your server can't run them (for example, Adobe Commerce Cloud web nodes), extract the CSS elsewhere and paste it into the rule.
How does JavaScript and CSS optimization work?
The extension bundles only the JavaScript each page type uses, minifies and merges JS and CSS, moves render-blocking files to the bottom of the page, and loads non-critical CSS after the critical CSS of the page. Third-party scripts such as Google Tag Manager can wait until the visitor's first interaction. Fewer and smaller requests mean the first screen renders sooner.
Why convert images to WebP?
WebP gives similar quality at a smaller file size: Google reports lossy WebP images 25–34% smaller than JPEG and lossless ones 26% smaller than PNG. Once you turn WebP on, the extension converts images automatically and keeps the original as a fallback for browsers without WebP support.
How does lazy loading improve Magento performance?
Lazy loading makes offscreen images load only when the visitor scrolls close to them, so the first screen downloads less. The extension uses the browser's native lazy loading, covers background images, and keeps the first images (including the main product photo) out of lazy loading so Largest Contentful Paint isn't delayed. See the Lazy Load page for details.
Can I skip optimization for PNG or GIF images?
Yes. Exclude any format (JPEG, PNG or GIF) from optimization and WebP conversion in the settings. If a format was already optimized, you can restore the originals of that format only from the command line.
Does it convert images to AVIF?
No, the extension converts images to WebP, which all current major browsers support, and keeps the original JPEG, PNG or GIF as a fallback.
mst_optimize/optimize_image/responsive/image and mst_optimize/optimize_html/preload_fonts in core_config_data). Without this step, stores that last saved these settings on Magento 2.1 or earlier would see them come back empty. Settings already stored as JSON are not changed, and a value that cannot be read is left as is and logged as a warning.pub/media elsewhere (split deployments, hosted platforms) now get correct matches. A store root such as /var/www is also no longer mixed up with a media folder at /var/wwwdata/media.mst_optimize_image_file table to remove them./checkout is now the default value of the move-JS URL exception list, matching the JS bundling exception list. Stores that saved the JavaScript settings before this default existed have an empty saved value that overrides it. On upgrade, each empty JS bundling or move-JS exception value, in any scope, is set to /checkout. Lists you filled in yourself are not changed.<noscript> copy.pub/ but outside pub/media, such as versioned static images, being treated as missing even though they were on disk.bin/magento mirasvit:optimize-image:optimize with a path argument reporting "No files to process" under the Webpages scan strategy. Its progress bar also started from too low a count.pub/static and other local files are still cleaned up.bin/magento mirasvit:optimize-insight:pagespeed exits with an error code..jpg and .jpeg files. Clearing a format puts it back into the queue on the next run.bin/magento mirasvit:optimize-image:reset accepts a new --format option (for example --format=gif, repeatable) that restores the originals for just that format and leaves the optimized and WebP copies of the other formats in place. This is the documented way back after excluding a format, since copies made before the exclusion are kept. An unknown format name is refused with the list of valid ones instead of matching nothing._ and % in a configured name as wildcards — previously hero_banner.jpg also matched heroXbanner.jpg. This aligns generation with the check that decides which image is actually served.bin/magento mirasvit:optimize-image:reset stopping with a fatal error part-way through when it hit an image file that exists but cannot be read. The run aborted, leaving every record it had already processed stripped of its optimized and WebP copies on disk while the rest of the table still pointed at files the run had deleted. Such a record is now removed like a missing one, and the next scan re-creates it if the file becomes readable again.gif2webp tool is missing but cwebp works) instead of reporting that WebP conversion does not work at all — and it is no longer shown on stores that keep WebP turned off. bin/magento mirasvit:optimize-image:validate now also checks for gif2webp.default cron group, so other jobs — including the order, invoice, shipment and credit memo e-mails — piled up hundreds of missed runs. The queue now only picks up images the installed tools can actually produce a result for, stops as soon as it notices the same batch coming back, and ends a run after five minutes (bulk work belongs to bin/magento mirasvit:optimize-image:optimize, which now has the same safeguards and tells you when nothing can be processed).image/x-png for a PNG, image/pjpeg for a JPEG, or a type with a charset suffix) — there was no error and no log entry, the images simply never appeared in the optimization queue. These spellings are now recognised, so the affected images get optimized.exception.log. A single URL is now handled like a list.?debug=lazy and ?debug=optimize-image debug output on the storefront. It ships turned off, so this diagnostic information is no longer visible to anyone who guesses the URL parameter on a live store; turn it on only while troubleshooting.bin/magento mirasvit:optimize-image:cleanup command removes image-optimization records for files that no longer exist on disk, and deletes the optimized/WebP copies left behind with them. Useful after purging the product image cache or deleting products. The command refuses to run (and removes nothing) when media is stored remotely or in the database, where missing files cannot be detected reliably./checkout, so JavaScript bundling no longer breaks the checkout on a fresh install. Stores that never saved a value for this field will pick up the new default (config path mst_optimize/optimize_js/bundle_js_exception) — set the field explicitly if you want bundles on checkout.checkout_index_index) limits it to a single page, full URLs and wildcards are not supported, and a lone / disables bundles across the whole store.setup:static-content:deploy failing with an "Undefined constant … BUNDLE_JS_DIR" fatal error on Mage-OS installations — the module now detects Magento's deploy component properly instead of looking for it at a fixed vendor path.?optimize_js= URL parameter being written into the page markup as given, which allowed a crafted link to inject content into the storefront HTML. Only the two valid modes are now accepted; anything else falls back to the default.0 in the iframe lazy-load exception list being silently dropped instead of used as a pattern.Blog
Andriy Kovalenko 
We are committed to being open and transparent with our customers. When you purchase our module, you automatically receive one year of free support service and free updates.
Why is this important?
- Seamless Installation and Configuration: We understand that setting up a new module can take time to configure according to your specific needs. That’s why we offer a full year of free support. Our experienced team is here to assist you with installation, configuration, and any questions you might have. We're eager to share our expertise to ensure you get the most out of your purchase.
- Stay Updated with Magento (Adobe Commerce) Releases: Magento releases new versions approximately every three months. These updates can sometimes introduce compatibility challenges. To keep your store running smoothly, we provide a year of free access to the latest versions of our modules, ensuring that you can upgrade Magento and our modules without encountering any obstacles.
- Subscription Included: Renewing your subscription ensures continued access to the latest updates and support from our team. This means you can be confident that any issues you encounter with the extension will be resolved quickly and efficiently. You can cancel your subscription at any time without any additional fees.
These are our primary. A major portion of our new clients come from referrals from our existing clients. Our professional team of developers, marketers and support staff have invested the best knowledge and experience in the field into our work, so you know you can come back to us again and again.
One year free and high quality support. We go to great lengths to provide maximum satisfaction with every module you have purchased in our store. By helping you with installation, configuration, answering your every question, we do all our best to eliminate any possible problems.
30-days money back guarantee. If you are not satisfied with our extension performance for any reason, we provide a full refund.
We constantly add new features to all our modules, and are always interested in hearing your opinion and implementing your suggested features in our future developments.
We provide an expanded user guide for every aspect of our extension, so you can find answers for all your burning questions.
You can customize extension according to your needs and requirements.
The Module is easy to install and upgrade, just follow our step-by-step user guide. Additionally, the extension is ready to use with the Hyvä theme.
No core modifications. The extension has been tested in a Magento Cloud environment and is fully compatible with it.