Post preview
Bjoern Kraus

Warum PWA als Schlüsseltechnologie zukünftig über den Erfolg von Händlern entscheidet

Als ich im Jahr 1999 mit meiner Arbeit im E-Commerce-Bereich begann, war die Grundidee aus Händlersicht eine ziemlich einfache und allgemeingültige: Produktinformationen sollten in eine Datenbank importiert und als Onlinekatalog ausgegeben werden können. Produkte online kaufbar zu machen war das Hauptziel zu Beginn des Millenniums. Das Internet war langsam und die Auswahl an internetfähigen Geräten letztlich auf einige wenige Desktop-Computer beschränkt. Ein beliebiges Dreispaltendesign gefüllt mit grundlegenden Produktinformationen und einem kleinen (qualitativ schlechten) Bild reichte bereits aus, um die Erwartungshaltung der Käuferschaft zu übertreffen – und ermöglichte letzten Endes Jedermann den Einstieg in den Onlinehandel.

Mit den zu jener Zeit genutzten Commerce-Plattformen konnten Händler weitere Produktinformationen hinzufügen, wie beispielsweise Verfügbarkeit, Rabatte, hochauflösende Bilder, Filter, Schnellkaufmöglichkeiten oder Bewertungen.

Doch diese Entwicklung hatte ihren Preis: Steigende Komplexität und der damit einhergehende Bedarf an wesentlich mehr Rechenleistung, um das Einkaufserlebnis nachhaltig zu verbessern. Damals spielte der Begriff „Einkaufserlebnis“ in den Köpfen ohnehin noch eine untergeordnete Rolle. Eines war uns allerdings schon damals klar: Der Einkauf in einem langsamen Onlineshop macht einfach keinen Spaß! Unsere Arbeit wurde genau aus diesem Grund stets von Überlegungen begleitet, wie sich die Seitenladezeiten reduzieren lassen.

Leistungsverbesserung durch Einsatz von Caching-Technologie

Die erste größere Herausforderung für uns war im Jahr 2008 das Projekt für einen großen europäischen Luftfahrtkonzern, dessen über 20.000 Mitarbeiter gleichzeitig im hauseigenen Magento Onlineshop Firmendevotionalien kaufen können sollten. Wir brauchten hierfür dringend eine Lösung, da der Onlineshop zu jener Zeit lediglich 8-12 Seiten pro Sekunde ausliefern konnte. Nach drei frustrierenden Tagen kam ich auf die Idee für ein einfaches Full-Page Caching: Dieses prüfte, ob der User Request bereits ein Cookie besaß – und wenn nicht, speicherten wir die Seite für die nachfolgenden Besucher. Diese grundlegende Idee haben wir soweit verfeinert, dass wir mit denselben Servern bis zu 6.000 Seiten pro Sekunde ausliefern konnten. Die Kundenanforderungen waren damit erfüllt und die Plattform verzeichnete einen großen Leistungsschub.

Der nächste größere Schritt war für uns im Jahr 2011 ein Projekt für ein großes deutsches Telekommunikationsunternehmen, bei dem wir zum ersten Mal Varnish einsetzten – einem Reverse Proxy, der in der Lage war, auf Basis eines frei definierbaren Regelwerks eine Server Response zwischenzuspeichern.

Dies verbesserte unseren einfachen Caching-Ansatz aus 2008 dahingehend, dass wir nun auch benutzerspezifische dynamische Seitenelemente in die zwischengespeicherten Seiten einfügen konnten, bevor diese an den Benutzer ausgeliefert wurden.

Für uns war dies ein großer Fortschritt, da wir nun in der Lage waren, alle Shopseiten zwischenzuspeichern – auch jene für angemeldete Nutzer und/oder Nutzer, die bereits etwas in den Warenkorb oder auf die Merkliste gelegt hatten. Im Ergebnis lieferten wir so 10-15.000 Seiten pro Sekunde aus.

Produktkataloge mit Suchtechnologie effizient nutzen

Auch wenn diese Caching-Technologien ihren Zweck für einige Zeit erfüllten, so lösten sie doch nie das grundlegende Problem: Die funktionsüberladenen E-Commerce-Plattformen benötigten weiterhin sehr viel Zeit für die Erstauslieferung einer Seite! Das Problem wurde dadurch weiter verschärft, dass Online-Shops nicht nur aus nahezu statischen Produktseiten, sondern auch aus Kategorieseiten mit zahlreichen Filter- und Sortierungsmöglichkeiten bestehen. Letztere ließen sich oftmals nicht sinnvoll zwischenspeichern und bescherten dem Benutzer erneut lange Seitenladezeiten.

Im Jahr 2012 kam ein Projekt für eine internationale Marke hinzu, die exklusive Weine online verkaufte. Deren Produkte waren mehreren Kategorien (Weinart, Winzer, Anbaugebiet etc.) zugeordnet, wovon jede eigene umfangreiche Filtermöglichkeiten anbieten sollte. Zu diesem Zeitpunkt kam ein Kollege auf die Idee, uns die Lucene Suchtechnologie zunutze zu machen, die dem Benutzer die rasend schnelle Filterung von Produkten ermöglichte.

Suchserver indexieren zu dem Zeitpunkt, zu dem Informationen in ihre Datenbank geschrieben werden. Und da die Filterung nach einem Produktattribut wie „Winzer“ eine einfache Anfrage an den Suchserver ist, können die zutreffenden Produktinformationen wesentlich schneller gefunden und ausgegeben werden als von der Datenbank des Onlineshops.

