Pagespeed setup

Store > Configuration > Swissup > Pagespeed

Main section

Minify the HTML Content section

JavaScript Settings section

Deferred javascripts

CSS Settings section

Critical CSS (Prioritize Visible Content)

Image Processing Settings section

Optimize Catalog Images

Before images can be optimized, you will need to install the Optimizers as described in the article

sudo apt install jpegoptim
sudo apt install optipng
sudo apt install pngquant
sudo npm install -g svgo
sudo apt install gifsicle
sudo apt-get install webp

php bin/magento catalog:images:resize

Also, you can use our improved command.

bin/magento swissup:pagespeed:images:resize -h
Description:
  Creates resized and optimized product and custom images and their responsive images 0.5x 0.75x 2x 3x

Usage:
  swissup:pagespeed:images:resize [options]

Options:
  -l, --limit=LIMIT                  limit --limit=10 (default: 100 000) [default: 100000]
  -f, --filename=FILENAME            filename filter --filename=1.png
      --with-custom[=WITH-CUSTOM]    If set, the task will resize custom images [default: true]
      --with-product[=WITH-PRODUCT]  If set, the task will resize catalog images [default: true]
...

It creates resized and optimized product and some custom media images and their responsive duplicates 0.5x 0.75x 2x 3x. Custom dirs are WYSIWYG, catalog/category, easybanner, easyslide, swissup, highlight, easycatalogimg, prolabels, testimonials, mageplaza inside pub/media.

It has custom options such as:

WebP for CSS background images

WebP delivery covers <img> tags and image URLs in JavaScript. Images set via CSS background-image: url(...) are not rewritten — in theme stylesheets, <style> blocks and inline style attributes alike. They stay in their original format even when the .webp file exists next to them on disk. This matters most for hero banners, where the background image is often the LCP element.

The fix is one CSS rule: declare both formats and let the browser pick.

.hero {
    background-image: url("/media/wysiwyg/hero.jpg");
    background-image: image-set(
        url("/media/wysiwyg/hero.jpg.webp") type("image/webp") 1x,
        url("/media/wysiwyg/hero.jpg")      type("image/jpeg") 1x
    );
}

Keep the first, plain url() declaration — it is the fallback. A browser that does not understand image-set() with type() drops the second declaration and uses the first, so the worst case is the original JPEG. There is no double download: a browser never fetches the image of an overridden declaration.

image-set() with type() is supported by about 93% of browsers in use (caniuse, August 2026):

Safari 14–16 and Firefox 88 support image-set() but not type(); they fall back to the JPEG.

Use the exact WebP filename. The module looks for the WebP file next to the original in this order:

1. {name}.{ext}.webp — e.g. hero.jpg.webp
2. the same with a lowercased extension — e.g. hero.JPG → hero.jpg.webp
3. {name}.webp — e.g. hero.webp

Generated files normally follow the first form, so for hero.jpg it is hero.jpg.webp, not hero.webp. Check that the file really exists on disk before putting it into CSS — with type("image/webp") the browser commits to the WebP URL, and a missing or broken file means no background at all.

Breeze / Argento: where the theme supports it, you can move the image into the data-background-images attribute instead of CSS. The module already rewrites WebP URLs in that attribute, so no image-set() rule is needed.

Lazy loader for images

Expire Header section

DNS-prefetch section

The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible.

See also

Great! Now you might want to see previous:

• Installation
• Changelog