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

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

dmf im HAZ-Interview: Lokales Onlineshopping
12. Oktober 2020

“Wie wird sich Hannovers Innenstadt durch den steigenden Einfluss des Onlinehandels verändern?” Diese Frage hat sich die Hannoversche Allgemeine Zeitung …

Mehr erfahren
6 Design-Tipps, mit denen Sie Ihr Google-Ranking verbessern
17. Dezember 2020

Ein in die Jahre gekommenes Shop-Design oder eine schlechte Bedienbarkeit Ihrer Website kann Ihr Suchmaschinen-Ranking negativ beeinflussen. Sie verlieren dadurch …

Mehr erfahren
Barrierefreier E-Commerce: Das sollten Shopbetreiber beachten
1. Oktober 2020

Beim Thema “Barrierefreiheit” denken die meisten von uns als erstes an Aufzüge in öffentlichen Gebäuden, ebenerdige Duschen oder rollstuhlgerechte U-Bahnen. …

Mehr erfahren
Push-Nachrichten ohne App – PWA machen’s möglich!
10. August 2020

Push-Benachrichtigungen sind ein starkes Marketinginstrument, um die Konversionsrate und die Kundenbindung im E-Commerce zu verbessern. Bisher war dieser Kommunikationskanal den …

Mehr erfahren
Neue Google-Studie: “Millisekunden machen Millionen”
2. Juli 2020

Bereits eine Verbesserung der Seitenladezeit um 0,1 Sekunden zeigt positive Auswirkungen auf Seitenaufrufe, Konversionsraten und den durchschnittlichen Bestellwert in Onlineshops. …

Mehr erfahren
Agentur-Leben: Frontend-Entwicklung bei dmf
20. Juli 2020

Seit dem 1. Juli ist Joël Teil des Frontend-Teams von dmf. Herzlich willkommen! 🙂 Wir haben die Gelegenheit genutzt, ihm …

Mehr erfahren
Erfolgreicher B2B-Commerce – Teil 1: Das erwarten Firmenkunden heute
11. Mai 2020

Aktuelle Studien belegen, dass B2B-E-Commerce immer mehr an Relevanz gewinnt: Laut einer Expertenbefragung von ibi research rechnen Branchenkenner fest damit, …

Mehr erfahren
dmf on Tour
11. Februar 2020

Sie möchten sich unverbindlich über unsere E-Commerce-Lösungen informieren, mehr über unsere PWA hubble commerce erfahren oder einfach mal die Menschen …

Mehr erfahren

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