Soweit wir das bislang beobachten konnten, speichern die meisten Suchimplementierungen nicht alle Produktinformationen im Suchserver. Stattdessen speichern diese nur such- oder filterrelevante Informationen und nutzen anschließend die vom Suchserver ausgegebene Produkt-ID oder SKU, um die Produktinformation in der Datenbank des Shops abzurufen. Warum das gemeinhin so ist, kann ich nicht beantworten – vielleicht fehlendes Vertrauen in die Suchtechnologie? Natürlich kann ein Suchserver alle notwendigen Produktinformationen speichern und zugleich auch schneller darauf zugreifen.

Wir haben daraufhin unser eigenes Suchmodul basierend auf Apache Solr entwickelt, wechselten allerdings relativ schnell auf die Elasticsearch-Technologie, nachdem diese unsere Stabilitätsanforderung erfüllte. Zunächst bauten wir einen Indexer, der sämtliche Produktinformationen aus der MySQL Shopdatenbank auf den Suchserver kopierte. Anschließend haben wir das Magento Frontend so angepasst, dass sämtliche Produktinformationen für die Seitengenerierung vom Suchserver abgerufen wurden. Mit diesem Ansatz konnten wir alle produktkatalogspezifischen Anfragen an die Shopdatenbank eliminieren.

Dieses kleine technologische Experiment bescherte uns initiale Seitenladezeiten von unter einer Sekunde für alle möglichen Filter- und Suchkombinationen! Darüber hinaus konnten unsere Händler fortan dynamische Landingpages erstellen und durch erweiterte Konfigurationsmöglichkeiten (wie zum Beispiel das Boosting) Suchergebnisse gezielt beeinflussen.

Viele Herausforderungen, eine Lösung: PWA

Progressive Web Apps machen sich zahlreiche Vorteile moderner Webentwicklung zunutze und folgen dem Mobile First Ansatz. Für uns als Technologieunternehmen, das Händler dabei unterstützt, großartige Einkaufserlebnisse zu schaffen und mit stetig wachsenden Erwartungshaltungen umzugehen, gibt es vor allem einen großen Vorteil durch PWA: die Möglichkeit, Produktinformationen auf dem Anzeigegerät zwischenzuspeichern und zu rendern.

Das klassische Verhalten von E-Commerce-Anwendungen, das HTML serverseitig zu rendern und dann an das Anzeigegerät auszuliefern, erfordert enorme Rechenleistung und damit teure Server-Hardware. Die Verlagerung des Renderings auf die Anzeigegeräte der Benutzer ermöglicht kleinere Server-Skalierungen und sorgt für eine erhebliche Kostenersparnis. Damit haben wir eine „Win-Win-Win“-Situation: Der Händler spart Geld, der Benutzer hat ein erstklassiges Einkaufserlebnis und die Entwickler können mühelos skalierbare E-Commerce-Lösungen bereitstellen.

Wie das möglich ist? Zukunftsorientierte PWA-Lösungen wie VueStorefront stellen eine leistungsfähige Schnittstelle zu Elasticsearch zur Verfügung, über die sämtliche Produktinformationen und CMS-Inhalte abgerufen werden können. Es dauert lediglich 5-10 Millisekunden, um die Produktinformation aus Elasticsearch zu erhalten und weitere 20-30 Millisekunden, um diese Information an das Anzeigegerät zu senden. Das Stöbern im Online-Produktkatalog ist nun erstmals ohne spürbare Verzögerungen möglich, sodass man kaum glauben möchte, dass die Inhalte dennoch von einem Server bereitgestellt wurden. In Wirklichkeit ist es das Ergebnis einer intelligenten technologischen Weiterentwicklung, die die Bereitstellung von Produktinformationen erheblich beschleunigt und sich die Fähigkeiten moderner Anzeigegeräte zunutze macht. Das alles funktioniert ganz ohne Full-Page Caching und die damit verbundenen Schwierigkeiten.

Warum Sie jetzt auf PWA setzen sollten!

Vor 10 Jahren haben wir sehr viel Zeit investiert, verschiedene Caching-Ebenen zu schaffen, die dynamische Shopseiten statisch und damit zwischenspeicherbar machten, um schnelle Seitenladezeiten zu ermöglichen. Vor 7 Jahren haben wir tausende Entwicklungsstunden investiert, um benutzerspezifische Inhalte ebenfalls schnell ausspielen zu können. Und in der mobilen Welt von heute sind wir davon überzeugt, dass diese Einkaufserlebnisse nur auf Basis von PWA sinnvoll realisierbar sind und am Markt erfolgreicher sein werden als alles, was wir bislang gesehen haben. Wenn Online-Händler heute auf PWA setzen, schaffen sie sich für mindestens 2-3 Jahre einen Wettbewerbsvorteil gegenüber ihren Mitbewerbern.

Wenn Sie wissen möchten, warum wir von dieser großartigen Technologie so begeistert sind, schnappen Sie sich Ihr Smartphone und erleben Sie den VueStorefront Demoshop! Nach wenigen Klicks aktivieren Sie den Flugmodus – und shoppen einfach weiter.

Als Magento Enterprise Solution Partner mit über zehnjähriger Projekterfahrung, sind wir nun auch stolzer Core Partner von VueStorefront und tragen tagtäglich zur Perfektionierung dieser zukunftsträchtigen Technologie bei und heben damit das Einkaufserlebnis und die Visionen unserer Händler auf die nächste Ebene.

Zurück