Wie Sie die Performance Ihres Shopware-6-Shops mit 5 einfachen Tricks erhöhen

Von Ann-Kathrin Hofmann
23. Dezember 2020
Lesezeit: 3 Minuten

Die Performance ist ein entscheidender Erfolgsfaktor im E-Commerce: Laut einer Google-Studie zeigt bereits eine Beschleunigung der Seitenladezeit um 0,1 Sekunden positive Auswirkungen auf die User Experience, was zu mehr Seitenaufrufen, verbesserten Konversionsraten und einem höheren durchschnittlichen Bestellwert in Onlineshops führt. Darüber hinaus wirken sich eine schnellere Page Speed und ein verbessertes Nutzererlebnis auch positiv auf SEO aus.

Viele Onlineshops haben jedoch, was die Seitenladezeit angeht, noch ein hohes Optimierungspotential. Das lässt sich mit ein paar technischen Tricks schnell ändern: Wir zeigen Ihnen 5 Tipps, mit denen Sie die Performance Ihres Shopware-6-Shops verbessern können.

1. Komprimieren Sie Ihre Bilder

Wie die Grafik unten zeigt, wird bei einem durchschnittlichen Seitenaufruf über die Hälfte der Energie für das Laden von Bilddateien aufgewandt. Große Bilder reduzieren die Ladegeschwindigkeit Ihrer Webseite deutlich. Indem Sie also die visuellen Darstellungen im Onlineshop optimieren, verbessern Sie die Page Speed, was wiederum einen positiven Effekt auf die User Experience hat. 

Durchschnittliche Kilobyte pro Seitenaufruf nach Inhaltstyp (Quelle: Designing for Sustainability, Seite 2)

Für eine gute Performance komprimieren Sie die Bilder schon, bevor Sie sie in Shopware 6 hochladen. Was Sie beim Komprimieren der Bilddateien und deren Einbindung in den Onlineshop wissen sollten, erklären wir in diesem Blog-Beitrag genauer. 

Bei Bildern, die über die Medienverwaltung von Shopware 6 hochgeladen und eingebunden werden, gibt es darüber hinaus noch ein paar Besonderheiten zu berücksichtigen – beispielsweise die Anpassung der Bildgröße an verschiedene Bildschirmqualitäten. Wenn Sie spezielle Fragen dazu bzw. rund um die Einbindung von Medien in Shopware 6 haben, kontaktieren Sie uns gerne.

2. Generieren Sie die richtigen Thumbnails

Auch für Thumbnails gilt: je kleiner desto performanter. Überlegen Sie sich daher genau, welche Thumbnail-Größen für welchen Bereich Ihres Onlineshops sinnvoll sind. 

Bei Shopware 6 lassen sich Thumbnails direkt im Admin-Bereich erzeugen. Dabei können Sie in der Medienverwaltung selbst steuern, welche Thumbnail-Größen Sie für welchen Bereich generieren möchten.

3. Optimieren Sie das Design

Schon beim Design ihres Onlineshops sollten Sie das Thema Performance im Blick haben, um später nicht zu viel nachbessern zu müssen. Wenn Sie Icons und Logos nutzen, verwenden Sie dafür möglichst SVG-Grafiken. SVG steht für “Scalable Vector Graphics”, also skalierbare Vektorgrafik. Der entscheidende Vorteil von Vektorgrafiken ist, dass sie aus Pfaden statt aus Pixeln bestehen. Je größer die Maße einer Pixel-Grafik werden, desto größer wird auch die gesamte Dateigröße. SVGs können hingegen beliebig hochskaliert werden, ohne an Größe zu- oder an Qualität abzunehmen.  

Bevor Sie die SVG-Grafiken in den Shop einbinden, sollten Sie diese noch komprimieren. Dafür können Sie auf Web-Tools wie SVG Minifyer oder SVG OMG zurückgreifen. Darüber hinaus gibt es bei der Einbindung und Konfiguration von Icons in Shopware 6 einige weitere Besonderheiten zu beachten, die wir Ihnen gerne in einem persönlichen Beratungsgespräch erläutern.

4. Halten Sie CSS/SCSS-Dateien so klein und aufgeräumt wie möglich

Shopware 6 nutzt den CSS-Präprozessor SASS und das beliebte Frontend-CSS-Framework Bootstrap in der Version 4. Bootstrap bietet zahlreiche Features und Möglichkeiten, die Sie für das Design Ihrer Website nutzen können. Um mit Ihrem Onlineshop jedoch einen ganz individuellen Markenauftritt zu erreichen, sind eigene Styling-Elemente im Design unverzichtbar. 

