Praxistipp: Performance-Optimierung für Onlineshops

Performance-Optimierung-860x325

Schnelle Ladezeit gehört mittlerweile zu den wichtigsten Rankingfaktoren und ist ein entscheidender Faktor in puncto Benutzerfreundlichkeit. Ein Drittel der Online-Käufer in Deutschland geben an, dass sie bei länger als drei Sekunden Ladezeit den Online-Kauf abbrechen würden. Die Ladegeschwindigkeit möglich gering zu halten gilt daher als eine der wichtigsten Aufgaben für jeden Shopbetreiber. In diesem Blogbeitrag erklärt Stefan Gross von der Shopware-Partneragentur Pixline Media, wie Shopbetreiber die schlechten Ladezeiten ihrer Shops aufspüren, analysieren und verbessern können. 

Performance-Probleme aufspüren

Wie stellt man überhaupt fest, dass die Performance der eigenen Webseite optimierungsbedürftig ist? Ab wann sollte man eingreifen? Es gibt viele Möglichkeiten, existierende Performance-Probleme frühzeitig zu erkennen. Hier ein paar Hinweise, wie Du dem Problem auf die Schliche kommst:

  • Hohe Ladezeiten bei der Analyse mit Webanalyse-Tools z. B. GoogleAnalytics
  • Hohe Absprungrate in Webanalyse-Tools z. B. GoogleAnalytics oder Piwik
  • Gecachte Seiten laden langsam
  • Ungecachte Seiten laden langsam z. B. Account oder Checkout
  • „Connection Error“ tritt beim Aufruf der Unterseiten auf
  • Hohe TTFB (time to first byte) bei HTML-Content

Treten diese Punkte einzeln oder in Verbindung auf, kann es auf Performance-Probleme hindeuten. Spätestens jetzt wird Zeit, die Geschwindigkeit Deines Onlineshops tatsächlich zu testen. Im Folgenden erzählen wir Dir, wie Du eine erste Analyse selbstständig durchführen kannst.

Tools für Performance-Analyse

Mittlerweile gibt es unzählige – oft kostenlose – Tools, mit denen man die Geschwindigkeit der eigenen Webseite überprüfen kann. Auch wenn diese keine 100%ige Zuverlässigkeit bieten, sind sie gut, um die ersten Analysen durchzuführen und sich einen groben Überblick über den Performance-Stand zu verschaffen.

Netzwerkanalyse im Browser

Diese Option ist kostenlos, leicht zu bedienen und für jeden zugänglich: die Netzwerkanalyse über das Entwickler-Tool in Chrome. Damit lässt sich die s. g. time to first byte (TTFB)leicht messen. Dieser Wert gibt die Zeit an, in der der Browser die ersten Daten vom Server empfangen konnte. Natürlich ist das nur ein Messwert und es ist empfehlenswert, immer auf die gesamte Ladezeit der Webseite zu achten, dennoch ist TTFB ein erster Anhaltspunkt für die Performance-Analyse Deiner Webseite. 

Diese Analyseansicht erreichst Du mit dem rechten Mausklick auf der ausgewählten Seite unter dem Punkt „Untersuchen“. Es öffnet sich das Entwickler-Tool und hier im Reiter „Network“ siehst Du alle geladenen Dateien und in der ersten Zeile das geladene HTML-Dokument (hier am Beispiel vom Shopware Demoshop): 

 Netzwerkanalyse-Tool-in-Chrome

Führt man die Maus über das Wasserfall-Symbol, wird einem die ausführlichere Analyse der Ladegeschwindigkeit angezeigt: 

Analyse-Time-to-First-Byte

Unter dem vorletzten Punkt „Waiting” siehst Du den TTFB-Wert. In diesem Beispiel ist dieser Wert sehr gering. Würde der Wert auf ca. 1 Sekunde oder höher steigen, solltest Du Dir als Shopbetreiber dringend Gedanken über die entsprechenden Optimierungsmaßnahmen machen. 

Performance-Analyse-Tools im Vergleich

