Shopware 6 Pagespeed Optimierung

Die Pagespeed Optimierung für deinen Shopware 6 Onlineshop spielt eine entscheidende Rolle für den Erfolg deines E-Commerce-Geschäfts. Schnelle Ladezeiten sind ein entscheidender Faktor für die Benutzererfahrung und wirken sich positiv auf die Conversion-Rate aus. Suchmaschinen wie Google berücksichtigen ebenfalls die Seitenladegeschwindigkeit als Ranking-Signal. Durch eine gezielte Pagespeed Optimierung kannst du also nicht nur die Kundenzufriedenheit steigern, sondern auch dein SEO-Ranking verbessern.

In diesem Beitrag fassen wir alle unseren gesammelten Blog-Beiträge zum Thema zusammen und verlinken euch zusätzlich die jeweiligen Artikel, in denen ihr noch weiterführende Informationen finden werdet. Wenn euch die Beiträge weiterhelfen könnt ihr um auf dem Laufenden zu bleiben unseren Newsletter abonnieren oder euch mit uns auf Social Media vernetzen.

Übersicht:

• 1. Impact der Pagespeed-Optimierung auf Umsatz und Gewinn
• 2. Wann werden die Anpassungen spürbar sein?
• 3. Bessere Anzeigen-Preise bei Google durch bessere Ladezeiten
• 4. Was bremst meinen Shopware 6 Shop
• 5. Vorarbeit – Analyse und Tools
• 6. Pagespeed Optimierung für Shopware 6: Dein Leitfaden
• Schritt 1 – Buche einen Server der für Shopware 6 optimiert ist
• Schritt 2 – Komprimiere Bilder für mehr Pagespeed
• Schritt 3 – Nutze Caching in Shopware 6 für mehr Pagespeed
• Schritt 4 – Minimiere CSS- und JavaScript-Dateien
• Schritt 5 – Schnellere Ladezeit durch weniger Cookies
• Schritt 6 – Lazy Loading in Shopware 6 verwenden
• Schritt 7 – Deaktiviere den Admin Worker und nutze Cronjobs
• Schritt 8 – Verwende Browser Caching
• Schritt 9 – Verwende Aktuelle PHP und Datenbank Versionen
• Schritt 10 – Vermeide 404 Fehlermeldungen
• Schritt 11 – Erhöhe das Memory Limit deines Shopware 6 Shops
• Schritt 12 – Lade Bilder über ein Content Delivery Network
• Schritt 13 – Vermeide die Nutzung des HTTP/1.1 Protokolls
• 7. Weiterführende Links

1. Impact der Pagespeed-Optimierung auf Umsatz und Gewinn

Die Pagespeed Optimierung macht sich in der Regel durch 2 Verbesserungen bezahlt. Erstens optimiert man durch verbesserte Ladezeiten in seinem Shopware 6 Shop für höhere Conversion-Rates – also mehr Käufe bei gleicher Besucherzahl – und zweitens erreichst du in Google bessere Rankings und damit oben drauf auch noch einmal mehr Besucher / potentielle Kunden als vorher.

Angenommen, der Shop hat 10.000 Besucher pro Monat, und die Conversion-Rate steigt nach der Optimierung auf 3,5%. Die Produkte kosten im Durchschnitt 100 € und bringen einen Gewinn von 15 € pro Verkauf ein.

Aktuelle Situation:

• Ladezeit: 2 Sekunden
• Conversion-Rate: 2%
• Anzahl der monatlichen Besucher: 10.000
• Käufe = 10.000 Besucher * 0,02 Conversion-Rate = 200 Käufe
• Umsatz = 200 Käufe * 100 € (durchschnittlicher Produktwert) = 20.000 €
• Gewinn = 200 Käufe * 15 € (Gewinn pro Verkauf) = 3.000 €

Nach Optimierung der Ladezeiten und bessere Conversion-Werte:

• Ladezeit: 1 Sekunde
• Conversion-Rate: 3,5%
• Anzahl der monatlichen Besucher: 10.000
• Käufe = 10.000 Besucher * 0,035 Conversion-Rate = 350 Käufe
• Umsatz = 350 Käufe * 100 € (durchschnittlicher Produktwert) = 35.000 €
• Gewinn = 350 Käufe * 15 € (Gewinn pro Verkauf) = 5.250 €

Nach verbessertem Ranking durch optimierte Ladezeiten:

• Ladezeit: 1 Sekunde
• Conversion-Rate: 3,5%
• Anzahl der monatlichen Besucher: 11.000 (10.000 + 10% zusätzliche Besucher)
• Käufe = 11.000 Besucher * 0,035 Conversion-Rate = 385 Käufe
• Umsatz = 385 Käufe * 100 € (durchschnittlicher Produktwert) = 38.500 €
• Gewinn = 385 Käufe * 15 € (Gewinn pro Verkauf) = 5.775 €

Die Optimierung der Ladezeiten und die Verbesserung der Conversion-Rate führen zu einem erhöhten Umsatz von 35.000 € pro Monat und einem Gewinn von 5.250 € pro Monat. Durch das verbesserte Ranking kommen zusätzlich 10% mehr Besucher auf die Seite, was den Umsatz auf 38.500 € pro Monat und den Gewinn auf 5.775 € pro Monat steigert.

Diese Zahlen verdeutlichen, wie sich die Kombination aus Ladezeiten-Optimierung, besseren Conversion-Werten und verbessertem Ranking positiv auf den Umsatz und Gewinn eines Online-Shops auswirken kann. (Ja kann, nicht MUSS – grundsätzlich wird der Unterschied bei Seiten die sehr lahm sind – wie z.B. 2, 3 oder noch mehr Sekunden wesentlich deutlicher zu spüren sein). Die fortlaufende Pflege und Optimierung der Web Core Vitals und anderer Performance-Aspekte können langfristige Vorteile für den Erfolg des Shops bieten.

2. Wann werden die Anpassungen spürbar sein?

Ausgehend von unserer obigen Rechnung könnte man sagen: Nach der Optimierung der Ladezeiten und der besseren Conversion-Rate werden die positiven Auswirkungen auf den Umsatz und Gewinn sofort spürbar sein. Die verbesserte Conversion-Rate führt zu mehr Verkäufen und somit zu einem unmittelbaren Anstieg des Umsatzes auf 35.000 € pro Monat und des Gewinns auf 5.250 € pro Monat.

Hingegen wird das verbesserte Ranking durch die optimierten Ladezeiten grundsätzlich zeitversetzt wirken und nicht von heute auf morgen spürbar sein. Die Verbesserung des Rankings hängt von verschiedenen Faktoren ab, darunter die Wettbewerbssituation, die Beliebtheit der Keywords und die allgemeine Suchnachfrage. Es kann einige Zeit dauern, bis die Suchmaschinen die Veränderungen registrieren und die Seite im Ranking ansteigen lassen.

Zudem ist es wichtig zu beachten, dass nicht alle Verbesserungen im Ranking signifikante Auswirkungen haben. Eine geringfügige Verschiebung von einer weniger gefragten Position auf eine leicht bessere Platzierung kann möglicherweise nicht zu drastischen Änderungen im Besucherverkehr führen. Ein bedeutender Anstieg im Ranking, z.B. von Seite 10 auf Seite 1 der Suchergebnisse, kann hingegen zu einem erheblichen Anstieg der organischen Besucherzahlen führen.

Die langfristigen Auswirkungen der verbesserten Ladezeiten und des besseren Rankings können jedoch zusammenwirken und den Umsatz und Gewinn des Online-Shops nachhaltig steigern. Die fortlaufende Pflege und Optimierung der Web Core Vitals sowie die Beobachtung und Anpassung der SEO-Strategie sind daher von großer Bedeutung, um den Erfolg des Shops langfristig zu fördern.

