KI erstellte SEO Texte Whitepaper
20. Februar 2024 Keine Kommentare
<–– Nutzen Sie unser Inhaltsverzeichnis :-)
Shopware 6 PageSpeed optimieren
Step by Step zum schnelleren Webshop – So reduzieren Sie die Ladezeiten bei Shopware 6 auf ein Minimum
PageSpeed als Rankingfaktor?
Die Frage, wie stark sich die PageSpeed auf das Ranking von Webseiten bei Google auswirkt, wird auch heute unter SEO-Experten noch kontrovers diskutiert. Dabei hat Google bereits im Jahr 2010 bekannt gegeben, dass die PageSpeed einen Einfluss auf das Website-Ranking hat. Heute wissen wir, dass die PageSpeed sich als direkter Rankingfaktor sowohl auf die Desktop-Suche, als auch die mobile Suche auswirkt und zusätzlich einen Teil der Bewertung der übergeordneten Page Experience darstellt.
Zusätzlich haben bis dato zahlreiche Studien einen klaren Zusammenhang zwischen der Ladezeit von Webseiten und deren Bounce Rate (also der Anteil der Leute, die die Seite vorzeitig verlassen) gefunden. Etwa geht eine Erhöhung der Ladezeit von einer Sekunde auf drei Sekunden mit einer Erhöhung der Bounce Rate von 32 % einher.
Im SEO-Bereich herrscht dennoch oftmals die Tendenz, dass PageSpeed als zu berücksichtigender Rankingfaktor eher in den Hintergrund rückt. Wie Sie sich von der Konkurrenz abheben und mittels Performance-Optimierung das Beste aus den Ladezeiten Ihres Shopware-Shops herausholen, erfahren Sie im folgenden Beitrag.
Welche Faktoren beeinflussen die Ladezeit meiner Webseite?
Eine Auswertung von Tooltester aus dem Jahr 2022 hat gezeigt, dass nur 34 % der Top 100 Websites eine positive Bilanz in Sachen PageSpeed ziehen konnten. Auch hier zeigt sich, dass PageSpeed in der Suchmaschinenoptimierung generell vernachlässigt wird. Die Gründe für eine weniger als optimale PageSpeed sind hierbei vielschichtig.
Gängige Gründe für eine schlechte PageSpeed sind etwa:
- Lange Antwortzeiten des Servers: Durch eine schlechte Hosting-Umgebung können sich zu hohe Antwortzeiten ergeben, was folglich auch die Ladezeit der Seite direkt negativ beeinflusst
- JavaScript/CSS nicht optimiert: Unkomprimierter, häufig ungenutzter JavaScript- oder CSS-Code bläht den Quellcode der Webseite auf und führt somit zu langen Ladezeiten
- Unkomprimierte Bilddateien: Große, unkomprimierte Bilder tragen ebenfalls unnötig zum Umfang der Seite bei und verlangsamen die Ladezeit
- Unangepasste Cache-Einstellungen: Wird eine Webseite nicht oder nicht ausreichend gecachet, lädt sie bei jeder Anfrage komplett neu und entsprechend auch deutlich langsamer
Merke: Um für eine bestmögliche Verbesserung der Ladezeit zu sorgen, müssen alle möglichen Faktoren berücksichtigt werden.
Unser erstes Audit
Der erste Schritt zu besseren Ladezeiten liegt in der Erfassung des Status Quo. Hierfür nutzen wir Google Lighthouse. Alternativ kann man auch die PageSpeed Insights von Google nutzen, um die Seite zu analysieren. Hierbei besteht allerdings der Nachteil, dass man keinen Einfluss auf die Testeinstellungen hat. Dementsprechend ist auch die Möglichkeit der Vergleichbarkeit nach durchgeführten Optimierungen nicht optimal gegeben. Für unser Beispiel nutzen wir deshalb Lighthouse.
Google Lighthouse
Vor dem Starten von Lighthouse öffnen wir Google Chrome im Inkognito-Modus, um für eine möglichst optimale Umgebung für unser Audit zu sorgen.
Merke: Durch das Verwenden des Inkognito-Modus stellen wir sicher, dass etwa installierte Browser-Plugins keinen Einfluss auf die gemessene Performance haben und das Ergebnis verfälschen.
Mit einem Rechtklick auf die Seite öffnet sich dann das Dropdown-Menü. Hier wählt man den Punkt „Untersuchen“ aus, um die Oberfläche der Developer Tools zu öffnen. Alternativ kann man hierfür auch ein Tastenkürzel verwenden.
Shortcut Windows: F12 oder Steuerung + Shift + I
Shortcut Mac: Command + Alt + I
Öffnen der Entwickler-Konsole in Google Chrome
In den Developer Tools wählen wir den Tab „Lighthouse“ aus. Anschließend öffnet sich das Einstellungsfenster für unser Audit:
Einstellungsmenü von Lighthouse
Merke: Da es in unserem Fall vorrangig um die Performance geht, reicht es, in den Kategorie-Einstellungen fürs Audit lediglich einen Haken bei „Performance“ zu setzen.
🢡 Wenn alle Einstellungen passen, klicken wir auf „Analyze page load“, um das eigentliche Audit zu starten.
Ergebnis unseres ersten Audits
Audit-Ergebnis
Der Baseline-Wert unseres Webshops vor jeglichen durchgeführten Optimierungsmaßnahmen lag bei 66. Optimal wäre hier ein Wert von mindestens 90, um in den grünen Bereich zu gelangen. Generell gilt jedoch: Umso höher, desto besser!
Was sind die Core Web Vitals?
Neben dem Performance-Score gibt uns Lighthouse unter dem Punkt „Metrics“ auch Auskunft über unser Abschneiden bei den einzelnen Core Web Vitals. Die Core Web Vitals sind eine Gruppe von Kennzahlen, die die Performance einer Webseite im Detail beschreiben.
Die Core Web Vitals setzen sich aus den folgenden Metriken zusammen:
- First Contentful Paint: Bezeichnet die Zeit, bis das erste Element (Text, Bild, Video) der Seite sichtbar ist
- Largest Contentful Paint: Bezeichnet die Zeit, bis der Hauptinhalt der Seite sichtbar ist
- Total Blocking Time: Bezeichnet die Zeit, die ein Nutzer warten muss, bevor er mit einer Webseite interagieren kann
- Cumulative Layout Shift: Misst, wie sehr sich die Elemente verschieben während man sie benutzt
- Speed Index: Misst den Verlauf des Seitenaufbaus im Detail
Opportunities-Tab
Opportunities-Tab mit Vorschlägen zur Verbesserung der Core Web Vitals
Unter dem Empfehlungen-Tab (engl. „Opportunities“) zeigt uns Lighthouse konkrete Vorschläge zur Verbesserung der Core Web Vitals auf. Zu den häufigsten Verbesserungsvorschlägen zählen hier etwa die Reduzierung von überflüssigem JavaScript-Code oder die Optimierung der Bilder auf der Seite.
PageSpeed-Optimierung in Shopware 6
Mit dem Update auf Shopware 6 sind ein Großteil der Einstellungen zur Verbesserung der Performance weggefallen, da ein unberührter Shopware 6-Shop schon standardmäßig eine optimale Umgebung für gute Performance und Ladezeiten bietet.
Um die Ladezeiten so niedrig wie möglich zu halten, kommt es vor allem auf eine möglichst effiziente Implementierung zusätzlicher Inhalte, Plugins und Features an. Etwa sollte der Quellcode der Seite stets auf ungenutzten JavaScript- oder CSS-Code überprüft werden, der sich mit der Zeit häufig ansammelt.
Weiterhin wirkt sich die Anzahl der installierten Plugins negativ auf die Performance des Shops aus. Dementsprechend sollten installierte Plugins regelmäßig auf deren Notwendigkeit überprüft werden. Kurzum sollte der Datenumfang der Seite möglichst gering gehalten werden, um im Gegenzug die Performance zu maximieren.
Merke: Schlechte Ladezeiten und Performance-Werte entstehen häufig durch einen achtlosen Umgang mit installierten Plugins und zusätzlichem, oft überflüssigem Code.
Schnellere Ladezeiten durch Bildoptimierung
Einer der wichtigsten Faktoren für die PageSpeed-Optimierung ist die Optimierung der Bilder einer Seite. Wie Sie die Bilder Ihres Shopware 6-Webshops bestmöglich optimieren und Ihrer Seite den nötigen Boost in Sachen Performance verpassen, erfahren Sie in Part 2 unseres Beitrags zur PageSpeed-Optimierung für Shopware 6.
Dominik Klosa
Dominik, Gründer der netgrade GmbH, ist ein erfahrener und engagierter Unternehmer mit fundiertem Know-how im Bereich des Online-Marketings.
Danke für die hilfreichen Tipps! Habe jetzt mal alles umgesetzt, auch wenn es Probleme mit Cloudflare und APCu gab. Mal abwarten, ob es was bringt 🙂