Storefront-Performance in Shopware 6 – Core Web Vitals im Griff
Schnell verkauft besser
· René van Dinter
Bilder, Caching, Frontend-Assets: die wirkungsvollsten Hebel für schnelle Shopware-Storefronts – und warum man auf dem Mobilgerät messen sollte.
Ein schöner Shop, der lahmt, verliert Kunden – und Rankings. Google misst die Nutzererfahrung über die Core Web Vitals, und gerade im E-Commerce entscheiden Millisekunden über Absprung oder Kauf. So halte ich Shopware-6-Storefronts schnell.
Die drei Kennzahlen, die zählen
| Metrik | Was sie misst | Ziel |
|---|---|---|
| LCP | Largest Contentful Paint – wann das größte Element sichtbar ist | < 2,5 s |
| CLS | Cumulative Layout Shift – wie stark das Layout „springt" | < 0,1 |
| INP | Interaction to Next Paint – wie flott die Seite auf Eingaben reagiert | < 200 ms |
INP hat 2024 das ältere FID abgelöst und rückt die tatsächliche Reaktionsfreudigkeit in den Fokus – besonders relevant für interaktive Shop-Elemente.
Die wirkungsvollsten Hebel
Bilder
Bilder sind fast immer der größte Brocken – und der dankbarste Hebel:
- moderne Formate (WebP/AVIF), passend skaliert statt in Originalgröße
loading="lazy"für alles below the fold- feste Bildmaße, damit nichts nachträglich springt (gut für CLS)
<!-- Reserviert den Platz -> kein Layout-Sprung, besseres CLS -->
<img src="/media/produkt.webp" width="600" height="400" alt="Produktname" loading="lazy">
Caching
Der HTTP-Cache von Shopware ist Pflicht. Ausgelieferte Seiten aus dem Cache sind um Größenordnungen schneller als frisch gerenderte. Dazu: sinnvolle Cache-Zeiten und ein Reverse-Proxy davor.
JavaScript & CSS
- Kritisches CSS zuerst, den Rest nachladen
- JavaScript verzögert laden (
defer), nichts render-blockierend - jedes Plugin kritisch prüfen: Was lädt es mit? Weniger ist oft schneller.
Praxis-Tipp: Miss auf gedrosseltem Mobilgerät, nicht auf dem Entwickler-Laptop. Der Desktop-Wert täuscht – die Realität deiner Kunden ist ein Smartphone im Mobilnetz.
Messen statt raten
Ein kurzer Werkzeugkasten, den ich regelmäßig nutze:
- Lighthouse für den schnellen Überblick
- PageSpeed Insights für Felddaten echter Nutzer
- das Performance-Panel der DevTools fürs Detail
Wichtig: erst messen, dann optimieren, dann wieder messen. Sonst optimiert man Bauchgefühl.
Fazit
Performance ist kein einmaliges Projekt, sondern eine Gewohnheit. Wer Bilder, Caching und Frontend-Assets im Griff hat, hat 80 % gewonnen – und schafft nebenbei eine Grundlage, die auch der Barrierefreiheit und dem SEO zugutekommt. Ein schneller Shop ist selten Zufall, meist Handwerk.