Manual Page Speed Optimization.

Every optimisation in detail: images, scripts, CSS, resource hints and HTML, plus an acceptance checklist.

To the product page Get in touch

System requirements

Shopware 6.6 or 6.7 with storefront, PHP 8.2 or newer. One package covers both versions.

Installation

Install via the Plugin Suite or upload the ZIP under Extensions, install and activate. Then clear the cache.

Sensible defaults: You do not have to configure anything. The effective and uncritical options are already active.

Images

  • Lazy loading - Images outside the visible area load only when scrolled into view.
  • LCP preload - the first content image is detected and preloaded. Logos and icons are skipped.
  • Add image dimensions - missing width and height are read from the thumbnail address, otherwise from the media database. The browser reserves the space, which reduces layout shifts.
  • Thumbnails instead of originals - originals get a srcset built from the Shopware variants. An exception list is available.

Scripts and CSS

Both options are off by default because they can have side effects depending on the theme.

  • Defer scripts - scripts no longer block rendering.
  • Load CSS asynchronously - the biggest lever against render-blocking requests. Without critical inline CSS a brief flash of unstyled content is possible. After enabling, check start page, listing and checkout.

Resource hints

Preconnects and font preloads run fully automatically. The input fields are only meant for manual overrides and take precedence.

External origins are detected in the delivered HTML, at most four automatic ones, excluding your own host. For font hosts crossorigin is set, otherwise not - so the browser actually reuses the connection.

An info box in the module shows live which preconnects and fonts are currently being set.

HTML

  • Minify HTML - removes superfluous whitespace. Off by default.
  • Instant-Prefetch - preloads the target page as soon as the pointer rests on a link. On by default.

Acceptance checklist

  • Check the start page, a listing and a detail page in the browser.
  • Run the analysis in the module and look at the detected preconnects.
  • Run a measuring tool such as PageSpeed Insights before and after.
  • Only then enable deferring scripts or asynchronous CSS, one at a time and with testing.
  • Clear the cache after every change.

Things to note

If a page briefly looks unstyled after enabling "asynchronous CSS", switch the option off again - that would require critical inline CSS in the theme. If a widget disappears after "defer scripts", add it to the exception list.

Support

We answer questions directly. Write to us via the contact form.