Trage hier deine eigenen Werte ein und prüfe wie sich die Conversion-Rate-Optimierung auf deine Zahlen auswirkt.

Du willst das Script für den Rechner auf deiner eigenen Seite verwenden? Kein Problem, hier ist der Code: https://codepen.io/great2gether/pen/jOQXOjP

3. Bessere Anzeigen-Preise bei Google durch bessere Ladezeiten

Die Anzeigenpreise bei Google Ads können bei schnelleren Ladezeiten eines Shopware 6 Shops sinken, weil Google die Nutzererfahrung als einen wichtigen Faktor für das Anzeigenerlebnis betrachtet. Wenn eine Webseite schnell geladen wird, führt dies zu einer positiven Nutzererfahrung, da die Besucher weniger Zeit darauf warten müssen, bis die Seite vollständig angezeigt wird.

Eine bessere Nutzererfahrung hat mehrere Vorteile:

1. Niedrigere Absprungrate: Wenn eine Webseite schnell geladen wird, ist die Wahrscheinlichkeit geringer, dass Besucher die Seite vorzeitig verlassen, weil sie nicht lange warten wollen. Eine niedrigere Absprungrate signalisiert Google, dass die Webseite relevant und ansprechend ist, was sich positiv auf das Qualitätsranking auswirken kann.
2. Höhere Interaktionsrate: Mit schnelleren Ladezeiten können Nutzer schneller auf die Inhalte zugreifen und mit der Webseite interagieren. Sie sind eher bereit, auf Anzeigen zu klicken und mit den angebotenen Produkten oder Dienstleistungen zu interagieren, was zu einer höheren Interaktionsrate führen kann.
3. Bessere Conversion-Raten: Wenn Besucher aufgrund der schnellen Ladezeiten länger auf der Webseite bleiben und eine angenehme Nutzererfahrung haben, steigt die Wahrscheinlichkeit, dass sie eine Conversion durchführen, z. B. einen Kauf tätigen oder ein Formular ausfüllen. Höhere Conversion-Raten bedeuten, dass die Anzeigen effektiver sind, was wiederum zu einem besseren Qualitätsfaktor führen kann.

Google belohnt Websites mit einer guten Nutzererfahrung, indem es deren Anzeigen relevanter und effektiver macht. Ein höherer Qualitätsfaktor bedeutet, dass Werbetreibende weniger für ihre Anzeigen zahlen müssen, um eine gute Positionierung und Sichtbarkeit in den Google-Suchergebnissen zu erreichen. Daher können die Anzeigenpreise bei Google Ads sinken, wenn die Ladezeiten eines Shopware 6 Shops optimiert sind und die Webseite eine bessere Nutzererfahrung bietet.

4. Was bremst meinen Shopware 6 Shop

Mit der Umstellung auf Shopware 6 wurden viele Performance-Einstellungen, die zuvor zur Verbesserung der Ladezeiten genutzt wurden, obsolet. Die neue Version von Shopware 6 bietet von Haus aus eine optimierte Umgebung für gute Performance und schnelle Ladezeiten. Dennoch ist es entscheidend, zusätzliche Inhalte, Plugins und Features, insbesondere Bilder, effizient zu implementieren, um die Ladezeiten minimal zu halten. Auch ein gutes Webhosting oder ein schneller Server ist insbesondere bei hohen Besucherzahlen essentiell!

In der gleichen Reihenfolge konnten wir die folgenden Dinge grundsätzlich als größte Spaßbremsen in Shopware 6 Shops identifizieren:

• a) zu große Bilder,
• b) zu viele Plugins,
• c) nicht optimierter JavaScript/CSS-Code,
• d) zu viele oder falsch geladene Tracking Codes,
• e) nicht konfigurierte Caching-Einstellungen,
• f) unzureichendes Hosting.

Es ist ratsam, den Quellcode der Seite regelmäßig auf ungenutzten JavaScript- oder CSS-Code zu überprüfen, um unnötige Belastungen zu vermeiden, die sich im Laufe der Zeit ansammeln können. Ebenso sollte die Anzahl der installierten Plugins überwacht werden und nicht benötigte sollten deaktiviert oder entfernt werden, um eine maximale Performance zu gewährleisten.

Insgesamt ist zu beachten, dass schlechte Ladezeiten und Performance-Werte oft auf eine nachlässige Verwaltung von installierten Plugins und unnötigem Code zurückzuführen sind. Eine sorgfältige Optimierung und Überwachung des Shops können dazu beitragen, eine reibungslose Benutzererfahrung und eine höhere Kundenzufriedenheit zu gewährleisten.

5. Analyse und Tools

Bevor es mit der Optimierung losgehen kann benötigen wir eine Liste für unsere vorher- und nachher Werte. Hierbei können wir auf kostenlose und kostenpflichtige Tools zurückgreifen. Wir stellen euch hier in aller Knäppe einmal unserer Vorhensweise so wie die Tools unserer Wahl vor.

Google Chrome Lighthouse Audit

Google Lighthouse ist ein kleines Browser Addon das wir nach Installierung in unseren Developer Tools verwenden können um mehr über unsere Seite zu erfahren.

Such einfach mal im Chrome webstore nach Lighthouse oder klickt auf den Link hier:
https://chrome.google.com/webstore/search/Lighthouse?hl=de

Bevor wir Lighthouse verwenden, öffnen wir Google Chrome im Inkognito-Modus, um eine optimale Umgebung für das Audit zu gewährleisten. Der Inkognito-Modus stellt sicher, dass etwa installierte Browser-Plugins keinen Einfluss auf die gemessene Performance haben und das Ergebnis nicht verfälscht wird.

Nachdem der Inkognito-Modus aktiviert ist, öffnen wir die Developer Tools, indem wir mit einem Rechtsklick auf die Seite das Dropdown-Menü öffnen und den Punkt „Untersuchen“ auswählen. Alternativ können wir auch das entsprechende Tastenkürzel verwenden:

Tastenkürzel für Windows: F12 oder Strg + Shift + I

Tastenkürzel für Mac: Command + Alt + I

Durch die Verwendung von Google Lighthouse und die Kombination mit dem Inkognito-Modus und den Developer Tools können wir eine umfassende Pagespeed-Analyse durchführen und wertvolle Erkenntnisse gewinnen. So können wir gezielt an der Optimierung der Ladezeiten arbeiten und eine bessere Performance für den Shopware 6 Onlineshop erreichen.

Für unsere Zwecke reicht es wenn wir auf der rechte Seite der Einstellungen das Häkchen ausschließlich bei Performance setzen.

Um aussagekräftige Werte zu haben empfiehlt es sich für beide Devices einen Audit zu erstellen, also Mobile und Desktop.

So sieht z.B. der Bericht einer leeren Shopware 5 Installation mit der Standard Startseite aus:

Für unseren vorher und nachher Vergleich sollten wir uns also diese 5 Werte notieren:

• First Contentful Paint
• Largest Contentful Paint
• Total Blocking Time
• Cumulative Layout Shift
• Speed Index

Wer sind diese Core Web Vitals?

Die Core Web Vitals sind eine Reihe von Metriken, die von Google entwickelt wurden, um die Benutzererfahrung von Webseiten zu bewerten. Diese Metriken sind entscheidend für die Leistung und Benutzerfreundlichkeit einer Webseite und haben Auswirkungen auf das Ranking in den Suchergebnissen.