Eine andere Möglichkeit, den Page Speed online zu messen ist z. B. mit Google PageSpeed Insights oder Pingdom. Beide Tools funktionieren sehr ähnlich: In Echtzeit wird eine Analyse der angegebenen URL durchgeführt, die Performance bewertet und aus der Analyse werden Optimierungspotenziale abgeleitet. Jedes dieser Tools hat seine eigenen Vor- und Nachteile:

Google PageSpeed Insights:

  • Knappe Beschreibung und übersichtliche Darstellung
  • Ideal, um ersten groben Überblick zu verschaffen
  • Bewertungsgrundlage von Google

 Pingdom: 

  • Ausführliche Beschreibungen
  • Kritische Bewertungen
  • Übersichtliches Ladezeitendiagramm
  • Tests für verschiedene Kontinente möglich
  • Nützliche Bezahl-Services z. B. Real Time Monitoring

Teste Deinen Shop am besten in allen Dir zur Verfügung stehenden Tools und vergleiche die Ergebnisse. Es lohnt sich auch, zu verschiedenen Zeitpunkten und – wenn möglich – von unterschiedlichen Standorten zu testen.

Performance optimieren in Onlineshops

Nachdem die ersten Analysen durchgeführt wurden und Du Dir einen Überblick über die Performance-Kennzahlen verschafft hast, kannst Du mit den Optimierungsmaßnahmen starten. 

Backend-Einstellungen, die für schnellere Ladezeiten sorgen

Folgende Punkte sind für viele Shopsysteme relevant, allerdings profitieren besonders Shopware-Shops in puncto Page Speed von den folgenden Einstellungen: 

  • Immer die aktuellste Version der Software nutzen 
  • HttpCache-Vorhaltezeit erhöhen
  • weniger Kategorien und mehr Filter für die Produkt Listings benutzen
  • CSS- und JS-Dateien komprimieren
  • Besonders für Shopware-Shops sinnvoll und sehr leicht im Backend einzustellen: Cronjobs aktivieren bei den Grundeinstellungen für Suche, SEO, Topseller und Empfehlungsmarketing 

Komprimierte Bilder für schnellere Page Speed

In jedem Onlineshop sollten die Bilder möglichst hochauflösend und groß hochgeladen werden, um die Bildqualität auf jedem Endgerät gewährleisten zu können. Kunden shoppen allerdings immer mehr von mobilen Geräten oder unterwegs. Auffällig lange Ladezeiten beeinflussen unmittelbar die Conversion-Rate und somit die Umsatzzahlen. In diesem Zusammenhang ist eine Bildkomprimierung unabdingbar und bietet mehrere Vorteile: 

  • kleinere Bilder belasten den Server weniger
  • ursprüngliche Bildqualität bleibt erhalten
  • mobile Daten von Kunden werden dank schnellerer Ladezeiten geschont

Es gibt unzählige Services, die Dir bei der Komprimierung der Bilder helfen können, z. B. Online-Tools wie squoosh.app oder compressor.io oder Plugins, wie z. B. das TinyPNG von Pixline Media.

Lösung für Shopware-Shops: TinyPNG-Plugin

TinyPNG ist ein Service, welcher eine verlustfreie Komprimierung von PNG- und JPG-Dateien ermöglicht und die Dateigröße während dieses Prozesses um bis zu 70% reduziert. Im Gegensatz zur zeitaufwändigen manuellen Optimierung über die Webseite des Dienstes, lädt das Plugin alle Dateien, die im Mediamanager verwaltet werden, über die API zu TinyPNG und ersetzt die großen Ursprungsdateien durch die reduzierten Bilder. 

TinyPNG-Plugin-fu-r-Shopware-Shops

 Die Vorteile des TinyPNG-Plugins:

  • deutlich schnellere Ladezeiten durch nahezu verlustfreie Komprimierung von Bildern 
  • Definierung eines Startpunktes möglich 
  • leichte Einrichtung durch Hinterlegen des API-Keys 
  • nachträgliche Komprimierung bereits verwendeter Bilder möglich

Das TinyPNG-Plugin ist eine optimale Lösung für Shopware-Shops, da diese schnell installiert und sehr einfach zu bedienen ist. Die Installation erfolgt über das Plugin Manager im Backend und benötigt eine Registrierung bei tinypng.com.

