Shopware PageSpeed optimieren – Part 1

Schnellerer Webshop – Step by Step, with no Steps skipped. Let´s go!

Vorwort

“Mein Shopware Shop ist zu langsam, könnt Ihr das nicht schneller machen?” – Eine Aussage die wir häufig von Kunden gehört haben. Jedes mal führten wir alle Maßnahmen durch und fragten uns, wieso wird das nicht Kundenseitig Standardmäßig durchgeführt? Eine Hilfestellung soll dieser Beitrag bieten, so dass du eine erste Orientierung und Maßnahmen an die Hand bekommst.

Wenn wir uns um die Page Speed Optimierung unterhalten dann meinen wir damit die Optimierung von Websites für mobile Gerätschaften. Das bedeutet, es geht mir nicht um Optimierung für Desktop mit einer 50kb/s Internetanbindung, sondern für eine mobile 3G Verbindung. Warum? Weil wir uns immer weiter von Desktop-PCs wegbewegen hin zu mobilen Endgeräten. Mehr zum Mobile Page Speed.

Die durchschnittliche Ladezeit von mobilen Webseiten liegt bei 15,3 Sekunden! –> Quelle

 

110 % Verbesserung unseres Google Page Speed Scoring!

Shopware empfiehlt dir in deren Google Page Speed Tutorial ein paar gute Tipps die du vorab schon mal angehen solltest. Ebenso deren Performance Tipps. Falls du nach dem Lesen des Beitrags denkst “Coole Sache, endlich mal eine Ausführliche Erklärung” dann Verlinke diesen und oder teile Ihn auf Facebook / Instagram. Falls du dir denkst “Baaa was für ein Mist, da fehlt ja noch …. oder dies oder jenes ist Falsch”, dann hinterlass einen Kommentar und ich bessere nach.

Haftungsausschluss

Bitte vergiss nicht dass vielleicht nicht alle Anpassungen bei deinem Shopware Shop funktionieren können. Ebenso solltest stets auf einer Staging oder einem Backup-System diese Tests durchführen und nicht direkt im Live-System. Wir übernehmen keine Verantwortung/Haftung für Ausfälle deines Shops durch die hier aufgelisteten Einstellungsmöglichkeiten.

Google Audit durchführen

Der erste Schritt zu besseren Ladezeiten liegt in der Erfassung des Status Quo. Hierfür nutzen wir die Google Chrome Developer Tools. Theoretisch könnt ihr auch PageSpeed Insights nutzen, um die Seite zu analysieren. Der Nachteil liegt allerdings darin, dass Ihr keinen Einfluss auf die Testeinstellungen habt. Weiterhin ist die Vergleichbarkeit nach Änderungen nicht so einfach möglich.

Wie nutze ich die Google Chrome Developer Tools?

Ihr öffnet die zu untersuchende Website mit Google Chrome, dann Rechtsklick auf der Seite klicken und auf “Untersuchen” gehen.

Shortcut Mac: Command + Alt + I
Shortcut Windows: F12 oder Steuerung + Shift + I
Alle Shortcuts für die Developer Tools

Wir auditieren unsere erste Website

Navigiere auf den Tab “Audits”, dort siehst du: (Screenshot)

Stelle bitte die Einstellungen wie auf dem Bild dargestellt ein:

  • Device: Mobile
  • Audits: Performance
  • Throttling: Applied Fast 3G, 4x CPU Slowdown
  • Clear storage: ja

Nach dem durchlauf wirst du unter dem Oberpunkt “Performance” vier Sektionen wiederfinden:

  • MetricsZeigt uns die wichtigsten Geschwindigkeitsfaktoren an
  • OpportunitiesZeigt uns mögliche Anhaltspunkte für Verbesserungen an
  • DiagnosticsZeigt uns generelle Informationen zur Website
  • Passed AuditsSachen die wir bereits richtig gemacht haben

Als Beispiel dient das Kundenprojekte https://hundebrille.eu. Hier gehen wir direkt auf eine Artikeldetailseite und starten den Audit mit den oben erwähnten Optionen.