First Contentful Paint (FCP): Dies ist die Zeit, die es dauert, bis das erste sichtbare Element auf einer Webseite geladen wird. Es kann Text, ein Bild, ein Video oder ein anderes Element sein. Ein schneller FCP ist wichtig, da er den Nutzern zeigt, dass die Seite aktiv geladen wird und sie bald Inhalte sehen können.

Largest Contentful Paint (LCP): Diese Metrik misst die Zeit, die es dauert, bis der Hauptinhalt einer Webseite vollständig geladen und sichtbar ist. Der Hauptinhalt kann beispielsweise ein großer Textblock oder ein Hauptbild sein. Ein schneller LCP ist entscheidend, da es den Nutzern ermöglicht, schnell auf die relevanten Informationen zuzugreifen.

Total Blocking Time (TBT): Diese Metrik zeigt die Zeit an, die der Browser benötigt, um auf Benutzereingaben zu reagieren, nachdem das erste sichtbare Element geladen wurde. Wenn eine Webseite viele Skripte ausführt, kann dies zu einer längeren TBT führen, was die Interaktivität der Seite beeinträchtigen kann. Eine kurze TBT ist daher wichtig, um eine reibungslose Benutzererfahrung zu gewährleisten.

Cumulative Layout Shift (CLS): Diese Metrik bewertet, wie stabil die Layouts einer Webseite sind, während sie geladen wird. Wenn sich Elemente plötzlich verschieben, während der Benutzer mit der Seite interagiert, kann dies zu einer schlechten Benutzererfahrung führen, da es zu unerwarteten Klicks oder Fehlern kommen kann. Ein niedriger CLS-Wert ist daher wünschenswert.

Speed Index: Der Speed Index misst den Geschwindigkeitsverlauf des Seitenaufbaus. Es zeigt an, wie schnell die Inhalte auf einer Webseite sichtbar werden. Ein niedriger Speed Index bedeutet, dass die Inhalte schnell geladen werden, was für die Nutzererfahrung von großer Bedeutung ist.

Google Lighthouse Audits verwenden diese Core Web Vitals, um die Leistung einer Webseite zu bewerten und Webentwicklern hilfreiche Informationen zu geben, wie sie die Benutzererfahrung ihrer Seiten verbessern können. Es ist wichtig, diese Metriken zu optimieren, um eine schnellere und angenehmere Nutzererfahrung zu bieten und auch positiv von Google in den Suchergebnissen bewertet zu werden.

Bei Shopware 6 Shops, bei denen es erkennbar etwas spezifisches zu verbessern gibt, wird in dem Ergebnis ein zusätzlicher Bereich Opportunities / Empfehlungen angezeigt. Hier bekommt man jede Menge heiße Spuren bei der Pagespeed Optimierung deines langsamen Shopware 6 Shops.

Hier einmal am Beispiel der google.de Startseite auf Desktop. Es wird empfohlen ungenutztes JavaScript zu reduzieren.

Google PageSpeed Insights

Google PageSpeed Insights ist ein weiteres wertvolles Tool, das bei der Analyse des Ist-Zustands und der Pagespeed-Optimierung von Shopware 6 Shops eine wichtige Rolle spielen kann. Durch die Verwendung von PageSpeed Insights können Shopbetreiber und Entwickler wertvolle Einblicke in die Performance ihrer Webseite gewinnen und potenzielle Verbesserungsbereiche identifizieren.

Mit PageSpeed Insights kann die Ladezeit einer Webseite bewertet werden, sowohl für Desktop als auch für mobile Geräte. Das Tool analysiert die Webseite und gibt eine Punktzahl auf einer Skala von 0 bis 100 aus, wobei höhere Punktzahlen auf eine bessere Performance hinweisen. Zudem liefert es detaillierte Informationen und Empfehlungen zu verschiedenen Aspekten, die die Pagespeed beeinflussen, wie zum Beispiel:

• Optimierung von Bildern: PageSpeed Insights zeigt an, ob Bilder auf der Webseite optimiert werden können, um die Dateigröße zu reduzieren und die Ladezeit zu verkürzen.
• Caching-Einstellungen: Das Tool gibt Empfehlungen zur korrekten Konfiguration von Caching, um wiederkehrende Besucher schneller bedienen zu können.
• Eliminierung von Render-Blocking-Resourcen: PageSpeed Insights identifiziert ressourcenintensive Elemente, die das Rendering der Seite blockieren und schlägt Möglichkeiten vor, wie diese optimiert oder verschoben werden können.
• Komprimierung von CSS, JavaScript und HTML: Das Tool erkennt nicht komprimierte oder unnötig große CSS-, JavaScript- oder HTML-Dateien und empfiehlt entsprechende Komprimierungen.

Also alles in allem eine Runde Sache, trotzdem bevorzuge ich das Lighthouse Audit Tool, was im Endeffekt genau die selben Informationen liefert, aber eben näher am Shop dran ist.

Ahrefs

Ahrefs ist ein leistungssvolles SEO-Tool, das Website-Besitzern eine umfassende Analyse der SEO-Gesundheit ihrer Webseite bietet. Obwohl Ahrefs nicht speziell für die Pagespeed-Optimierung entwickelt wurde, kann es dennoch wertvolle Einblicke in die Performance liefern, die für die Geschwindigkeit und Benutzererfahrung relevant sein können. Mit Ahrefs können Website-Betreiber Backlinks, Keywords, Rankings und mehr analysieren, um mögliche SEO-Probleme aufzudecken, die sich auch auf die Ladezeiten auswirken könnten. Eine saubere SEO-Strategie trägt dazu bei, die technische Leistung der Webseite zu unterstützen und somit die Ladezeiten zu optimieren.

GTmetrix

GTmetrix ist ein spezialisiertes Tool zur Messung der Ladezeit und Performance von Webseiten. Es bietet umfassende Berichte über die Seitenladezeiten und identifiziert verschiedene Faktoren, die die Performance beeinflussen können. Zu den analysierten Aspekten gehören beispielsweise Serverantwortzeiten, Caching, Bilderoptimierung, Komprimierung und vieles mehr. GTmetrix liefert konkrete Daten und Empfehlungen zur Optimierung der Ladezeiten. Durch die Verwendung von GTmetrix können Shopbetreiber gezielt Ladezeitprobleme identifizieren und beheben, um eine schnellere und effizientere Webseite zu erreichen.

Sonstige Tools zur Shopware 6 Pagespeed Optimierung

Weitere interessante Tools auf die wir während unseren Recherchen gestoßen sind sind:

• https://www.webpagetest.org/
• https://tools.pingdom.com/
• https://www.screamingfrog.co.uk/seo-spider/

Bei der Kombination von Ahrefs und GTmetrix erhalten Shopbetreiber und Entwickler ein umfassendes Bild der aktuellen Performance ihres Shopware 6 Shops. Ahrefs hilft dabei, mögliche SEO-Aspekte zu überprüfen, die sich auf die Ladezeiten auswirken könnten, während GTmetrix spezifische Ladezeitprobleme aufdeckt. Durch die umfassende Analyse können gezielte Optimierungsmaßnahmen durchgeführt werden, um die Ladezeiten zu verkürzen und die Benutzererfahrung zu verbessern.

6. Pagespeed Optimierung für Shopware 6: Dein Leitfaden

In diesem Leitfaden erwartest du umfangreiche Informationen und praktische Tipps, wie du die Pagespeed-Performance deines Shopware 6 Onlineshops maximieren kannst. Die hier aufgeführten Schritte werden dir dabei helfen, die Ladezeiten zu verkürzen, die Conversion-Raten zu steigern und die Zufriedenheit deiner Kunden zu erhöhen. Entdecke die neuesten Best Practices und bewährten Methoden zur Pagespeed-Optimierung, um einen schnellen, effizienten und erfolgreichen Onlineshop zu gewährleisten.

