Für Unternehmen im E-Commerce ist die Webseite des Shops gewissermaßen das Herzstück. Sicherheit und Performance des Shops spielen deswegen eine entscheidende Rolle. Mit der Verwendung des JAMStack lässt sich ein Onlineshop als statische Webseite umsetzen — was bekanntlich sicher, zuverlässig, flexibel und vor allem schnell ist. In diesem Blog möchte ich eine kurze Übersicht geben, was der JAMStack ist, wie man dessen Vorteile für sich einsetzt und welche Besonderheiten beim Einsatz im E-Commerce zu beachten sind.

Verkürzte Lade- und Navigationszeit: Let’s JAM!

In den letzten 3-4 Jahren hat sich das Wort JAMStack unter Frontend-Entwicklern zunehmend zu einem festen Begriff entwickelt. Die Abkürzung JAM steht hierbei für JavaScript, APIs und Markup und beschreibt statt eines bestimmten Sets an Tools vielmehr eine “neue Art der Erstellung von Websites und Anwendungen”. JavaScript ist verantwortlich für alle dynamischen Inhalte der Webseite und wird ausschließlich clientseitig ausgeführt. Über APIs werden alle Interaktionen mit Servern abgewickelt und über sogenannte Static Site Generators wie z.B. Gatsby wird aus den Daten dieser APIs oder aus lokalen Dateien (v.a. Markdown) statisches HTML vorgeneriert. Im besten Fall werden so über das Frontend keine APIs mehr abgefragt, sondern alle Daten werden “at build time” berücksichtigt, also beim Generieren der statischen Seiten. Neben vielen Vorteilen gibt es auch ein paar Nachteile, auf die ich später eingehen werde.

Grundsätzlich verkürzt dieses Paradigma die Lade- und Navigationszeit zwischen den Seiten jedoch drastisch, da die benötigten Daten bereits in den Bau der Seiten und Unterseiten eingeflossen sind und nicht erst besorgt werden müssen. Für die bestmöglichen Ergebnisse haben sich deswegen einige Best Practices etabliert:

• Das gesamte Projekt liegt auf einem CDN (Content Delivery Network) für unschlagbare Performance
• Alles lebt in Git, ein langwieriges Entwicklersetup entfällt
• Verwendung von modernen Build Tools wie Webpack, Babel, PostCSS etc.
• Automatische Builds, sobald sich Inhalte ändern
• Atomares Deployment, um nicht bei jeder Änderung alle Seiten neu zu bauen

 

Welche Vorteile bietet der JAMStack im E-Commerce?

Der erste Schritt, um neue Kunden zu erreichen oder Sichtbarkeit für die eigene Marke zu erlangen, beginnt mit der Website. SEO, Performance und UX beeinflussen ganz entscheidend Conversions, Bounce-Rates und schließlich den Umsatz. Der Einsatz des JAMStack im E-Commerce bietet hier eine ganze Reihe an Vorteilen.

JAMStack ist schnell

Dank einer vergleichsweise einfachen Struktur in Form von Dateien, die auf CDNs gehostet werden, sind statische Websites schnell. Und Geschwindigkeit ist für E-Commerce-Sites entscheidend. Amazon fand schon vor 10 Jahren heraus, dass bereits 100 Millisekunden Latenz 1 % der Verkäufe kosten. Eine weitere Studie hat gezeigt, dass eine Verzögerung von nur 1 Sekunde die Seitenaufrufe um 11 % und die Kundenzufriedenheit um 16 % verringert. Geschwindigkeit und Leistung der Website beeinflussen nicht nur das Ranking auf Suchmaschinen, sondern auch das Nutzererlebnis. Und zwar so stark, dass es einen Einfluss auf die generierten Umsätze hat — je schneller die Website, desto höher die Einnahmen.

JAMStack ist sicherer

Da JAMStack-Sites durch die Vorgenerierung der Seiten im besten Fall völlig entkoppelt von Datenbanken und externen APIs sind, bieten sie eine geringere Angriffsfläche und sind damit weniger anfällig für Hackerangriffe.

Angenehmes Entwickeln der Software

Entwickler des Shops müssen sich nicht mehr um den gesamten Stack von der Benutzeroberfläche über die Datenbank bis hin zu den Servern kümmern. Sie können sich auf Dienstleistungen Dritter wie E-Commerce-Backends verlassen und sich ausschließlich auf das Frontend konzentrieren. Das wiederum führt zu einer schnelleren Entwicklungszeit und reduziert somit die Entwicklungskosten.

JAMStack ist leicht wartbar und skalierbar

Es gibt keine Notwendigkeit für ständige Tool-Updates — und die Abwesenheit zufälliger 500-Fehler oder abgebrochener Datenbankverbindungen machen die Wartung viel einfacher (und preiswerter) als bei herkömmlichen Builds. Und für den Fall unvorhergesehener Runs auf die neuesten Rabatte und Angebote skaliert der CDN nahtlos mit.

JAMStack und E-Commerce: Eine Liebesgeschichte?

Für die komplexeren, aber wiederkehrenden und notwendigen Funktionen im E-Commerce gibt es moderne Tools von Drittanbietern, um sie auf statischen Seiten abzubilden. Das betrifft insbesondere die Pflege des Checkout-Prozesses, die Aufbewahrung des Warenkorbs im Speicher, die Möglichkeit für Händler, abgebrochene Warenkörbe wieder aufzufinden sowie Suchfunktionen, Empfehlungen und vieles mehr.

Auch dynamische Elemente wie Formulare, Kommentare und Bewertungen lassen sich über eine Vielzahl von API-Möglichkeiten in dem bereits riesigen Ökosystem auf JAMStack-Sites umsetzen, beispielsweise über Serverless-Funktionen.

Deswegen bleibt die wohl größte Hürde für einen erfolgreichen Einsatz des JAMStack im E-Commerce die Generierungszeit der vielen tausend Seiten für große Produktkataloge im Build-Prozess. Standardmäßig wird selbst bei Änderungen nur einzelner Inhalte die gesamte Website neu gebaut. Sich häufig ändernde Sortimente oder Produktinformationen und eine Vielzahl an Produkten verlangsamen also das Deployment, wenn dabei tausende von statischen Seiten generiert werden müssen.

Mittlerweile lässt sich allerdings auch mit diesem Problem umgehen, indem sogenannte inkrementelle Builds und Atomic Deploys durchgeführt werden. Dadurch werden nur die wirklich notwendigen Seiten, also die, die sich geändert haben, neu erstellt und veröffentlicht. Die wichtigsten Static Site Generators wie Gatsby und Next.js unterstützen diese Funktion bereits ohne Zusatztools.

JAMStack lohnt sich für Onlineshops, wenn…

Gerade für Shops mit einem Umfang von einigen hundert bis zweitausend Seiten und Shops mit Produkten, die nicht regelmäßig aktualisiert werden müssen (außer bei Änderungen zu Preisen und Lagerbeständen), eignet sich der Einsatz des JAMStack besonders. Bei besonders großen Onlineshops ist das richtige Setup (bspw. Atomic Deploys) wichtig, um Performance-Probleme zu vermeiden.

 

Sie möchten ganzheitliche und performante Lösungen für Ihren Shop?

Als Spezialisten im E-Commerce mit langjähriger Erfahrung mit großen Kunden bieten wir von der Plattformentwicklung bis zur Performanceoptimierung und KI-Lösungen umfangreiche E-Commerce-Lösungen.

Oder sind sie gerade erst am Anfang Ihrer Digitalstrategie?

Starten Sie in Sachen Digitalisierung direkt durch mit unserem Digital Kickoff.