Die Vor- und Nachteile von Headless für Ihren E-Commerce-Shop
Suchen Sie nach „Headless“ und Sie werden Tausende von Artikeln finden, die über diesen neuen Ansatz sprechen. Die meisten Autoren schätzen ihn für die Freiheit, die er bei der Front-End-Entwicklung bietet, während ein Großteil seiner Fangemeinde die exzellente Benutzeroberfläche (UI) schätzt. Ungeachtet dessen sind es E-Commerce-Unternehmen, die ein großes Interesse an der Implementierung von Headless für ihren Online-Shop zeigen.
Ich habe bereits zuvor über Progressive Web Apps gesprochen, die ein Teil dieses Ansatzes sind. Ein ähnliches Konzept wurde von E-Commerce-Giganten wie Amazon, Flipkart und Nike mit dem alleinigen Ziel übernommen, ein erstklassiges Kundenerlebnis zu bieten.
Ist dieser Artikel ein weiterer Liebesbrief an die Headless-Website-Entwicklung? Bis zu einem gewissen Grad, ja. Aber ich ziehe es vor, die Vorteile für E-Commerce-Unternehmen zu erörtern und wie wir als Website-Entwicklungsagentur eines Drittanbieters geholfen haben, Headless für einige der beliebtesten E-Commerce-Plattformen zu implementieren.
Optimieren Sie Ihre Website und mehr
mit Semrush-Tools
Was ist Headless E-Commerce?
Grundlagen: Jede E-Commerce-Website besteht aus zwei funktionalen Hälften, dem Front-End und dem Back-End.
Das Front-End der Website fungiert als Vermittlungskanal zwischen dem Benutzer und dem E-Commerce-Portal, während das Back-End die Produktdetails und die gesamte Funktionsweise des Portals verwaltet. Im Laufe der Jahre haben beliebte E-Commerce-Portale am klassischen Ansatz festgehalten, bei dem das Front-End und das Back-End der Website von demselben Panel aus gesteuert werden, was bedeutet, dass sie sich eine gemeinsame Plattform teilen.
Betreten Sie Headless mit einer völlig neuen Strategie. Wenn Sie noch nichts von Headless gehört haben, dient es im Wesentlichen dazu, das Front-End und das Back-End einer Website zu trennen. Mit weniger Interferenzen verhält sich jeder Teil der Website unabhängig und zeichnet sich in seinem jeweiligen Bereich aus; Sie haben einen UI-Experten, der das Gesicht des Portals handhabt, und einen Back-End-Experten, der die Basis stärkt:
Warum sind sie so unterschiedlich?
Die grundlegende Architektur von E-Commerce-Portalen
Ohne in die Details der E-Commerce-Architektur einzutauchen, sind im Folgenden grob entworfene Portalstrukturen dargestellt, um die grundlegende Funktionsweise von E-Commerce-Websites und ihre Interaktionen in jeder Phase zu veranschaulichen.
Full-Stack-Architektur
Die Full-Stack-Architektur ist ein konventionellerer Ansatz, den mobile Webmaster seit Beginn des Trends zur mobilen App-Entwicklung verwenden. Entwickler schaffen ein vollwertiges Ökosystem mit der Handelsplattform im Zentrum, gekoppelt mit einem integrierten Storefront. Das Portal rendert einzelne Plattformen wie Mobil und Web separat. Die Ergebnisse sind unabhängiger und auf die bedienende Plattform ausgerichtet.
Mit der Handelsplattform im Zentrum priorisiert das Handelsportal Back-End-Funktionen wie Content-Management, Fulfillment und Produktdaten.
Full-Stack-E-Commerce-Architektur
Headless E-Commerce
Im Vergleich zur Full-Stack-Architektur trennt die Headless-E-Commerce-Struktur das Front-End des Webshops klar von den restlichen Funktionen der Website. Es hilft, diese Architektur als separate Teile und nicht als gemeinsames zentralisiertes System zu visualisieren. Die Ergebnisse werden mit APIs verwaltet, die eine gemeinsame Front-End-UI rendern, die sich intelligent an alle Plattformen anpasst.
Aus offensichtlichen Gründen priorisiert das Front-End nun Funktionen wie Zahlung und Personalisierung, während die Handelsplattform Bereiche wie Content-Management, Fulfillment und Produktmanagement verwaltet.
Klingt zu technisch? Es lässt sich mit diesem einzigen Punkt zusammenfassen: Headless E-Commerce ist weitaus flexibler als herkömmliche Ansätze in Bezug auf die Bereitstellung eines Omnichannel-Erlebnisses.
Ein plötzlicher Anstieg der Nachfrage nach Headless
Retail Dive und BigCommerce haben kürzlich mit einer Umfrage verblüffende Zahlen vorgelegt, an der globale Führungskräfte und Marketingmanager beteiligt waren und die ihre Schwierigkeiten bei der Gewinnung digitaler Verbraucher untersuchte. Dem Bericht zufolge gaben 86 % der Unternehmensleiter an, dass sie einen Anstieg der Kundenakquisekosten (CAC) verzeichnen. Da bezahlte Medien immer teurer und wettbewerbsintensiver werden, legt der Bericht nahe, dass die bevorzugte Option darin besteht, bessere Strategien zur Gewinnung von organischem Traffic zu entwickeln.
Benutzer konsumieren Inhalte von fast überall. Über eine Online-Präsenz und ein verbessertes Einkaufserlebnis hinaus müssen Unternehmen den Verbrauchern einfache Kaufoptionen über alle Geräte hinweg bieten. Diese Aussage wird durch eine Mediapost-Umfrage gestützt, die behauptet, dass Amerikaner über 13 Netzwerkgeräte pro Person verbunden sein werden. Unnötig zu erwähnen, dass die Liste Geräte aller Art mit einer Vielzahl von Bildschirmgrößen umfasst, wie Laptops, Tablets, Mobiltelefone, Spracherkennungstools, Smartwatches, Kioske, Auto-Tablets und jedes Gerät, das dafür bekannt ist, Zugang zu Webdiensten zu bieten.
Praktische Fälle in unserem Labor: Wie wir Headless-Architektur für unsere Kunden entwickelt haben
Als Agentur, die maßgeschneiderte E-Commerce-Lösungen anbietet, bitten uns unsere Kunden oft, Portale zu liefern, die blitzschnell laden und auf der Benutzerseite gleichermaßen intuitiv sind. Und was wir tun, ist, den Headless-Ansatz zu empfehlen. Aus offensichtlichen Gründen erfordert es von uns, die Extrameile zu gehen, aber das bringt gute Ergebnisse für sie.
Implementierung eines Headless Magento
Backend: Magento-Handelsplattform
Frontend: Angular JS
Problem adressiert:
Ladeprobleme, die ursprüngliche Website brauchte bis zu 7 Sekunden, um zu erscheinen. Was mehr als 7 Sekunden einen leeren Bildschirm bedeutete. Magento bietet standardmäßig ein Frontend, das auf dem KnockoutJS-basierten CMS entwickelt wurde. Das hochintegrierte Storefront schränkte den Webshop an vielen Fronten ein. Die wachsende Anzahl von Benutzern begann, die Leistung des Shops zu beeinträchtigen.
Unsere Lösung:
Mit einem Headless-Template, das mit Angular JS entwickelt wurde, haben wir das Backend davon abgehalten, das Storefront zu beeinflussen. Der klassische Lazyload-Ansatz reduzierte die Seitenladezeit um fast die Hälfte.
Ergebnis:
Die Seitenladezeit wurde drastisch von 7 Sekunden auf 2,8 Sekunden reduziert.
Eine weitere Headless-Magento-Fallstudie
Backend: Magento-Handelsplattform
Frontend: VueJS
Adressiertes Problem:
Seitennavigation, Magentos Expertise beschränkt sich auf die Backend-Leistung. Sein Frontend ist ziemlich starr und erfordert oft, dass Sie jedes Mal, wenn Sie eine Aktion auf dem Storefront ausführen, eine Tour durch das Backend machen. Sie klicken auf eine neue Seite, der Shop leitet die Anfrage an das Magento-Backend weiter, verarbeitet die Daten und ermöglicht Ihnen das Laden der neuen Seite. Die Seitennavigation ist eine Sache, die bei diesem Prozess beeinträchtigt wurde.
Unsere Lösung:
Wir konnten eine Single-Page-Anwendung auf Magento mit VueJS etablieren. Der Benutzer kann nun zwischen den Seiten im Vue-Template selbst navigieren. Ein Großteil der Abfrage ist bereits im Vue-Template gelöst, was das Magento-Backend vor dem Burnout bewahrt.
Ergebnis:
Die Seitennavigationszeit verkürzt sich um ein Vielfaches.
Implementierung von Headless in einem Shopify-Webshop
Backend: Shopify-Handelsplattform
Frontend: Gatsby JS
Lange Checkout-Sitzungen, Die Checkout-Sitzungen auf jeder E-Commerce-Plattform, einschließlich Shopify, sind normalerweise zu lang. Die Benutzer werden gebeten, 4 lange Seiten auszufüllen, bevor sie bezahlen. Die Hintergrundgeschichte: Nach jeder Seite lädt der Shop die nächste Seite vom Shopify-Backend neu, gefolgt von der Verarbeitungsverzögerung durch Zahlungs-Gateways von Drittanbietern. Das heißt, wir haben in jeder Phase Puffer, was den Zahlungsbereich zeitaufwendig und irritierend macht.
Vor allem schränkt Shopify die Möglichkeit ein, die Checkout-Seite anzupassen, was die Kontrolle des Admins über deren Inhalt einschränkt.
Unsere Lösung:
Mit Gatsby JS konnten wir einen virtuellen Ein-Seiten-Checkout-Bereich erstellen. Wir haben die Felder begrenzt und alle Details auf einer einzigen Seite zusammengestellt.
Ergebnis:
Die Checkout-Sitzungszeit wurde um ein Vielfaches reduziert.
Headless ist nicht so makellos
es
Steigende Kosten:
Das Beste an Headless Commerce ist, dass der Webshop kein vordefiniertes Frontend hat. Die Entwickler bauen es von Grund auf neu auf, um geräteorientierte Inhalte bereitzustellen. Der Nachteil ist, dass es Zeit kostet und die Kosten hoch sein können.
Hinzu kommt, dass Sie mehr ausgeben müssen, da das Marketingteam nicht ausreicht, um die Zielgruppe zu erreichen. Die Eigentümer sind stark vom IT-Team abhängig, um Landingpages auf mehreren Geräten zu starten.
Nicht marketingfreundlich
Einem Headless-Commerce-System fehlt eine Frontend-Präsentationsebene. Das bedeutet:
- Die Vorschau der Inhalte auf den Geräten der Endbenutzer wird schwierig.
- Die Vermarkter können keine Inhalte in der herkömmlichen WYSIWYG-Umgebung erstellen.
- Die Ideenfindung, Erstellung und Veröffentlichung von Inhalten wird aufgrund der erhöhten Abhängigkeit von einer anderen Abteilung deutlich langsamer.
Das bedeutet, dass Headless Commerce die Vermarkter letztendlich unter Druck setzen würde, mehr zu leisten, während sie für die Erstellung und Bereitstellung von Inhalten stärker von der IT-Abteilung abhängig sind.
Eingeschränkte Änderungen im Storefront
Das Headless-Commerce-System verfügt über keine WYSIWYG-Umgebung und basiert ausschließlich auf JS-basierten Frameworks. Während es Ihrer Website ausreichend Raum für Erweiterungen bietet, schränkt es Sie auch bei der weiteren Neugestaltung des Frontends ein, ohne stark von JS-Entwicklern abhängig zu sein.
Zusammenfassung
Führende E-Commerce-Unternehmen haben sich für eine Headless-Architektur entschieden. Vor allem hilft es ihnen sehr. Headless hat seine Vorteile, aber auch Nachteile. Es erfordert vielleicht, dass Sie einen Schritt weiter gehen, aber die Ergebnisse werden von Dauer sein.