Schritt 1 – Buche einen Server der für Shopware 6 optimiert ist

Das richtige Hosting für Shopware 6 ist von entscheidender Bedeutung, da es einen erheblichen Einfluss auf den Pagespeed und die Leistung der Webseite hat. Hier sind die wichtigsten Aspekte, die sich auf den Pagespeed von Shopware 6 auswirken:

• Serverleistung: Die Leistung des Servers, auf dem die Shopware 6 Webseite gehostet wird, ist ein entscheidender Faktor für die Ladezeit. Ein leistungsstarker Server mit ausreichend CPU- und RAM-Ressourcen kann die Anfragen schneller verarbeiten und die Webseite reibungsloser laden.
• SSD und NVMe SSD Platten: Die Verwendung von SSD (Solid State Drive) und NVMe SSD Platten anstelle herkömmlicher Festplatten kann die Ladezeit erheblich verbessern. SSDs sind schneller und zuverlässiger als herkömmliche Festplatten und ermöglichen eine schnellere Datenübertragung.
• Standort des Servers: Die geografische Entfernung zwischen dem Serverstandort und den Besuchern der Webseite kann die Ladezeit beeinflussen. Ein Server, der sich geografisch nahe an den Zielgruppen befindet, kann die Latenz reduzieren und die Seiten schneller laden.
• CDN (Content Delivery Network): Die Verwendung eines Content Delivery Networks kann die Ladezeiten weiter verbessern. Ein CDN verteilt statische Inhalte wie Bilder, CSS und JavaScript auf Servern in verschiedenen Regionen, wodurch die Dateien schneller geladen werden können.

Insgesamt ist das richtige Hosting mit SSD und NVMe SSD Platten sowie eine sorgfältige Optimierung dieser Aspekte von großer Bedeutung, um die Ladezeit von Shopware 6 zu optimieren und eine schnelle, reibungslose Benutzererfahrung zu gewährleisten. Ein schneller Pagespeed kann nicht nur die Kundenzufriedenheit erhöhen, sondern auch das SEO-Ranking verbessern und die Conversion-Raten steigern. Daher ist die Investition in ein leistungsstarkes Hosting und eine gründliche Pagespeed-Optimierung für den Erfolg eines Shopware 6 Shops unerlässlich.

Unsere Empfehlung für optimales Shopware 6 Hosting – Timme Hosting (vServer / Managed Server)

Schritt 2 – Komprimiere Bilder für mehr Pagespeed

Reduziere die Dateigröße von Bildern, ohne dabei die Qualität zu beeinträchtigen, um die Ladezeit deiner Seiten zu verkürzen.

Um die Bilder in Shopware 6 effektiv zu komprimieren und die Ladezeiten deines Onlineshops zu verbessern, kannst du folgende Schritte befolgen:

• Bildgrößen optimieren: Zunächst solltest du sicherstellen, dass die Bildgrößen deinen tatsächlichen Anforderungen entsprechen. Oft werden hochauflösende Bilder hochgeladen, die für das Web nicht benötigt werden. Verwende Bildbearbeitungssoftware, um die Bilder auf die benötigte Größe zu skalieren, bevor du sie hochlädst. Dadurch wird die Dateigröße reduziert und die Ladezeit verkürzt.
• Bildkomprimierungstools verwenden: Es gibt verschiedene Online-Tools und Software, die speziell für die Bildkomprimierung entwickelt wurden. Diese Tools reduzieren die Dateigröße der Bilder, ohne dabei die sichtbare Qualität signifikant zu beeinträchtigen. Beliebte Optionen sind z.B. TinyPNG, ImageOptim oder jpegmini, das zudem auch eine Funktion hat um Videos zu minifizieren.
• Verlustfreie vs. verlustbehaftete Komprimierung: Du kannst zwischen verlustfreier und verlustbehafteter Komprimierung wählen. Verlustfreie Komprimierung reduziert die Dateigröße, ohne sichtbare Qualitätseinbußen zu verursachen, während verlustbehaftete Komprimierung eine stärkere Reduzierung der Dateigröße mit einer minimalen sichtbaren Qualitätseinbuße ermöglicht. In den meisten Fällen ist eine verlustbehaftete Komprimierung ausreichend und führt zu deutlich kleineren Dateigrößen.
• Bildformate optimieren: Die Wahl des richtigen Bildformats ist entscheidend. Für Bilder mit vielen Farben eignet sich das JPEG-Format, während PNG für Bilder mit transparenten Hintergründen oder einfacheren Grafiken besser geeignet ist. Das WebP-Format bietet eine weitere Möglichkeit, da es sowohl verlustfreie als auch verlustbehaftete Komprimierung bietet, jedoch nicht von allen Browsern unterstützt wird.

Das Prinzip der Bildkomprimierung lässt sich mit dem Packen eines Koffers vergleichen. Wenn du auf eine Reise gehst, möchtest du möglichst viele nützliche Dinge in deinen Koffer packen, aber gleichzeitig möchtest du auch nicht, dass er zu schwer und unhandlich wird. Also wählst du sorgfältig aus, was du einpackst, und rollst vielleicht deine Kleidung zusammen, um Platz zu sparen. Ähnlich verhält es sich mit der Bildkomprimierung – du reduzierst die Dateigröße, ohne dabei die Qualität zu beeinträchtigen, damit die Bilder schneller geladen werden können.

Die Optimierung der Bildgrößen ist vergleichbar mit dem Zuschneiden von Fotos für einen Rahmen. Du möchtest sicherstellen, dass das Bild perfekt in den Rahmen passt, ohne dass dabei Teile davon abgeschnitten werden oder der Rahmen zu groß ist. Genauso passt du die Bildgrößen an die tatsächlichen Anforderungen deiner Webseite an, um die optimale Darstellung und Ladezeit zu erreichen.

Der Unterschied zwischen verlustfreier und verlustbehafteter Komprimierung kann mit dem Komprimieren von Dateien in einem Zip-Ordner erklärt werden. Verlustfreie Komprimierung ist vergleichbar mit dem Einpacken von Dateien, ohne dass dabei Daten verloren gehen. Verlustbehaftete Komprimierung hingegen ist wie das Komprimieren von Dateien mit etwas Qualitätseinbußen, aber dafür erzielst du eine stärkere Reduzierung der Dateigröße.

Die Auswahl des richtigen Bildformats kann mit der Wahl der richtigen Werkzeuge für verschiedene Aufgaben verglichen werden. Du würdest keine Schraube mit einem Hammer eindrehen, genauso solltest du das richtige Bildformat für den Inhalt wählen. Wähle das JPEG-Format für hochauflösende Bilder und PNG für Grafiken mit transparenten Hintergründen oder einfacheren Designs, um die bestmögliche Qualität und Dateigröße zu erhalten.

Durch die regelmäßige Überprüfung der Bildkomprimierung, besonders bei neuen Produkten oder Bildern, kannst du sicherstellen, dass deine Webseite immer optimal performt, ähnlich wie bei der regelmäßigen Pflege von Dingen in deinem Haushalt, um sie in einem einwandfreien Zustand zu halten. Indem du diese Prinzipien der Bildkomprimierung im Shopware 6 Onlineshop anwendest, kannst du die Leistung steigern und Besuchern eine schnellere und angenehmere Nutzererfahrung bieten.

Das kannst du entweder in deinem Prozess der Bild-Datei Erstellung für deinen Shop integrieren oder verwendest ein Plugin wie TinyPNG | Bildkomprimierung ohne Aufwand.

