CLS auf Shopware-Kategorieseiten verhindern

Zwei Ursachen im Produkt-Grid

In Shopware-Listings kommt CLS meist aus zwei Stellen. Erstens fehlen am <img> die Attribute width und height. Der Browser kennt den Platz nicht und schiebt Name und Preis nach, sobald die Datei da ist. Zweitens haben die Quelldateien unterschiedliche Seitenverhältnisse. Ein Hochkant-Packshot neben einem Querformat zwingt die Karten in der Zeile auf ungleiche Höhen.

Nach einem Theme-Wechsel fehlten in einem Mandanten die Maße im Listing-Partial. PageSpeed hat CLS gemeldet, obwohl die Fotos schon komprimiert waren. Erst die Attribute plus einheitlicher Zuschnitt haben das Grid ruhig gehalten.

Seitenverhältnis vor dem Grid festlegen

CSS kann eine Karte auf feste Höhe zwingen. Steht das Motiv dann gestreckt oder mit wechselndem Weißrand da, wirkt das Listing unruhig. Der Zuschnitt gehört in die Mediathek, bevor das Theme das Thumbnail einsetzt.

Legen Sie ein Format für Produktkarten fest, in der Praxis meist 1:1. Mit Bild-Editor Pro schneiden Sie jedes Medium in der Administration auf dieses Verhältnis. Nach dem Speichern erzeugt Shopware die Thumbnails neu. Produktname und Preis sitzen danach auf derselben Linie.

Template-Prüfung: Dimensionen im Twig-Block hinterlegen

Wenn Ihr Shopware-Theme Bilder ohne explizite width- und height-Attribute rendert, kann der Browser vor dem Bild-Download keinen Platz im Layout reservieren. Prüfen Sie Ihr Listing-Partial unter src/Resources/views/storefront/component/product/card/box-standard.html.twig:

{# Saubere Dimensionierung und modernes aspect-ratio im Template #}
<div class="product-image-wrapper" style="aspect-ratio: 1 / 1;">
    <img src="{{ cover.url }}"
         width="{{ cover.metaData.width }}"
         height="{{ cover.metaData.height }}"
         loading="lazy"
         decoding="async"
         alt="{{ cover.translated.alt ?? product.translated.name }}">
</div>

Nach dem Zuschnitt auf einheitliche Maße müssen die Shopware-Thumbnails über die Konsole neu generiert werden:

bin/console media:generate-thumbnails
bin/console cache:clear

1. Listing-Template prüfen: width und height am Bild setzen
2. Produktfotos in der Mediathek mit Bild-Editor Pro auf dasselbe Seitenverhältnis zuschneiden
3. Thumbnails per CLI neu generieren und Kategorieseite im Browser testen

Kategorieseite visuell prüfen

Öffnen Sie die Kategorie mit gedrosseltem Netz in den Entwicklertools. Rutschen die Preise nach, fehlen Maße oder der Zuschnitt. LCP und Dateigröße sind ein anderes Thema, dazu LCP über Produktbilder.