LCP über Produktbilder in Shopware 6 senken

LCP hängt am sichtbaren Hauptbild

LCP misst, wann das größte Element im Viewport fertig gerendert ist. In Shopware 6 ist das auf der Detailseite das Produktfoto, im Listing oft die erste Kartenreihe. CSS und JavaScript können Sie kürzen, die Messung bleibt am Bild hängen.

In einem Mandanten kamen die Packshots als 4000-Pixel-JPEG mit rund einem Drittel weißem Rand. Shopware hat daraus Thumbnails gebaut. Der Browser lud trotzdem Pixel, die niemand sieht, weil der Zuschnitt in der Quelldatei fehlte.

Weißrand aus der Mediathek schneiden

In der nativen Mediathek können Sie Dateien ersetzen, nicht aber den sichtbaren Ausschnitt setzen. Der Weg über Photoshop heißt: herunterladen, zuschneiden, neu hochladen, Thumbnails abwarten. Bei einem Sortiment mit mehreren hundert Packshots bleibt das liegen.

Mit Bild-Editor Pro öffnen Sie das Medium in der Administration, ziehen den Rahmen um das Motiv und speichern. Shopware erzeugt die Thumbnails danach neu. Für Listings hat sich 1:1 bewährt, weil die Kartenhöhe dann gleich bleibt.

1. Medium in der Mediathek öffnen und den Zuschneider auf das Motiv setzen
2. Seitenverhältnis festlegen, zum Beispiel 1:1, und speichern
3. In PageSpeed Insights die Detailseite erneut messen, nicht nur die Startseite

Danach die Detailseite messen

Messen Sie in PageSpeed Insights die URL der meistverkauften Variante, nicht die Homepage. LCP sitzt dort am Hauptbild. Wenn der Wert sich kaum bewegt, prüfen Sie zusätzlich, ob das Template width und height setzt. Fehlen die Attribute, kommt zum späten Paint oft noch ein Sprung im Layout, dazu der Artikel CLS auf Kategorieseiten.