Noch mehr Pagespeed in Sachen Bilder in Shopware 6 erreichen wir durch die Verwendung von webp Dateien statt jpg & png Dateien bestenfalls in Kombination mit der Nutzung eines CDN. Mehr sazu weiter unten.

Schritt 3 – Nutze Caching in Shopware 6 für mehr Pagespeed

Caching nutzen: Setze Caching-Mechanismen ein, um häufig verwendete Seiten und Ressourcen zwischenspeichern zu können und so die Ladezeiten zu verkürzen.

Shopware 6 bietet verschiedene Caching-Mechanismen, die dazu dienen, häufig verwendete Seiten und Ressourcen zu zwischenspeichern. Das Ziel ist es, die Ladezeiten zu verkürzen und eine schnellere Auslieferung der Inhalte an die Besucher des Onlineshops zu ermöglichen. Hier sind die wichtigsten Aspekte des Cachings in Shopware 6:

• Seiten-Caching: Shopware 6 ermöglicht das Cachen von Seiten, sodass bereits generierte Seiteninhalte zwischengespeichert werden. Dadurch müssen die Seiten nicht bei jedem Aufruf erneut generiert werden, was die Ladezeit deutlich verkürzt. Das Standardseitencaching kann aktiviert werden, und es besteht auch die Möglichkeit, individuelles Caching für bestimmte Seiten einzurichten. Das ist besonders nützlich für statische Seiten oder Seiten, die sich nur selten ändern.
• HTTP-Caching: Durch die Verwendung von HTTP-Caching-Headern können bestimmte Ressourcen wie Bilder, Stylesheets und JavaScript-Dateien im Browser des Benutzers gespeichert werden. Diese Ressourcen werden dann beim nächsten Aufruf der Seite nicht erneut vom Server heruntergeladen, sondern direkt aus dem Cache des Browsers geladen. Dadurch werden wiederholte Seitenaufrufe deutlich schneller.
• Cache-Invalidierung: Um sicherzustellen, dass die zwischengespeicherten Inhalte immer aktuell sind, verfügt Shopware 6 über eine Cache-Invalidierungsfunktion. Wenn Änderungen an Produkten, Kategorien oder anderen Inhalten vorgenommen werden, wird der entsprechende Cache automatisch invalidiert, und die neuen Inhalte werden beim nächsten Seitenaufruf erneut generiert und in den Cache geschrieben.
• Varnish-Integration: Varnish ist ein Reverse-Proxy-Cache, der vor dem eigentlichen Webserver geschaltet wird und häufig verwendete Seiten und Ressourcen speichert. Shopware 6 kann nahtlos mit Varnish integriert werden, um die Ladezeiten weiter zu verbessern und die Serverlast zu reduzieren.

Caching ist eine wichtige Technik, um die Leistung und Geschwindigkeit eines Onlineshops zu optimieren. Indem häufig verwendete Seiten und Ressourcen zwischengespeichert werden, kann Shopware 6 eine schnellere Auslieferung der Inhalte ermöglichen und eine reibungslose Benutzererfahrung bieten. Es ist jedoch wichtig, den Cache regelmäßig zu überprüfen und bei Bedarf zu leeren oder zu invalidieren, um sicherzustellen, dass die Besucher stets aktuelle Inhalte erhalten.

Beim Caching empfehlen empfehlen wir unbedingt die Verwendung von Cronjobs die dafür sorgen, dass der Cache täglich geleert und und kurz darauf wieder aufgewärmt wird. Bei der Verwendung von Plugins, bei denen beispielsweise Preise nur dann angezeigt werden sollen, wenn ein User angemeldet ist kann es durch das Caching jedoch zu Problemen kommen.

Schritt 4 – Minimiere CSS- und JavaScript-Dateien

In Shopware 6 ist es wichtig, CSS- und JavaScript-Dateien zu minimieren, um die Ladezeiten deines Onlineshops zu optimieren. Das bedeutet, dass unnötige Leerzeichen, Zeilenumbrüche und Kommentare aus den Dateien entfernt werden, um ihre Größe zu reduzieren. Durch die Minimierung werden die Dateigrößen kleiner, was zu einer schnelleren Übertragung und einer beschleunigten Darstellung der Webseite führt.

Aspekte zur Minimierung von CSS- und JavaScript-Dateien in Shopware 6:

Shopware Theme Compiler: Shopware 6 verfügt über einen Theme Compiler, der die CSS- und JavaScript-Dateien automatisch minimiert und kombiniert. Wenn du Anpassungen an den Styles oder Skripten in deinem Shopware-Theme vornimmst, wird der Compiler diese Dateien bei der Erstellung des finalen Themes minimieren und optimieren.

Trennung von Entwicklungs- und Produktionsumgebungen: Es ist ratsam, eine klare Trennung zwischen der Entwicklungs- und Produktionsumgebung zu haben. Während der Entwicklung ist es hilfreich, unminimierte CSS- und JavaScript-Dateien zu verwenden, um die Fehlersuche und das Debugging zu erleichtern. In der Produktionsumgebung sollten jedoch die minimierten Dateien verwendet werden, um die bestmögliche Leistung zu erzielen.

Verwendung von Build-Tools: Wenn du Shopware 6 mit benutzerdefinierten Anpassungen und Erweiterungen erweiterst, kannst du Build-Tools wie Webpack, Gulp oder Grunt verwenden, um CSS- und JavaScript-Dateien zu minimieren. Diese Tools ermöglichen eine automatisierte Minimierung und Optimierung deiner Dateien während des Entwicklungsprozesses.

CSS-Sprites und Icon Fonts: Die Verwendung von CSS-Sprites oder Icon Fonts anstelle einzelner Bilddateien kann die Anzahl der HTTP-Anfragen reduzieren und somit die Ladezeiten verbessern. Indem mehrere Bilder in einem einzigen Spritesheet oder einer Schriftart kombiniert werden, verringert sich die Anzahl der Serveranfragen und damit auch die Ladezeit der Webseite.

Lazy Loading von JavaScript: Wenn möglich, solltest du das Lazy Loading von JavaScript-Dateien in Betracht ziehen. Das bedeutet, dass bestimmte JavaScript-Dateien nur geladen werden, wenn sie tatsächlich benötigt werden, z. B. wenn der Benutzer eine bestimmte Aktion ausführt. Dies reduziert die initiale Ladezeit der Seite.

Durch die Minimierung von CSS- und JavaScript-Dateien kannst du die Performance deines Shopware 6 Onlineshops verbessern und eine schnellere Ladezeit für deine Besucher erreichen. Achte darauf, dass du immer die neuesten Best Practices zur Optimierung von CSS und JavaScript befolgst, um eine optimale Leistung zu gewährleisten.

Plugin Tipp:  Frosh HTML Minify plugin – kostenlos 

„Dieses Plugin bietet Besuchern minimiertes HTML und minimiertes und kombiniertes Inline-JavaScript. In Tests führt dies zu bis zu 50% kleineren Inhalten und bei einer gzip-Komprimierung von bis zu 30%. Das komprimierte Ergebnis wird fertig im HTTP-Cache abgelegt. Sie können die Komprimierung in den Devtools verfolgen, indem Sie den Header „X-Html-Compressor“ prüfen.“

https://store.shopware.com/frosh35770116184f/html-minify-plugin.html

Schritt 5 – Schnellere Ladezeit durch weniger Cookies

