Michael Türk
Michael Türk Lead Solution Specialist
24. January 2018 in

Deutsch Let's talk about

Page Speed

Geschwindigkeit zählt

Zeit ist Geld. Das zählt gleich doppelt für E-Commerce. Einkäufer erwarten heute ein unterhaltsames Einkaufserlebnis und Geschwindigkeit ist ein großer Teil dessen. Nie zuvor waren Kunden ungeduldiger. Nie zuvor waren sie weniger nachsichtig. Wenn ein Onlineshop nicht die erwartete Servicequalität anbietet, werden sie in Rekordgeschwindigkeit einen alternativen Anbieter ausmachen, um die begehrten Produkte schnellstmöglich zu erhalten.

E-Commerce-Seiten auf Performance zu optimieren, wird durch massiv zunehmenden Anteile mobiler Surfern in Zukunft noch bedeutsamer. Zwar hat der mobile Traffic die Zugriffe mittels Desktop-Endgeräte bereits vor über einem Jahr überholt, mobile Konversionsraten liegen jedoch meist auf einem Bruchteil der Zahlen ihrer traditionellen Gegenstücke und die Wartezeit ist auch hier wesentlich. Gemäß Google verlassen 40% der mobilen Benutzer Shops, wenn eine Seite länger als 4 Sekunden lang lädt. Amazon wiederum hatte bereits 2006 festgestellt, dass nur 100 Millisekunden längere Ladezeiten mit 1% Umsatzrückgang einhergehen.

Die Gleichung ist also ein No-Brainer: Schnellere E-Commerce-Lösung bedeutet mehr Umsatz. Auf dem Desktop oder mobilen Endgeräten.

 

Was bedeutet also gute Geschwindigkeit?

Dummerweise gibt es auf diese Frage keine eindeutige Antwort. Es hängt alles vom jeweiligen Kunden, dem aktuellen Nutzungskontext, dem gewünschten Produkt und vielen anderen Parametern ab. Gemäß einer Erhebung von Pingdom benötigen die Top 50 E-Commerce Webseiten durchschnittlich 2,51 Sekunden zum Laden. Die schnellste Seite lädt dabei in weniger als einer halben Sekunden, während die langsamste länger als acht Sekunden benötigt. Nach meiner eigenen Erfahrungen bewegen sich die meisten Onlineshops in der freien Wildbahn eher im unterem Leistungssektor - da sind auch 10 Sekunden Ladezeit oder mehr nicht ausgeschlossen.


Was kann man nun also tun, um seine Ladezeiten zu verbessern? Dazu muss man zunächst verstehen, wie Seiten im Web funktionieren und wie dadurch Ladezeiten entstehen.

    1. Der Browser fragt zunächst die jeweilige Seite auf dem Server ab. E-Commerce-Seiten bestehen generell nicht aus statischen Dateien, die man bei Bedarf einfach vom Server laden könnte. Viel mehr werden sie durch Programmiersprachen wie PHP zum Abrufzeitpunkt generiert. Der Webserver nutzt PHP dazu, alle interessanten Informationen über Produkte, den Warenkorb, den aktuellen Benutzer usw. zusammenzutragen und ansprechend optisch aufzubereiten. Das beinhaltet oft eine ordentliche Portion Komplexität und verbraucht entsprechend viel Zeit.

      Die meisten aktuellen Shop-Plattformen sind jedoch nicht schnell genug in der Generierung ihrer dynamischen Inhalte. Deshalb wurden in der Vergangenheit allerlei Hausmittelchen eingeführt, welche die Geschwindigkeitsprobleme lindern sollen. Die wichtigste Unterstützung stellen sogenannte Full-Page Caches dar, allen voran Varnish. Dabei wird der Inhalt einmal erstellt - was natürlich noch immer langsam ist - und anschließend im Arbeitsspeicher des Servers zwischengelagert. Das bedeutet, der arme erste Kunde sieht eine langsame Seite, aber alle nachfolgenden Besucher bekommen eine schnelle Seite präsentiert.

      Full-Page Caching bringt jedoch einige Problemstellungen mit, die sich mit modernem E-Commerce unserer Meinung nach nicht mehr vereinbaren lassen:
      • Full-Page Caching macht dynamische Inhalte und damit Personalisierung deutlich schwieriger. Klar, es gibt Mechanismen wie Ajax oder ESI, mit denen man dynamische Inhalte in die statisch abgelegten Seiten integrieren, aber das hilft auch nicht, wenn die allgemeine Geschwindigkeit meines Systems im Eimer ist.
      • Dazu kommt die zusätzliche Komplexität, die oft in einer Menge Zusatzarbeit und -zeit in der Entwicklung bedeuten. Entwickler müssen nun klarstellen, dass generierte Inhalte mit kontextspezifischen Ausgaben vereinbar sind. Aus meiner Erfahrung kann das mitunter einige Tage Arbeit für eine Funktion bedeuten, deren eigentliche Logik in wenigen Stunden erstellt war.
      • Den gesamten Inhalt zwischenzuspeichern und dann vereinheitlicht auszuliefern, hört sich zunächst sehr gut an, erweist sich in der Praxis jedoch oft deutlich weniger effizient als zunächst angenommen. Das liegt an der sehr hohen Menge unterschiedlicher Seiten in einer E-Commerce-Lösung und der Menge an Änderungen der dargestellten Informationen. Die Veränderung von Preisen oder Verfügbarkeiten sorgt eben regelmäßig für veraltete Versionen im Cache.
      • Schlussendlich muss man sich außerdem vor Augen halten, dass ein großer Teil von E-Commerce-Funktionalität gar nicht vorgehalten werden kann. Produkte in den Warenkorb zu legen und später einzukaufen, bedarf spezifischer Logik und Berechnung. Ich habe Situationen erleben “dürfen”, in denen Varnish erfolgreich für die Darstellung des Katalogs sorgte, das System nachher jedoch nicht den Ansturm auf die Warenkörbe verarbeiten konnte. An der Stelle fehlen einem die Worte. Man hat den Kunden soweit, das ultimative Ziel zu erreichen. Man hat alles richtig gemacht und dann bricht das System wenige Meter vor der Ziellinie zusammen.

        Im Grunde ist ein Full-Page Cache das Gegenteil von dem was man will, nämlich einen Shop, bei dem die Inhalte voll und ganz auf den jeweiligen Kunden optimiert sind. Das kann bspw. durch die promoteten Produkte auf der Homepage, individuelle Reihenfolge im Katalog, einstellbare Filter, ggf. kunden-individuelle Preise passieren. Ein hochwertiger Shop ist daher grundsätzlich überhaupt nicht cachebar. Tut man es doch, dann verbaut man sich die Konversionrate-Optimierung für die Zukunft.

    2. Der zweite Teil der Ladezeiten wird häufig vergessen. Nachdem der Browser das generierte HTML bekommt, interpretiert er den Code und lädt alle verlinkten Ressourcen wie Bilder, Skripte oder Style-Definitionen herunter. In 98% der Fälle schlummern hier sehr große Optimierungspotentiale und Frontend-Code hat sich in den vergangenen Jahren auch fundamental weiterentwickelt. Man kann meist locker 20% oder mehr der Reaktionszeiten einsparen, indem man besseren Quelltext ausliefert, die verlinkten Ressourcen optimiert oder den Server korrekt einstellt. Jedes Mal, wenn in einem Projekt darüber nachgedacht wird, einen weiteren Dienst per JavaScript einzubinden, sollte darüber nachgedacht werden, ob dieser zusätzliche Verarbeitungszeit wert ist.

