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.

LCP-Optimierung im Shopware-Standard: Bild-Assets statt Template-Hacks

In aktuellen Shopware-6-Versionen (bereits seit den Patch-Reihen 6.4.20.2 und 6.5) setzt der Core für das erste Galeriebild auf der Produktdetailseite (loop.first) standardmäßig bereits fetchpriority="high" und verzichtet auf Lazy Loading für das Above-the-Fold-Motiv. Manuelle Template-Overrides des Galerie-Blocks bergen zudem hohe Risiken: Sie überschreiben leicht Shopwares native Slider-Container, Bildschirmlupen (Magnifier), 3D-/Video-Player, Alt-Texte und responsive srcset-Attribute.

Der größte Hebel für den LCP liegt daher direkt in den Bild-Assets selbst: Unnötiger Weißraum vergrößert die Dateigröße und zwingt den Browser zur Skalierung. Nach dem Zuschnitt und der Optimierung in der Mediathek sollten die Thumbnails auf der CLI neu generiert und der Cache geleert werden:

# Thumbnails für geänderte Medien aktualisieren
bin/console media:generate-thumbnails

# HTTP- und Theme-Cache leeren
bin/console cache:clear

1. Medium in der Mediathek öffnen und den Zuschneider auf das Motiv setzen
2. Seitenverhältnis festlegen, zum Beispiel 1:1, und mit Bild-Editor Pro direkt speichern
3. Thumbnails aktualisieren und in PageSpeed Insights die Detailseite erneut messen

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.