Auch hier gilt: Behalten Sie bei der Umsetzung Ihres Corporate Designs immer auch die Seitenladezeit im Hinterkopf. So sollten Sie beispielsweise auf lange BASE64-Einbindungen im SCSS verzichten, da sich dadurch automatisch die generierte CSS-Datei vergrößert. Proportional zur Größe der CSS-Datei verlängert sich auch die Ladezeit. Um die Dateigröße und damit die Seitenladezeit weiter zu verringern, überprüfen Sie Ihre SCSS-Dateien auch auf nicht verwendetes Styling und entfernen Sie es.

Shopware 6 sorgt darüber hinaus für einen Performance-Vorteil, indem das System alle SCSS-Dateien automatisch zu einer all.css zusammenfasst. Zeilenumbrüche, Kommentare etc. werden dabei entfernt und das komplette Styling wird auf eine Zeile reduziert. Durch das Komprimieren wird die Dateigröße deutlich reduziert.

5. Verwenden Sie eine performante Schriftart

Shopware 6 nutzt standardmäßig die Inter – eine performante und speziell für das Web konzipierte Schriftart. Wenn Sie Ihrem Onlineshop durch die Verwendung einer anderen Schrift mehr Individualität verleihen wollen, sollten Sie darauf achten, dass diese ebenfalls für das Web optimiert und entsprechend performant ist. Dafür können Sie z.B. auf die Google Fonts zurückgreifen. Hier können Sie aus über 900 kostenlosen Fonts die passende für Ihren Onlineshop auswählen.

Welche weiteren Vorteile die Google Fonts bieten und wie Sie Ihre Seitenladezeit durch die optimale Einbindung der Schriftarten weiter verbessern, können Sie in diesem Artikel im Detail nachlesen.

Fazit

Wenn Sie diese 5 Tipps berücksichtigen, haben Sie schon eine solide Basis für einen performanten Shopware-6-Shop gelegt. Doch auch darüber hinaus birgt Shopware 6 noch großes Potential im Hinblick auf die allgemeine Performance im Frontend. Ein essentieller Faktor für eine schnelle Seitenladezeit und eine positive Benutzererfahrung ist z.B. das richtige Setup Ihres Onlineshops. Ein starker Partner an Ihrer Seite kann Ihnen dabei helfen, Ihren Shop in allen relevanten Aspekten zu optimieren und dadurch Ihren langfristigen E-Commerce-Erfolg zu sichern. 

Gerne unterstützen wir Sie dabei. Wir freuen uns auf Ihre Nachricht.

Mehr aus unserem Blog

Registrierte Kund:innen: So geht’s
14. Oktober 2021 · Lesezeit: 2 Minuten

Onlineshops sollen vor allem eines: verkaufen. Gehen Kund:innen erfolgreich durch den Check-Out, so ist schon mal viel gewonnen. Noch besser …

Weiterlesen
Shop the Look: Der Onlineshop als Inspirationsquelle
28. April 2021 · Lesezeit: 3 Minuten

Bildlastige Social-Media-Plattformen wie Pinterest und Instagram erleben seit einigen Jahren einen massiven Hype, der auch für den E-Commerce eine wichtige …

Weiterlesen
Google-Update im Mai: Page Experience und die Core Web Vitals
20. April 2021 · Lesezeit: 4 Minuten

Die Google Page Experience wird ab Mai 2021 zum neuen Ranking-Faktor des Suchmaschinen-Riesen. Um im Google-Suchranking weiterhin sichtbar zu bleiben,

Weiterlesen
Bohlsener Mühle: Onlineshop-Launch mit Shopware 6
27. Februar 2021 · Lesezeit: 2 Minuten

Die Bohlsener Mühle hat die digital.manufaktur mit dem Launch ihres Onlineshops beauftragt. Der renommierte Hersteller für ökologische Getreide-Produkte geht damit …

Weiterlesen
Hyvä im Einsatz
5. November 2021 · Lesezeit: 4 Minuten

Im Sommer haben wir mit Vinai Kopp gesprochen. Er programmiert gemeinsam mit dem Erfinder Willem Wigman am neuen Magento-2-Theme Hyvä. …

Weiterlesen

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1