Warum machen wir ein Audit von der Artikeldetailseite? 🤔

Falls du dich wunderst wieso wir nicht einfach die Startseite analysieren. Viele Besucher steigen bei diesem Beispiel über PPC Maßnahmen(Google Ads usw.) auf die Website ein. Hier leiten die Maßnahmen alle auf die Artikeldetailseite. Daher optimieren wir hier den PageSpeed. Der nächste Einstiegspunkt wären die Kategorieseiten und zu guter letzt die Startseite. Zudem haben wir über Google Analytics eine Analyse durchgeführt. Diese ergab dass die Konversionsrate bei mobilen Zugriffen schlechter war als die von Desktop obwohl die Anzahl der Besucher über Mobil größer ist. Nach Analyse überprüften wir die Ladezeiten im mobilen Bereich. Die daraus entstandene Hypothese lautet, verbessern wir die Ladezeiten im mobilen Bereich, so verbessert sich die mobile Konversionsrate.

Audit #1

Metrics

Hier sehen wir unsere wichtigsten Kenndaten bezüglich der Seitengeschwindigkeit. Zunächst seht Ihr ein Gesamtscoring wie eure Seite beim Audit abschneidet. In unserem Beispiel sieht man einen Score von 29, der rote Kreis impliziert das es kein guter Wert ist. Hier sollten wir einen grünen Wert über 90 erreichen.

“What is a good score for the lab data?

Any green score (90+) is considered good.” *Quelle

Sorgt bitte für die weiteren Audits für eine gleichbleibende Umgebung, damit meine ich nicht den Test auf einem anderen PC ausführen, nicht nebenher Daten downloaden oder Musik streamen. Je gleichbleibender die Umgebung desto besser für den Test. Ansonsten kommt es bei jedem Audit zu starken Abweichungen obwohl Ihr noch nichts optimiert habt.

“Variability in performance measurement is introduced via a number of channels with different levels of impact. Several common sources of metric variability are local network availability, client hardware availability, and client resource contention.” *Quelle

First Contentful Paint

“First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.” *Quelle

Speed Index

Der Speed Index ist einer der ausschlaggebendsten Werte für die SEO. Ich gehe davon aus dass Ihr die Optimierung hauptsächlich aus SEO Gründen durchführt. Der Speed Index ist jener den Google auch als Rankingfaktor herangezogen wird.

“Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. The lower the score, the better.” *Quelle

Time to Interactive

“The Time to Interactive (TTI) metric measures how long it takes a page to become interactive. „Interactive“ is defined as the point where:

  • The page has displayed useful content, which is measured with First Contentful Paint.
  • Event handlers are registered for most visible page elements.
  • The page responds to user interactions within 50 milliseconds. Some sites optimize content visibility at the expense of interactivity. This can create a frustrating user experience. The site appears to be ready, but when the user tries to interact with it, nothing happens.” *Quelle

First Meaningful Paint

“Page load is a key aspect of how a user perceives the performance of your page. This audit identifies the time at which the user feels that the primary content of the page is visible.” *Quelle

First CPU Idle

“The First CPU Idle metric measures when a page is minimally interactive:

  • Most, but maybe not all, UI elements on the screen are interactive.
  • The page responds, on average, to most user input in a reasonable amount of time.” *Quelle

Estimated Input Latency

“Input responsiveness is a key factor in how users perceive the performance of your app. Apps have 100ms to respond to user input. Any longer than that, and the user perceives the app as laggy. ” *Quelle

Opportunities

Die häufigsten „Gelegenheiten“ zur Optimierung sind bei den Dev.Tools folgende:

(1) Defer offscreen images

Bilder welche noch nicht Sichtbar sind(Slider-Bilder) nachgelagert laden lassen = Lazy Loading von Bildern – zur Anleitung(Teil 2).

(2) Serve images in next-gen formats

Bilder zusätzlich im neuen WebP Format ausgeben, hier in Abhängigkeit vom Browser. Die anderen Formate wie JPEG 2000 und JPEG XR sind zwar “besser” als das normale JPEG, werden jedoch nur von wenigen Browsern unterstützt. zur Anleitung(Teil 2).