Content-Delivery-Network (CDN) 

Wenn man allerdings sehr viele Bilder im Shop hat, lohnt es sich, über den Einsatz eines Content Delivery Networks nachzudenken. Unter CDN wird ein Netz regional verteilter und verbundener Server verstanden, über das große Daten schnell ausgeliefert werden können. Die CDNs werden normalerweise von großen Hostern angeboten z. B. Amazon, Microsoft oder Google. Die Verwendung eines CDNs bringt einige Vorteile mit sich: 

  • besonders schonend bei sehr vielen Bildern
  • geringe Anzahl der Anfragen pro Seitenaufruf
  • Bilder werden von Hostern geladen, was zur Entlastung des eigenen Shopservers führt
  • Schnellere Ladezeiten für Kunden durch lokale Server

Weitere Konfigurationen für mehr Performance

Eine weitere Möglichkeit große Datenmengen zu komprimieren, um Deine Seite schneller zu machen, stellt die Software-Konfiguration dar. Bei den Einstellungen des Apache-Servers und bei der PHP-Version solltest Du folgende Aspekte beachten:

  • Aktiviere das GZIP-Modul bei Deinem Webserver: Damit stellst Du sicher, dass alle Daten, die ausgeliefert werden, zusätzlich komprimiert werden. 
  • Überprüfe auf checkgzipcompression.com, ob die Einstellung bei Deiner Webseite aktiviert ist
  • Beachte Browser-Cache-Control: Hier kannst Du einstellen, wie lange schon geladene Daten im Browser der Kunden vorgehalten werden. Wenn die Vorhaltezeiten erhöht werden, muss die aufgerufene Webseite nicht immer neu vom Server geladen werden.
  • Achte außerdem auf die Aktualität der verwendeten PHP-Version: Je aktueller die Version, desto besser ist normalerweise die Performance. 

Server-seitige Optimierungen: Worauf muss ich beim Server überhaupt achten?

In erster Linie empfiehlt es sich, einen dedizierten Server zu haben und auch bevorzugt eine gesicherte Leistung. Zusätzlich braucht die Datenbank in Deinem Server direkten Zugriff auf die Festplatte. Viele Hoster virtualisieren das nur, vermitteln das dem Kunden aber nicht aktiv, weshalb Du als Kunde aktiv nachfragen musst. 

Darüber hinaus ist es wichtig, dass Du in den Servern SSD-Festplatten hast, da der Unterschied zu einer herkömmlichen Festplatte und einer SSD-Festplatte enorm ist. Merke, je schneller die Festplatte, desto schneller die Datenbank. 

Solltest Du keine technisch affinen Kollegen oder Mitarbeiter inhouse habe, kontaktiere ggf. Deinen Server-Anbieter und lasse Dich von ihm beraten. In puncto Server lohnt es sich außerdem, mehr Geld in die Hand zu nehmen und auf leistungsstarken Server zu setzen. 

Bei großen Shops lohnt sich die Trennung von Frontend und Datenbank, dies wird z. B. mit Shopware Enterprise unterstützt. Die Trennung ist sinnvoll, da das Frontend viel CPU braucht und schließlich beliebig skalierbar ist, während die Datenbank viel RAM braucht und sehr schwierig zu skalieren ist.
Ein wichtiger Hinweis an dieser Stelle: Sofern Du Optimierungen anstrebst, die mit den Datenbanken zu tun haben, lass den Datenbanken Zeit. Sie werden oft von alleine mit der Zeit schneller.

Fazit

Es gibt wenig Pauschallösungen und kein Allheilmittel für alle Performance-Probleme. Darüber hinaus erfordern diese immer eine genaue Analyse und meistens Individuallösungen. Hier können Experten wie Shopware-Agenturen z. B. Pixline Media oder spezialisierte Hoster helfen, die Gründe für Performance-Probleme in Deinem Shop festzustellen und diese mit einer für Dich passenden Lösung zu beheben.

Dieser Artikel wurde ursprünglich am 24. Juni 2014 veröffentlicht, aktualisiert am 07. Dezember 2018.