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.