(3) Properly size images

Bilder in der richtigen Größe bereitstellen, bspw. das Logo wird in 1000x500px bereitgestellt und dann per CSS auf 500x250px runterskaliert. Hier direkt das Logo auf 500x250px bereitstellen.

(4) Eliminate render-blocking recources

Hier möchte man das eine Seite direkt mit Inhalten gezeigt werden kann, anstatt das erstmal .js .css Daten geladen werden und dadurch die Darstellung der Seite verzögert ist. Das würde bedeuten, dass Ihr hier wichtige Inhalte per inline-styles direkt anzeigen lasst. Dies ist von Shopware bereits beachtet worden.

(5) Preconnect to requiered origins

Wenn Ihr Plugins habt die eine Verbindung zu Facebook, Google oder anderen Drittanbietern herstellen müssen, könnt Ihr eine “Vorverbindung” machen. Hier gebt Ihr über eine Anweisung den Befehl, dass diese Verbindung zu den Ressourcen im ersten Moment hergestellt wird – zur Anleitung.

(6) Remove unused CSS

Ihr könnt euch ansehen welche CSS Befehle auf dieser spezifischen Seite benötigt werden und welche nicht. Somit könnt Ihr theoretisch die .css Größe reduzieren indem Ihr jene Befehle entfernt die nicht benötigt werden. Vorsicht mit dieser Anweisung, den die CSS ist so gestaltet dass man möglichst viele View-Ports und Gerätschaften abdecken.

Zur offiziellen Anleitung von Google und den Developer Tools.

Der erste Audit ist durch, nun schauen wir mal nach den Low-Hanging-Fruits🍒🍐🍏🍎, also jene Einstellungen die schnell umgesetzt sind und einiges bringen.

Shopware Grundeinstellungen

Bei Shopware könnt Ihr einige Grundeinstellungen vornehmen damit der Page Speed besser wird. Folgendes solltet Ihr erledigen:

Produktivmodus und HTTP-Cache aktivieren

Einstellungen –> Caches / Performance –> Caches und Performance –> Start

Einstellungen –> Caches / Performance –> Caches und Performance –> Einstellungen

Wenn du bei der PHP Version keinen grünen Haken hast
👉 Wie stelle ich die PHP Version ein?

APCu & OPcache aktivieren

Diese Funktionen müssen Serverseitig aktiviert werden. Falls du keinen eigenen Server verwaltest, dann frag bei deinem Hoster an. In der Regel kann dir dieser dabei weiterhelfen.

Aktualisierungsstrategie auf Cronjob stellen

Das spart ein paar Ressourcen, da die Aufgaben nicht live gemacht werden.

Suchindex, Seo-Index und Sitemap über Cron aktiveren nicht im Live-Modus. Achtung Ihr müsst beim Hoster einen Cronjob einrichten damit dieser dann eine bestimmte URL aufruft: https://eure-domain.de/backend/cron

Beispiel: Bei Timmehosting müsst Ihr euch im ISPConfi einloggen und dort auf den Punkt Cronjobs gehen. Hier die Anleitung wie Ihr das bei Timmehosting machen könnt: https://timmehosting.de/anlegen-eines-cron-jobs

Am besten Ihr terminiert den Cronjob täglich um 4 Uhr nachts – möglichst dann wenn wenig Besucher auf der Seite sind.
Wie kann ich den Cache warmer per cron job aktivieren?

CSS und JavaScript Komprimierung aktivieren

Unter Einstellungen –> Theme Manager –> Einstellungs-Zahnrad könnt Ihr auf die System Konfiguration gehen und dort folgende Punkte aktivieren:

Shopware eigene Statistik deaktivieren

Deaktiviert die Shopware eigenen Statistiken: Im Frontend werden keine Besucher/Seitenzugriffszahlen etc. erfasst – nicht empfohlen! 

Audit #2

So sind unsere Werte momentan:

Und so waren sie vorher:

Das ist schon einmal eine Verbesserung, aber da geht noch mehr💪. Schauen wir uns mal an was in der Opportunities Sektion aufgelistet wird.