Eine effiziente Verwaltung der Cookies im Shopware 6 Shop ist von großer Bedeutung für die Seitenladezeit und die Performance der Webseite. Viele Cookies werden durch zusätzliche Plugins gesetzt, die verschiedene Funktionen erfüllen, wie beispielsweise die Erfassung von Nutzerdaten oder die Implementierung spezifischer Features. Oftmals werden auch Cookies von Drittanbietern eingebunden, die für Tracking oder Werbezwecke genutzt werden.

Um die Ladezeit zu optimieren, ist es ratsam, die Cookies, die durch diese Plugins gesetzt werden, genau zu überprüfen. Es ist wichtig, nur die wirklich notwendigen Cookies für die Funktionalität und den Datenschutz des Shops zu verwenden. Unnötige Plugins und Cookies sollten deaktiviert oder entfernt werden, um die Datengröße der Webseite zu reduzieren und die Ladezeit zu verbessern.

Durch eine gezielte Einbindung von Plugins und die Verringerung der verwendeten Cookies kann die Seitenladezeit verkürzt werden, was zu einer schnelleren und flüssigeren Benutzererfahrung führt. Eine effiziente Cookie-Verwaltung trägt dazu bei, die Performance des Shopware 6 Shops zu steigern und die Zufriedenheit der Besucher zu erhöhen. Indem man die Anzahl und Größe der Cookies reduziert und nur die essentiellen Cookies einbindet, kann man die Performance der Webseite optimieren und dafür sorgen, dass die Seiten schneller geladen werden. Dies ist ein wichtiger Faktor, um die Konversionsrate zu verbessern und den Erfolg des Online-Shops langfristig zu steigern.

Schritt 6 – Lazy Loading in Shopware 6 verwenden

In Shopware 6 kann Lazy Loading („faules Laden“) verwendet werden, um die Ladezeit der Webseite zu verbessern. Diese Technik sorgt dafür, dass nur die Inhalte geladen werden, die für den Nutzer sichtbar sind. Wenn ein Nutzer beispielsweise durch eine Produktkategorieseite scrollt, werden nur die Produkte geladen, die sich gerade im sichtbaren Bereich befinden. Dadurch muss nicht der gesamte Inhalt der Seite sofort geladen werden, was die Ladezeit erheblich reduziert.

Der positive Effekt von Lazy Loading

Früher wurde Lazy Loading hauptsächlich mit JavaScript implementiert. Heute besteht jedoch auch die Möglichkeit des nativen Einbindens, was zusätzliche Ressourcen spart, die normalerweise für JavaScript-Code verwendet würden. Dadurch wird der positive Effekt auf die Ladezeit noch verstärkt.

Plugins für Lazy Loading in Shopware 6

In Shopware 6 gibt es verschiedene Plugins, die Lazy Loading unterstützen und das Einbinden erleichtern. Auch hier gibt es „normales“ Lazy Loading mit JavaScript oder Natives Lazy Loading ohne JavaScript. Wir haben euch beide verlinkt.

Geschwindigkeitsverbesserungen für Kategorieseiten mit vielen Bildern

Mit Lazy Loading in Shopware 6 können erhebliche Geschwindigkeitsverbesserungen für Kategorieseiten mit vielen Bildern erzielt werden. Angenommen, eine Kategorieseite zeigt insgesamt 48 Bilder an, von denen jedoch nur 8 Bilder „above the fold“ (oberhalb des sichtbaren Bereichs) sind. Dank Lazy Loading werden bei der Initialisierung der Seite nur diese 8 Bilder sofort geladen, während die restlichen 40 Bilder, die sich unterhalb befinden, erst nach und nach geladen werden, wenn der Nutzer durch die Seite scrollt und sie in den sichtbaren Bereich kommt.

Dies führt dazu, dass die Ladezeit der Kategorieseite drastisch verkürzt wird, da nur ein Bruchteil der Bilder beim ersten Seitenaufruf geladen werden muss. Für den Nutzer bedeutet dies eine schnellere und flüssigere Benutzererfahrung, da er nicht lange auf das vollständige Laden der Seite warten muss.

Positiver Einfluss auf die Nutzererfahrung und Conversion-Rate

Der Effekt der Lazy Loading-Technik kann besonders bei Seiten mit vielen Bildern, wie Produktkategorieseiten, spürbar sein. Die schnelle Anzeige der wichtigen Inhalte „above the fold“ steigert die Wahrscheinlichkeit, dass der Nutzer länger auf der Seite bleibt und mehr Produkte ansieht, was sich wiederum positiv auf die Conversion-Rate auswirken kann. Was wir nicht oft genug wiederholen können.

Schritt 7 – Deaktiviere den Admin Worker und nutze Cronjobs

Um die negativen Auswirkungen des Admin Workers zu vermeiden, empfehlen wir, diesen zu deaktivieren und stattdessen zwei Cronjobs einzurichten, die die Aktualisierungsaufgaben übernehmen. Dadurch wird die Last besser verteilt, und die Seitengeschwindigkeit bleibt auch bei gleichzeitigem Zugriff mehrerer Benutzer hoch.

Stellen wir uns vor, die Aktualisierungsfunktionen in Shopware 6 sind wie Pakete, die in einem Postzentrum bearbeitet werden. Der Verwaltungsarbeiter ist der fleißige Mitarbeiter, der diese Pakete sortiert und weiterleitet, während die „Nachrichtenwarteschlange“ die Warteschlange von Paketen darstellt, die darauf warten, bearbeitet zu werden.

Der eifrige Sortierer (Admin Worker)

Angenommen, du betrittst ein Postzentrum (die Shopware 6-Verwaltung) mit einem Paket (deiner Anmeldung). Sobald du eintreten, beginnt der eifrige Sortierer (der Verwaltungsarbeiter) sofort damit, dein Paket zu verarbeiten. Er schaut auf das Adressetikett (deine Anmeldungsinformationen), sortiert das Paket (führt die Aktualisierungsfunktionen aus) und leitet es an den richtigen Ort weiter (die Administrationsoberfläche). Solange der Sortierer dein Paket bearbeitet, kann er andere Pakete (andere Benutzeranmeldungen) vorübergehend blockieren, wenn es viele Pakete gibt, die gleichzeitig bearbeitet werden müssen.

Die Warteschlange der Pakete (Message Queue)

Stell dir die Warteschlange im Postzentrum vor, in der alle Pakete in einer Reihe warten, um vom Sortierer (dem Verwaltungsarbeiter) abgearbeitet zu werden. Jedes Paket enthält eine bestimmte Aufgabe, die erledigt werden muss. Wenn du dich längere Zeit nicht in der Verwaltung angemeldet hast, können sich mehrere Pakete in der Warteschlange ansammeln. Diese Pakete bleiben in der Warteschlange, bis der Sortierer zurückkommt und sie nacheinander bearbeitet. Je mehr Pakete in der Warteschlange sind, desto länger dauert es, bis alle abgearbeitet sind, wenn der Sortierer zurückkommt.

Deaktivierung des Verwaltungsarbeiters und Cronjobs

Selbst wenn nur ein Admin eingeloggt ist, aber mehrere Tabs offen hat, kann das oben beschriebene Problem mit der Warteschlange auftreten. Um die Herausforderungen zu umgehen, kannst du den Verwaltungsarbeiter deaktivieren. In diesem Fall stellt sich der Sortierer nicht mehr jedem ankommenden Paket entgegen, und du kannst die Aufgaben anders erledigen. Ähnlich kannst du zwei Cronjobs einrichten, die als zusätzliche Mitarbeiter fungieren und die Pakete aus der Warteschlange übernehmen, wenn der Sortierer nicht da ist. Auf diese Weise kannst du die Arbeit effizienter verteilen und sicherstellen, dass die Pakete schneller abgearbeitet werden, auch wenn du eine Weile nicht im Postzentrum warst.

