Google PageSpeed Optimizer for Magento 2

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.

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.