Audit #3

Nach dem Speichern nicht vergessen im Backend den Cache zu löschen und das Theme zu kompilieren. Natürlich könnt Ihr diese Einstellung Global erweitern, wir haben dies beim Kunden nur auf der Artikeldetailseite vorgenommen. Im Anschluss lassen wir erneut einen Audit durchlaufen.

Durch Preconnect bzw. Preload laden wir wichtige Ressourcen vor, was die Ladezeiten reduziert. Hier erweitern wir die header.tpl im Detail Ordner unseres Templates um folgenden Code:

Technische Einstellungen

Falls Ihr ein eigenes Template und oder Plugins geschrieben habt, so ist es wichtig das ihr die Javascript/CSS Dateien in den Shopware Compiler mit integriert. Das sorgt dafür, dass das Template nach dem Kompilieren nur eine Css und Javascript Datei bereitstellt. Dies spart unnötige Requests. 

👉WebFonts mit font-display:swap versehen
Seit der DSGVO müssen Webfonts lokal gehostet sein, das bedeutet dass wir hier unsere Schriftarten direkt auf dem Server bereitstellen anstatt das von Google zu laden zu lassen. Im gleichen zuge können wir das Attribut font-display:swap hinzufügen, was die Schriftart – wenn diese noch nicht geladen wurde – mit einer Standardschriftart austauscht. Das lässt den Text sofort anzeigen auch wenn die eigentliche Webfont nicht geladen ist.

Im Template eine fonts.less anlegen …_public>src>less>_modules. Auf die fonts.less müsst Ihr nur noch in der all.less verweisen.

@font-face {
	font-family: 'Josefin Sans';
	font-display: swap;
	font-style: normal;
	font-weight: 300;
	src: url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.eot);
	src: local('Josefin Sans Light'), local(JosefinSans-Light), url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.eot?#iefix) format("embedded-opentype"), url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.woff2) format("woff2"), url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.woff) format("woff"), url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.ttf) format("truetype"), url(../../fonts/Josefin_Sans/josefin-sans-v13-latin-300.svg#JosefinSans) format("svg")
}

Effiziente Cache Police bereitstellen

Serve static assets with an efficient cache policy

Bedeutet nichts anderes als dass Ihr das Caching aktivieren solltet. Zudem soll man sich mit den Datenanforderungen auseinandersetzen und hinterfragen welche Datei wie lange im Cache verweilen soll.

Ein Beispiel: Inhalte die sich sonst über lange Zeiträume hinweg nicht ändern soll man möglichst lange im Cache halten. Dynamische Sachen die sich häufig ändern eher kurz. Das Caching ist standardmäßig über die .htaccess aktiviert und benötigt keine weiteren Anpassungen es sei den Ihr möchtet andere Cache-Zeiten einstellen.

Preload/Prefetch nutzen

Für das Preloading bestimmter Seiten müssen wir im Template eingreifen. Da wir dies nur für die Artikeldetailseite wollen(da wir erstmal nur hier optimieren) erweitern wir das Template im Detail Ordner und fügen eine header.tpl hinzu.

 

Bitte nicht einfach Copy&Paste machen, schaut euch an was Ihr wirklich preloaden wollt, ebenso an welcher Stelle im Template Ihr das einfügt!

{extends file='parent:frontend/detail/header.tpl'}
{block name='frontend_index_header_canonical'}








{/block}

Vielen Dank!

Vielen Dank für deine Aufmerksamkeit! In unserem 2. Teil dieser Serie geht es mit Bildoptimierung weiter.

Dominik Klosa
Dominik Klosa
Mit über 9 Jahren Online Marketing Erfahrung gehört Dominik Klosa zu den top Leuten in seinem Feld. Durch Gastvorträge an der FHWS, wo er auch seinen Abschluss in Wirtschaftsinformatik/E-Commerce, gibt er gerne sein Wissen und Erfahrungsschatz zurück. Als Gründer und Geschäftsführer sorgt er dafür, dass der Laden rund läuft und seine Leute immer schön happy sind.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.