Insgesamt ermöglichen diese Maßnahmen eine bessere Handhabung von gleichzeitigen Prozessen und reduzieren die Auswirkungen von langen Wartezeiten, sodass dein Onlineshop reibungslos läuft und die Leistung optimiert wird.

Schritt 8 – Verwende Browser Caching

Konfiguriere den Server so, dass Ressourcen im Browser des Benutzers zwischengespeichert werden, um wiederholte Seitenaufrufe zu beschleunigen.

Mit Browser Caching kann die Ladezeit deiner Webseite in Shopware 6 verbessert werden. Browser Caching ist eine Technik, bei der statische Ressourcen wie CSS-Dateien, JavaScript-Dateien, Bilder und andere Dateien im Browser des Besuchers zwischengespeichert werden. Dadurch werden diese Ressourcen beim erneuten Aufruf der Webseite nicht erneut vom Server heruntergeladen, sondern direkt aus dem lokalen Cache des Browsers geladen. Dies führt zu einer schnelleren Ladezeit der Seite, da weniger Daten über das Internet übertragen werden müssen.

Um Browser Caching zu nutzen, können entsprechende Einstellungen auf dem Webserver oder in Shopware 6 vorgenommen werden. Hier ist ein Beispiel, wie du Browser Caching mit den Cache-Control- und Expires-Headern auf einem Apache-Webserver aktivieren kannst:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
</IfModule>


Alternativ kannst du Browser Caching auch auf einem NGINX-Webserver konfigurieren. Hier ist ein Beispiel, wie du die Expires-Header in der NGINX-Konfiguration setzen kannst:

location ~* \.(css|js|jpg|jpeg|png|gif)$ {
expires 1M;
}

Beide Methoden setzen Expires-Header auf eine bestimmte Zeitspanne, um dem Browser anzuweisen, wie lange die Ressourcen im Cache gespeichert werden sollen, bevor sie erneut vom Server angefordert werden.

Wichtig: Beachte, dass Browser Caching für statische Ressourcen geeignet ist, die sich selten ändern. Falls du Änderungen an einer Ressource vornimmst, sollte auch der Cache-Header aktualisiert werden, um sicherzustellen, dass die Besucher die neueste Version der Datei erhalten.

Durch die Implementierung von Browser Caching kannst du die Ladezeiten deiner Webseite deutlich verbessern und die Serverlast reduzieren, da weniger Anfragen an den Server gestellt werden. Dies trägt zu einer besseren Benutzererfahrung und einer effizienteren Nutzung der Ressourcen bei.

Diese Spezial-Einstellungen solltest du aber grundsätzlich am besten mit deinem Hosting Anbieter und / oder deiner Agentur absprechen. Auf einem Shared Hosting Webspace werden diese Einstellungen beispielsweise auch in der Regel nicht möglich sein.

Schritt 9 – Nutze aktuelle PHP und Datenbank Versionen

Die Wahl der richtigen Version von PHP und der Datenbank (mySQL oder InnoDB) kann einen signifikanten Einfluss auf die Pagespeed-Optimierung von Shopware 6 haben. PHP ist die Skriptsprache, die die Backend- und Frontend-Logik des Shops ausführt, während die Datenbank für die Speicherung und den Abruf von Informationen verantwortlich ist.

Aktuelle Versionen von PHP und der Datenbank bieten in der Regel Leistungsverbesserungen, Fehlerbehebungen und Sicherheitsupdates, die sich positiv auf die Ladezeiten auswirken können. Zum Beispiel bieten PHP 8.2, PHP 8.1 und PHP 8.0 kontinuierlich Optimierungen in der Leistung und der Syntax, die die Ausführungsgeschwindigkeit erhöhen können.

In Kombination mit einer optimierten Datenbank kann dies zu schnelleren Seitenladezeiten führen. Es ist daher empfehlenswert, regelmäßig die neuesten Versionen von PHP und der Datenbank zu verwenden, um von den neuesten Leistungsverbesserungen und Sicherheitsaktualisierungen zu profitieren.

Hier kann es jedoch bei Plugins und auch Shopware selbst sein, dass noch nicht alles mit den neusten PHP oder Datenbank Versionen kompatibel sind. Bevor hier etwas umgestellt wird sollte man es unbedingt vorher auf einer Staging Umgebung testen.

Schritt 10 – Vermeide 404 Fehlermeldungen

404 Fehler können die Ladezeit einer Webseite erheblich verzögern. Wenn die angeforderten Ressourcen beim Laden der Website nicht gefunden werden, kann sich die Ladezeit erheblich verzögern. Dies betrifft beispielsweise Bilder, Javascript-Dateien oder CSS-Dateien, die zwar im Quelltext der Seite definiert sind, aber beim Laden nicht gefunden werden. In solchen Fällen versucht der Server vergeblich, die vom Browser angeforderten Ressourcen zu finden, was zu unnötigen Verzögerungen führt.

Um die 404-Fehler erzeugenden Ressourcen zu identifizieren, stehen mehrere Möglichkeiten zur Verfügung:

1. Prüfen Sie die Meldungen bezüglich Crawl Errors in der Google Search Console.
2. Führen Sie regelmäßige Crawls der Domain mit SEO-Tools durch.
3. Überprüfen Sie einzelne Seiten im Browser mithilfe der Entwicklertools, insbesondere dem „Network“-Tab. Bei einem 404-Fehler wird der Statuscode als 404 angezeigt.

Um 404-Fehler zu beheben, sollten Sie zunächst überprüfen, ob die nicht gefundenen Ressourcen tatsächlich benötigt werden. Falls nicht, können diese aus dem Quelltext entfernt werden. Manchmal verursachen auch externe Ressourcen, die nicht mehr verfügbar sind, einen 404-Fehler. In solchen Fällen ist es wichtig zu prüfen, ob diese Ressourcen noch benötigt werden oder ob die URLs angepasst werden müssen, damit sie auf die richtigen Ressourcen verweisen. Durch die Behebung von 404-Fehlern können Sie die Ladezeit Ihrer Webseite optimieren und eine bessere Nutzererfahrung bieten.

Schritt 11 – Erhöhe das Memory Limit deines Shopware 6 Shops

Das PHP Memory Limit definiert, wie viel Arbeitsspeicher ein einzelnes PHP-Skript während seiner Ausführung nutzen darf. Eine spürbare Leistungssteigerung kann erreicht werden, indem man das PHP Memory Limit auf einen Wert zwischen 512 MB und 1024 MB erhöht. Dadurch lassen sich auch „Out of Memory“-Fehler vermeiden, die auftreten können, wenn das Skript nicht genügend Speicherplatz für die Ausführung zur Verfügung hat.

Die Leistungssteigerung wirkt sich nicht nur auf das Frontend der Shopware-Seite aus, sondern auch auf das Backend, insbesondere beim Kompilieren der Themes. Ein höheres Memory Limit ermöglicht eine reibungslosere Ausführung von komplexen Prozessen, was die Geschwindigkeit der Website insgesamt verbessert.

Natürlich hängt der festzulegende Wert des PHP Memory Limits auch von den Ressourcen des Hosters ab. Wenn der Server über ausreichend RAM verfügt, zum Beispiel 8 GB, kann man ohne Bedenken ein PHP Memory Limit von 1024 MB festlegen. Es ist jedoch ratsam, die Einstellung des Memory Limits mit dem Hoster abzustimmen, um sicherzustellen, dass genügend Ressourcen vorhanden sind und die Website optimal läuft.