Pfeilschnelle E-Commerce Lösungen powered by Spryker

Immer wenn ich mit meinen alten Buddies aus der Magento-Welt erwähne, dass Spryker in der Lage ist, dynamisch generierte Seiten in einem Bruchteil einer Sekunde auszuliefern, bekomme ich die süßen Buchstaben des Unglaubens: “WTF?”. Viele können gar nicht glauben, dass eine native PHP-Anwendung überhaupt in der Lage dazu ist. Und ich kann euch versprechen: Es ist möglich!

Ich habe dann mal Pingdom bemüht und die Zugriffszeiten einiger öffentlicher Seiten unserer Kunden gemessen. Wie sie performt haben? Seht selbst:

Die Zahlen sprechen ja für sich: Spryker erlaubt endlich pfeilschnelle E-Commerce-Anwendungen für die eigenen Kunden anzubieten. Wir erreichen das durch eine moderne Systemarchitektur, die für Flexibilität, Geschwindigkeit und Skalierbarkeit ausgelegt ist. Ohne die Nachteile von Full-Page Caching in Kauf nehmen zu müssen. Profitiere von dieser Geschwindigkeit und biete deine Services den Kunden an, ohne deren Zeit zu verschwenden.

Denn eines ist klar: Zeit ist Geld.


 

Abonnieren Sie unseren Newsletter

Let’s Talk About… the Series.

Klingt interessant? Wir könnten den ganzen Tag über Spryker reden und darüber, warum wir 2018 die Plattform der Wahl für die E-Commerce-Branche sind. Aber das würde den Rahmen eines einzelnen Artikels sprengen - noch mehr, als es dieses bereits tut. Deshalb haben wir uns entschieden, daraus eine wöchentliche Serie zu machen, die sich jeweils einem speziellen Thema widmet, darunter auch, wie Spryker Entwicklern und Händlern auf vielen verschiedenen Gebieten zum Erfolg verhelfen kann. Es gibt eine Fülle interessanter Themen, die ausführlicher behandelt werden sollten. Dazu gehören Agilität, Seitengeschwindigkeit, Personalisierung, Sicherheit, Code-Qualität, Produktmanagement, Auftragsverwaltung und vieles mehr.

Falls Sie an einem speziellen Thema besonders interessiert sind, schreiben Sie bitte einfach eine E-Mail an michael@spryker.com. Sie können mich auch über Twitter erreichen: mein Benutzername ist @drlrdsen. Wir lieben Herausforderungen und freuen uns auf Ihre Anregungen, denn wie im E-Commerce ist unser wichtigster Erfolgsindikator die Kundenzufriedenheit.

Über Michael Türk

Ich bin Lead Solution Specialist bei Spryker und bringe dabei technische und inhaltliche Anforderungen unserer Kunden überein. Dank über 10 Jahren E-Commerce Erfahrung in über 100 verschiedenen Projekten mit verschiedenen Plattformen wie Magento, Oxid und Spryker, habe ich viele gestandene Unternehmen gesehen, die sich am digitalen Geschäft die Zähne ausgebissen - aber auch und überraschende Erfolge die zuvor niemand erwartet hat. Retrospektiv gesehen, erkennt man dabei viele Muster und kann sie auf zukünftige Projekte projizieren.

Get all new updates straight to your inbox