Top 9 Performance Optimierungen für Shopware Shops

Dieser Beitrag soll eine kurze Übersicht über die effektivsten Optimierungen in einem Shopware Shop bieten.

Natürlich lassen sich noch deutlich mehr kleinere und größere Optimierungen durchführen, jedoch hat unser Praxisalltag gezeigt, dass dies die effektivsten und effizientesten Optimierungen sind.

Minimieren von LongTasks:

Long Tasks sind Aufgaben, die länger als 50ms benötigen, um verarbeitet zu werden. In dieser Zeit ist der Hauptthread komplett mit dieser einen Aufgabe beschäftigt und kann keine weiteren Aufgaben ausführen.

Long Tasks entstehen im Shopware-Kontext häufig durch installierte Drittanbietersoftware. Diese sorgt oft für das lange Belegen des Haupt-Threads. Konkrete Beispiele sind hier eine große Anzahl von CDN’s (Content Delivery Networks) oder Fremdanwendungen dessen Code nicht beeinflusst werden kann wie zum Beispiel:

• Google AD’s
• Google Tag Manager
• HotJar

Es sollte jedoch nicht grundsätzlich auf Code von Drittanbietern verzichtet werden, sondern immer analysiert werden, welcher Code gut und welcher Code schlecht ist. Zudem sollte differenziert werden, ob der Code durch Shopware selbst hervorgerufen wird oder ob ein Fremdanbieter diesen Code zur Verfügung stellt.

Checkliste zum Entfernen von LongTasks

• Wer ist der Verursacher für Long Tasks?
• Ist der Verursacher ein Fremdanbieter?
• Wenn ja, ist dieser notwendig für den Onlineshop? Gibt es Alternativen?
• Wenn nein, kann dieser entfernt werden?
• Wenn nein, kann dieser Shopware Code optimiert oder ausgetauscht werden?

Statische Bilder optimieren:

Um keine unnötigen Ladezeiten zu verursachen, sollten die dargestellten Bilder in ihrer Größe und den Abmaßen optimiert werden. Dies kann sehr einfach mit Squoosh realisiert werden.

Außerdem sollte darauf geachtet werden, dass das richtige Dateiformat gewählt wird. Im Optimalfall sollten webP Bilder genutzt werden, da diese trotz einer Einsparung von bis zu 35% keine Darstellungsverluste mit sich bringen. Ansonsten können JPEG genutzt werden. PNG sollten nur genutzt werden, wenn es nicht anders möglich ist, da PNG Dateien nicht förderlich für eine gute Performance eines Shopware Onlineshops sind.

Zusätzlich sollte darauf geachtet werden, dass sinnvolle Thumbnail-Größen gewählt werden. Das bedeutet, dass für die mobile Darstellung kleinere Bilder genutzt werden sollten, um die so wichtige mobile Performance zu optimieren.

Server Antwortzeiten verbessern:

Serverseitig lassen sich oft Anpassungen vornehmen, die dazu führen, dass diese optimal für den Shopware Shop zugeschnitten sind und optimal performen. Es sollten die passenden Pakete mit den optimalen Ressourcen ausgewählt und außerdem die optimalen Server Einstellungen vorgenommen werden. Bedeutet, die verwendete Software immer auf den aktuellsten Stand zu bringen und wenn notwendig den Anbieter wechseln, wenn die ausgewählte Software nicht mehr zu dem gewünschten Anwendungsfall passt.

Außerdem sollte getestet werden, inwieweit die verwendeten Plugins die Performance der genutzten Server negativ beeinflussen und ob diese überhaupt notwendig sind.

Shopware zertifizierte Hosting Partner:

Der Hosting-Anbieter sollte außerdem durch Shopware zertifiziert sein, da hier somit eine optimale Ressourcennutzung sowie eine abgestimmtes Shopware Hosting gegeben ist. Außerdem kann ein optimaler und schneller Support geleistet werden, wenn Shopware spezifische Probleme auftreten.

WebFonts optimieren:

Es sollte darauf geachtet werden, dass keine Web-Fonts eingesetzt werden, die FOIT oder FOUT erzeugen.

FOIT (Flash of invisible text) entsteht dann, wenn der Text angezeigt werden soll, der Font aber nicht gerendert ist und FOUT (Flash of unstyled text) wird durch den Austausch von Fonts bedingt, da nicht direkt die korrekte Schrift geladen werden konnte.

Zusätzlich sollte darauf geachtet werden, dass auf eine Rückmeldung seitens des Onlineshops gewartet wird, bevor ein DOM-Update (Document Object Model) durchgeführt wird.

Durch das preloaden von WebFonts kann die Performance außerdem erheblich gesteigert werden. Es gibt bereits ein Plugin für die PageSpeed Preload Optimierung im Shopware Store.

Erstes Banner unabhängig der Einkaufswelten laden:

Die ersten Banner auf der Startseite sollte unabhängig der Einkaufswelten geladen werden, da die Einkaufswelten die Ladezeiten der Banner nachhaltig negativ beeinflussen.

Dies kommt besonders zum Tragen, wenn die Messpunkte des Google Page Speed betrachtet werden, da hier die Ladezeit des Banners eine essenzielle Rolle in den Metriken LCP und FCP spielen.

Slider-Elemente auf der Startseite entfernen:

Basierend auf unseren eigenen Testergebnissen sollten möglichst wenig Slider auf der Startseite eingebunden werden. Dies kann einfach getestet werden, indem die Slider entfernt werden und ein erneuter Speed-Test durchgeführt wird. Es sollte eine maßgebliche Verbesserung eintreten, wenn alle Slider entfernt werden.

Durch das schrittweise Entfernen der einzelnen Slider kann ermittelt werden, welcher Slider die Performance in welchem Maß einschränkt und dementsprechend optimiert oder entfernt werden.

Grundsätzlich gilt, umso weniger Slider, umso performanter gestaltet sich der Shopware Shop - es muss jedoch in den meisten Fällen zwischen Performance und Usability abgewogen werden.

Logo optimieren:

Logos, welche in den Onlineshop integriert werden, sollten bezüglich ihres Dateiformats und ihrer Größe optimiert werden.

Es sollte immer auf ein Logo im SVG Format zugegriffen werden, da dieses Dateiformat eine einfache Skalierbarkeit ohne Qualitätsverlust zulässt und trotzdem nur eine geringe Dateigröße vorweist.

Einstellungen der Einkaufswelten optimiert laden:

Die Einkaufswelten sollten optimiert geladen werden, um einen negativen Einfluss auf das LCP zu vermeiden.

Die Einkaufswelten sollten nicht über Ajax geladen werden, um einen schnelleren Aufbau der Einkaufswelten zu ermöglichen. Hier kann es passieren, dass Nutzer die keine gute Internetverbindung haben oder dementsprechende Hardware nutzen, Performance-Einbuße erleben. Dies wird sich jedoch mit der Zeit reduzieren und egalisieren, da mehr und mehr Nutzer Zugang zu neuer Hardware und einer besseren Internetanbindung erhalten.