Insgesamt kann die Erhöhung des PHP Memory Limits eine effektive Maßnahme sein, um die Performance der Shopware 6-Seite zu verbessern und sowohl den Nutzern als auch den Administratoren eine schnellere und reibungslosere Erfahrung zu bieten.

Schritt 12 – Lade Bilder über ein Content Delivery Network

Der Einsatz eines Content Delivery Networks (CDN) kann die Ladezeit Ihrer Webseite oft erheblich verbessern. Ein Content Delivery Network stellt Inhalte wie große Bilder über ein übernationales, global verteiltes Netzwerk von Servern bereit. Angenommen, Ihr Shop ist in einer Stadt gehostet und ein Besucher aus einer anderen Stadt besucht Ihre Seite, dann werden die Inhalte von einem Server in der jeweiligen Stadt ausgeliefert. Solche Geschwindigkeitsvorteile ergeben sich auch, wenn Sie übernational tätig sind und Nutzer aus dem Ausland auf Ihren Shop zugreifen. Für einen Besucher aus einem anderen Land würden die Inhalte dann von einem Server im entsprechenden Land ausgeliefert.

Als CDN können wir Ihnen Cloudflare empfehlen. Cloudflare bietet nicht nur die Inhaltsbereitstellung, sondern schützt Ihre Webseite auch vor DDoS-Angriffen (Distributed Denial of Service). DDoS-Angriffe durch Botnets und Hacker können nicht nur die Leistung und Verfügbarkeit Ihrer Webseite beeinträchtigen, sondern sie teilweise auch komplett lahmlegen.

Darüber hinaus unterstützt Cloudflare die Funktion „Bring Your Own IP“ (BYOIP), die es ermöglicht, Ihre eigenen IP-Adressen im CDN zu nutzen. Dies kann für bestimmte Anwendungsfälle von Vorteil sein.

Zusätzlich bietet Cloudflare auch Unterstützung für das HTTP/3-Protokoll, das die Performance weiter optimiert und zu einer schnelleren Ladezeit führt.

Für die Einbindung empfehlen wir das Shopware Plugin ThumbnailProcessor mit Webp-Unterstützung von Friends of Shopware, das es zusätzlich ermöglicht, dass keine Thumbnails mehr im Shop gespeichert, sondern in Echtzeit erstellt werden.

Hier geht es zum kostenlosen Plugin:

Shopware Plugin ThumbnailProcessor

Und hier zu Cloudflare:

Cloudflare Website

Cloudflare CDN Informationen

Schritt 13 – Vermeide die Nutzung des HTTP/1.1 Protokolls

Du solltest in Bezug auf die Pagespeed-Optimierung darauf achten, dass du nicht mehr das veraltete HTTP/1.1 Protokoll nutzt. Stattdessen empfehle ich dir, auf das moderne und effizientere HTTP/2 Protokoll umzusteigen. HTTP/2 bietet deutliche Verbesserungen in Effizienz, Geschwindigkeit und Sicherheit im Vergleich zu HTTP/1.1. Mit der komprimierten Übertragung der Daten im Binärcode sparst du Bandbreite und ermöglicht deinen Besuchern schnellere Ladezeiten der Shopware 6 Webseite, was zu einem besseren Nutzererlebnis führt.

HTTP/2 nutzt das User Datagram Protocol (UDP), was eine schnellere Übertragung von Daten ohne Verbindungsaufbauzeiten ermöglicht, besonders bei hohen Latenzzeiten oder schlechter Netzwerkqualität. Zusätzlich unterstützt HTTP/2 Multiplexing und Stream-Priorisierung, was die effiziente Nutzung der Netzwerkressourcen fördert und die Ladezeit von Webseiten weiter verkürzt.

Da HTTP/2 bereits von den meisten modernen Webbrowsern unterstützt wird, solltest du die Aktivierung für deine Webseite in Betracht ziehen. Überprüfe deine Server-Konfiguration und gegebenenfalls mit deinem Hosting-Anbieter, um HTTP/2 einzurichten und die Performance deiner Shopware 6 Webseite zu verbessern. Eine schnellere Ladezeit trägt zu einem insgesamt besseren Nutzererlebnis bei und kann dazu beitragen, dass deine Besucher länger auf deiner Webseite verweilen.

Bonus-Tipps:

a) Saubere Datenbanken
Sorge für die Automatische Bereinigung deiner Datenbank-Tabellen, sonst blähen sie sich auf wie nach einem Teller Bohnen. Nicht Cracks dürfen dieses Plugin verwenden:
Automatische Bereinigung der Warenkörbe, Log-Einträge und Version Commit Daten

Echte Nerds programmieren selber irgendetwas, was mit Cronjobs läuft.

b) Zu viele Weiterleitungen vermeiden
Wer mit URL Weiterleitungen arbeitet sollte nicht übertreiben. Jede Weiterleitung mehr sind ein paar Millisekunden längere Ladezeit!

Fazit

Die Pagespeed Optimierung ist ein entscheidender Faktor für den Erfolg deines Shopware 6 Onlineshops. Durch die Umsetzung der oben beschriebenen Maßnahmen zur Optimierung der Ladezeiten kannst du die Benutzererfahrung verbessern, die Conversion-Rate steigern und dein Shopware 6 SEO-Ranking positiv beeinflussen. Sorge dafür, dass deine Seiten schnell geladen werden und begeistere deine Kunden mit einer reibungslosen Einkaufserfahrung!

7. Weiterführende Links

Shopware Plugin – Lazy Loading (49.- € )
https://store.shopware.com/en/ies5925329598866/lazy-loading.html

Datenbanken bereinigen:
https://forum.shopware.com/t/tabelle-version-commit-data-wachst-auf-mehrere-gb-an/67272/9
https://store.shopware.com/acris77073598544/automatische-datenbank-bereinigung.html?c=3
https://store.shopware.com/compr92579686640/automatische-bereinigung-der-warenkoerbe-log-eintraege-und-version-commit-daten.html
https://forum.shopware.com/t/datenbank-ueber-7-gb-gross/96133
https://forum.shopware.com/t/welchen-zweck-hat-die-cart-tabelle-in-der-datenbank/98735
https://forum.shopware.com/t/datenbank-enorm-gross/85823

Ungenutzte Medien löschen:
https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/shopware-cli#media

Shopware Plugin – Natives Lazy Loading ohne JS | nicht sichtbare Bilder aufschieben | Bilder nachladen | Pagespeed | P
https://store.shopware.com/nimbi73480481303/natives-lazy-loading-ohne-js-nicht-sichtbare-bilder-aufschieben-bilder-nachladen-pagespeed-p.html

TinyPNG | Bildkomprimierung ohne Aufwand
https://store.shopware.com/wyn2370785237572m/tinypng-bildkomprimierung-ohne-aufwand.html

Timme Hosting – Shopware 6 Admin Worker deaktivieren
https://timmehosting.de/blog/shopware-6-admin-worker-deaktivieren

Splendid Internet Blog – Lazy Loading: Pagespeed-Pflichtprogramm für Onlineshops?
https://www.splendid-internet.de/blog/lazy-loading-pagespeed-pflichtprogramm-fuer-onlineshops/

zweipunkt Blog – Shopware PageSpeed & Core Web Vitals Optimierung
https://zwei.gmbh/blog/151/die-bedeutung-von-google-pagespeed-core-web-vitals/

Web Labels Blog – Shopware 6 langsam, so optimierst du deinen Shopware Shop
https://www.web-labels.de/shopware-6-langsam-so-optimierst-du-deinen-shopware-shop/

Du brauchst Hilfe bei der Umsetzung mit Shopware? Dann setze dich jetzt mit uns in Verbindung.