Shopify Plus ist eine beliebte SaaS-eCommerce-Plattform, die einige der weltweit größten Marken wie Tesla, Victoria Beckham Beauty, Staples, Oreo/Mondelez und Red Bull anlockt Die Liste geht immer weiter, und die breite Akzeptanz ist keine Überraschung – Shopify Plus ist einfach zu verwenden und einfach anpassbar. Es bietet eine Vielzahl von Plug-ins und APIs und wird von einem unglaublich reaktionsschnellen Support-Team unterstützt. Was können Sie von einer eCommerce-Plattform noch erwarten? Ob mit einem Shopify Store oder anderweitig, die Antwort bleibt die gleiche: Seitenladung in einer Sekunde und SEO, die Ihre Mitbewerber übertrifft.
Selbst die schlankste und schönste Shopify Plus Website hat keine Chance gegen die erdrückende Konkurrenz von größeren Einzelhändlern – es sei denn, der Betreiber geht alles daran, die Website für Geschwindigkeiten von weniger als einer Sekunde zu optimieren.
Das Shopify Plus-Geschäft so schnell wie möglich zu gestalten, ist eine der einfachsten Möglichkeiten, Ihr Geschäft in SERPs höher zu bewerten und Ihre Konversionsraten dank eines überlegenen, nahtlosen Einkaufserlebnisses zu steigern.
Mit Shopify können Sie Produkte bereitstellen, nicht Erlebnisse
Viele eCommerce-Plattformen wie Shopify Plus, Magento oder Salesforce Commerce Cloud wurden mit einem Backend- und Data-First-Ansatz entwickelt und konzentrierten sich nur sehr wenig auf die tatsächliche Kundenerfahrung. Ihr Fokus liegt auf SKUs, nicht auf Menschen. Dies belastet Plattformkunden, Systemintegratoren, Konstrukteure und Entwickler bei der Optimierung der Geschwindigkeit der Website.
Ganz gleich, ob Ihr Geschäft mit Shopify Plus oder einer anderen beliebten eCommerce-Plattform oder einem Backend-System läuft – wenn Sie das schnellste Erlebnis bieten möchten, müssen Sie fortschrittliche, geschwindigkeitsorientierte Webtechnologien implementieren. Dafür musst du zuerst kopflos werden.
Die Vorteile von Headless eCommerce
Eine kopflose eCommerce-Architektur ist eine Architektur, bei der das Frontend-Design einer Website (d. h. die Präsentationsebene) von der Backend-Infrastruktur entkoppelt wird. Es ist ein bisschen wie WordPress, um den Inhalt einer mobilen App zu verwalten (was es Wert ist, ist möglich mit WordPress REST API).
Traditionelle, monolithische E-Commerce-Architektur
„Headless“ wurde 2020 und darüber hinaus als eine der wichtigsten Initiativen für viele Einzelhändler identifiziert. So können Einzelhändler unabhängig von ihrem Backend die beste Lösung für ihr Frontend auswählen, sodass die Geschäfte schneller laufen können, was die Konversionsraten und die Rangliste verbessert. Headless eCommerce, auch bekannt als Microservices-Architektur, ist fast eine ausfallsichere Möglichkeit, sich einen Wettbewerbsvorteil zu verschaffen.
Eine API-Schicht ermöglicht die Entkopplung des Frontends einer Website vom Backend
Insbesondere bietet Headless eCommerce mehrere Vorteile:
1. Höhere Geschwindigkeiten
Headless ist eine Voraussetzung für die Implementierung vieler geschwindigkeitsorientierter Technologien. Dies ist möglich, indem die Anzeigelogik auf die Client-Seite verschoben und das Backend für die beste Leistung optimiert wird. Da sich das Frontend nur auf die schnelle Bereitstellung von Inhalten konzentriert, kann es schneller und reaktionsschneller sein als ein Frontend, das die harte Arbeit dem Browser überlässt.
2. Wahlfreiheit
Viele eCommerce-Plattformen bieten ihren Benutzern proprietäre Frontends. Shopify Plus ist nicht anders und bietet eine Auswahl an responsiven Themen, die auf Shopifys flüssiger Vorlagensprache basieren. Wenn Sie kopflos sind, können Sie sich von den Fesseln der Herstellerbindung befreien und über die Frontend-Werkzeuge der Plattform hinaus greifen. Dies führt zu einer höheren Agilität und ermöglicht es Ihnen, Ihr Frontend unabhängig von der Roadmap Ihrer eCommerce-Plattform zu entwickeln.
3. Unabhängigkeit des Backend
Eine Investition in eine kopflose Website macht das Geschäft zukunftssicher. Sie besitzen den Frontend-Code und können ihn selbstbewusst entwickeln und in ihn investieren. Auf diese Weise können Sie es jederzeit auf eine andere, günstigere oder bessere eCommerce-Plattform verschieben. Selbst wenn Ihr Geschäft dutzende Integrationen mit Tools von Drittanbietern hat, müssen diese nicht für die neue eCommerce-Plattform neu geschrieben werden. Sie müssen lediglich die APIs der alten Plattform durch die der neuen ersetzen.
4. Bessere SEO
Eine kopflose Website ist nicht nur schneller, sondern bietet auch bessere SEO. Mit einer Headless-Website können Sie wählen, wie URLs, Metadaten, robots.txt-Dateien und andere Aspekte Ihrer technischen SEO behandelt werden sollen. Shopify Plus unterstützt dies nicht sofort.
5. Unterstützung künftiger Anwendungsfälle und Endpunkte
Mit einem Headless-Frontend wie Progressive Web Apps (PWAs)/Single-Page Applications (SPAs) kann der Betreiber das Geschäft zukunftssicher machen, neue Endpunkte frei hinzufügen und zusätzliche Funktionen entwickeln. Sie müssen lediglich eine Verbindung zu APIs herstellen. Sie können praktisch jedes Gerät oder jede Plattform als Endpoint hinzufügen und für Ihr Geschäft bezahlen, indem Sie Headless nutzen.
Das Geheimnis hinter den schnellsten Shopify Plus-Shops
„Headless“ ist die Grundlage für die Implementierung mehrerer fortschrittlicher Webtechnologien und Optimierungstechniken, die die Entwicklung schnellerer, reaktionsfähigerer Storefronts unterstützen. Zusammen können sie jede Shopify Plus Website optimieren, um maximale Geschwindigkeit, SEO und Umsatz zu erzielen.
Tragbare PWA-Frontends
Durch Headless und Kopplung Shopify Plus mit einem tragbaren PWA-Frontend können Sie blitzschnelle Browsergeschwindigkeiten auf der Website auf mobilen Geräten erzielen. Mit PWA profitieren Ihre Kunden von einem verbesserten Erlebnis für sofortige Seitenwechsel. So schnell PWAs-Browsing-Übergänge auch sind, ihre ersten Ladevorgänge dauern meist länger als herkömmliche, mehrseitige Websites. Um diesem Problem entgegenzuwirken und eine blitzschnelle Erfahrung von der Landung bis zur Kasse zu bieten, sollten Sie Ihr PWA durch serverseitiges Rendering und AMP-Unterstützung ergänzen.
Serverseitiges Rendering (SSR)
Serverseitiges Rendering ist eine entscheidende Webtechnologie, die schnelle PWAs begleitet. Ohne serverseitiges Rendering muss der Browser den gesamten JavaScript-Code herunterladen, parsen und ausführen, bevor irgendetwas auf dem Bildschirm wiedergegeben wird. PWAs ohne SSR haben Schwierigkeiten, eine Time to First Sinnful Lack (TTFMP) unter 2,5 s auf simulierten 3 g zu erreichen In Verbindung mit einem modernen CDN mit Edge-Computing-Funktionen kann ein Standort, der SSR verwendet, nahezu sofortige TTFMP-Zeiten erzielen.
SSR sorgt dafür, dass Besucher von E-Mails, sozialen Medien und Empfehlungen schnell beim ersten Laden ankommen. Dank SSR-Unterstützung bietet die PWA ein verbessertes Erlebnis mit blitzschnellen Ladezeiten der ersten Seite und sofortigen Seitenübergängen über die erste Seite hinaus.
Serverseitiges Rendering führt auch zu einer besseren SEO. E-Commerce-Unternehmen sind auf SEO angewiesen, und die einzige Möglichkeit, zu 100 % sicher zu sein, dass Ihre Website von Such- und Social Bots und Crawlern verstanden wird, besteht darin, sie in HTML zu übersetzen.
Dies ist besonders wichtig, wenn Sie ein JavaScript-schweres E-Commerce-PWA-Frontend für Shopify Plus erstellen. Sie müssen Ihre Seiten auf dem Server rendern, da Crawler und Bots JavaScript-Inhalte nicht zuverlässig indizieren.
Shopify Plus bietet keine integrierte SSR-Unterstützung.
Beschleunigte mobile Seiten (AMP)
Google AMP ist ein Open-Source-Framework zur Erstellung superschneller mobiler Webseiten durch Vereinfachung des HTML-Codes und Durchsetzung strenger Einschränkungen für CSS und JavaScript. Die durchschnittliche AMP-Seite wird nach der Suche in 500 Millisekunden geladen. Diese Seiten werden zwischengespeichert und auf dem Google-Server vorgerendert, sodass sie schnell bereitgestellt werden.
Shopify Plus bietet keine sofort einsatzbereite Unterstützung für AMP oder echte SSR, was die Optimierung der Ladevorgänge der ersten Seite auf Mobilgeräten erheblich erschwert. Sie müssen diese Funktionen Ihrer Website eigenständig hinzufügen. Sowohl für AMP als auch SSR ist ein Backend für Frontend erforderlich. Weitere Informationen dazu finden Sie unten.
Backend für Frontend (BFF)
BFFs spielen eine zentrale Rolle bei der Verwendung von Headless eCommerce und Microservice-basierten Architektur-APIs. Es handelt sich um eine diskrete Schicht in Ihrem Anwendungs-Stack, die es einem einzelnen Client, z. B. einer PWA oder einer nativen Android- oder iOS-App, ermöglicht, gemeinsam genutzte APIs effizienter zu nutzen, ohne sie für jeden Client zu optimieren. API-Aufrufe werden transparent „abgefangen“ und die übergebenen Argumente übersetzt, damit sie von einem bestimmten Endpunkt verstanden werden.
BFF ist der perfekte Ort für serverseitiges Rendering und AMP-Konvertierung für das Frontend. Ein BFF bringt auch viele weitere Vorteile für einen Shopify Store:
BFF und Geschwindigkeit
Ihr Frontend muss möglicherweise Aufrufe an mehrere Dienste orchestrieren und/oder Antwortdaten neu formatieren, um am besten dem Seitendesign gerecht zu werden. Dieser Code muss irgendwo ausgeführt werden. Mit einem BFF können Sie diesen Code aus dem Frontend-Bundle entfernen, sodass er klein und schnell bleibt. In den meisten Fällen können Antworten gecacht werden. Anstatt also diesen Shim-Code auf jedem Gerät jedes Benutzers bei jeder Anforderung auszuführen, wird er in der Cloud ausgeführt, die sich skalieren lässt, um den Anforderungen gerecht zu werden und nur dann, wenn ein Cache-Fehler auftritt.
Bei mobilen Clients sind zu viele HTTP-Anforderungen zeitaufwendig, sodass bei jedem Aufruf unnötige Millisekunden hinzukommen. Um die Anzahl der Anforderungen zu minimieren, ruft das Frontend in der Regel verknüpfte Daten über eine einzige API ab. Das bedeutet, dass manchmal das Backend für die UI-bezogene logische Verarbeitung verantwortlich ist, um die Anforderungen jedes Clients zu erfüllen. Dies ist ein ineffizienter Ansatz.
Wenn ein Backend für Frontend implementiert ist, greift das Frontend (mobil, Web) nur über den BFF auf die Backend-Microservices zu, und jeder Client erhält einen separaten BFF-Service. Mit einem BFF gibt es weniger gegenseitige Anrufe zwischen Mikrodiensten. Dies liegt daran, dass eine UI-Logik auf BFF-Ebene verarbeitet wird.
BFF und Entwicklungsgeschwindigkeit
Ein BFF erhöht die Entwicklergeschwindigkeit, indem verschiedene Entwicklungsteams unabhängig voneinander arbeiten. Die Entwickler können neue Funktionen hinzufügen, ohne die Core-APIs ändern zu müssen. Dies ist besonders nützlich, wenn die APIs von Shopify Plus bereitgestellt werden und nicht geändert werden können.
Minimierung der Herstellerbindung
Wenn Sie jemals einen Wechsel von Shopify auf eine andere eCommerce-Plattform benötigen, reduziert ein Backend für Frontend den Aufwand und die Kosten. Dies bietet einen großen Vorteil in Form der Flexibilität der Headless-Architektur.
BFF-basierte Frontend- und Backend-Entkopplung
Predictive Prefetching und CDNs mit Edge Computing
Predictive Prefetching ist eine erweiterte Funktion, mit der die Seitenbesucher am ehesten besuchen, bevor sie darauf klicken, im Pre-Cache gespeichert und gerendert werden. Mit einem modernen CDN mit Edge-Computing-Funktionen können Sie dynamische Daten an die Edge und dann an die Browser der Benutzer streamen, bevor sie sie anfordern. In Kombination mit diesen Technologien bleibt Ihr Shopify Plus-Shop dem Käufer 5 Sekunden voraus, egal wo er sich anklickt.
Indem Sie dynamische Daten vorab abrufen und an die Peripherie streamen, können Sie die Inhalte zwischenspeichern und sofort bedienen, auf die Verbraucher in Ihrem Shop warten. Shopify Store: Die JSON-Daten, die sich auf die verschiedenen Produkte, die Sie auf Lager haben, deren Preise und Informationen übertragen. Dafür benötigen Sie jedoch ein ausgeklügeltes CDN, das Ihre App versteht.
Layer0 CDN-AS-JavaScript optimiert die Cache-Trefferquoten auf unerreichte Ebenen und bringt Intelligenz an die Peripherie. Dies hilft Geschäftsinhabern, Trends und Optimierungsmöglichkeiten zu entschlüsseln, indem ähnliche Seiten als solche kategorisiert werden (z. B. PDP, PLP und Cart), anstatt nur eine endlose Liste von URLs anzuzeigen. So können Sie Maßnahmen ergreifen und Unterschiede bei den Ladezeiten der Website erkennen.
Layer0 CDN-AS-JavaScript hat eine Cache-Trefferquote von 95 %+ für dynamische Inhalte an der Edge, während die durchschnittliche E-Commerce-Website eine durchschnittliche Cache-Trefferquote von 15 % aufweist. Durch diesen Unterschied und die vorausschauende Prefetching sind große E-Commerce-Websites dem Käufer fünf Sekunden voraus, egal, wo er sich anklickt.
Wie schwer ist es mit Shopify Plus kopflos zu werden?
Die Wahl einer eCommerce-Plattform für den Betrieb Ihres Stores sollte die Unterstützung der Plattform für Headless-Websites und die Technologien berücksichtigen, die Websites in weniger als einer Sekunde ermöglichen. Viele E-Commerce-Plattformen sind monolithisch, da sie das Frontend mit dem Backend kombinieren.
Shopify Plus unterstützt zwar keine explizite Headless-Architektur, ermöglicht es Einzelhändlern jedoch, Headless-Stores zu betreiben und ein anderes Frontend-Framework (wie React Storefront) oder ein Headless-CMS wie Contentful zu verwenden, das von vielen Headless Shopify Builds verwendet wird.
Shopify Plus bietet eine solide, proprietäre Sammlung von Storefront-APIs, die Headless durch Zugriff auf die Inhalte und Komponenten der Plattform ermöglichen.
Bitte beachten Sie, dass Shopify Plus nicht offiziell Headless-Websites unterstützt und nicht viele schnell einsatzbereite Funktionen und Technologien bietet. Das ist nicht überraschend – die Plattform ist für die Verwaltung Ihres Bestands, Ihrer Preise und Ihrer Daten gedacht, und die Implementierung dieser Technologien erfordert oft viel Aufwand. Mit ein paar Bedenken ist Shopify Plus jedoch immer noch eine gute Wahl, da es Einzelhändlern relativ einfach macht, kopflos zu handeln und wichtige, geschwindigkeitsorientierte Taktiken umzusetzen.
Shopify Plus Profis
- Großartige APIs für Produktinformationen mit der Storefront API bietet Shopify Plus eine anständige Referenz für Produkte und Auftragsabwicklung, und die APIs sind gut dokumentiert.
- Das GraphQL API-Format Storefront API ist im modernen, zukunftssicheren Format GraphQL verfügbar.
Shopify Plus – Nachteile
- Kein gebrauchsfertiges PWA-Framework Shopify Plus unterstützt PWAs nicht nativ. Einige Händler führen jedoch PWAs auf der Plattform aus. Um dies zu ermöglichen, benötigt der Store möglicherweise ein Backend for Frontend (BFF), mit dem Sie Microservices zwischen der Storefront-API und dem PWA-Frontend ausführen können. Dies ist eine Möglichkeit, die APIs zu optimieren und zu vermeiden, separate APIs für jeden Client zu erstellen (und den Umfang der clientseitigen Logik zu minimieren).
- Kein AMP sofort einsatzbereit Shopify Plus bietet keine proprietäre AMP-Lösung (Accelerated Mobile Pages) an (obwohl die Implementierung von AMP mit kostenpflichtigen Apps vom Shopify App Marketplace möglich ist).
- API-Abdeckung während Shopify hat anständige APIs rund um Produkte, und es gibt keine vollständige API-Abdeckung für viele andere Dinge. Während beispielsweise ein Händler die Elemente im Navigationsmenü der Website über das Shopify Plus-Bedienfeld festlegen kann, gibt es keine API, um diese Menüelemente abzurufen. Eine Headless Shopify Plus-Implementierung bietet keine saubere Möglichkeit, ohne ein wenig Armwrestling und Problemumgehungen darauf zuzugreifen.
- Throttling Shopify Plus begrenzt die Anzahl der Anfragen, die Sie als einzelner Benutzer stellen können. Shopify Plus verfügt über einen speziellen Header für API-Aufrufe, sodass die BFF-Schicht nicht als einzelner Benutzer gezählt wird. Aufgrund der oben erwähnten API-Abdeckungsprobleme sind die Anforderungen jedoch möglicherweise nicht immer tatsächliche API-Aufrufe, und die BFF-Schicht zählt sie immer noch als von einem einzelnen Benutzer stammen. Dies geschieht, obwohl die Ebene, auf der viele Benutzer den Datenverkehr proxerieren, auf der sie zugreifen.
Wie Edgio (Layer0) den Prozess vereinfachen kann
Wir wissen, dass die Lektüre über all die technischen Akronyme PWA, SSR, AMP und BFF mit drei Buchstaben Ihren Kopf drehen kann. Ganz zu schweigen davon, dass die Implementierung dieser Technologien auf eigene Faust ein wenig mühsam sein könnte. Edgio (Layer0) erledigt all dies auf leistungsfähige, skalierbare Weise, die wenig bis gar keine DevOps oder Wartung erfordert.
Bei Edgio (Layer0) möchten wir unseren Kunden dabei helfen, Transparenz, Reichweite, Umsatz und Kundenzufriedenheit zu erzielen. Die einzige Plattform, die das Laden von Seiten in weniger als einer Sekunde für datenbankbasierte E-Commerce-Websites garantiert.
Wir unterstützen komplexe, dynamische E-Commerce-Websites dabei, Geschwindigkeiten von weniger als einer Sekunde zu erreichen, während gleichzeitig die Entwicklungsgeschwindigkeit und das Ertragswachstum gesteigert und DevOps-Kosten gesenkt werden.
Wir gewinnen nur, wenn unsere Kunden das tun. Wir haben sofort Shopify Stores in unserem Portfolio, die den entscheidenden Schritt getan haben, um ihre Position in der hart umkämpften eCommerce-Landschaft zu sichern.
Wie Planet Blue erfolgreich einen Instant Shopify Plus-Shop auf Moovweb XDN gestartet hat
Planet Blue stieg von 16-Sekunden-Browserübergängen auf 500 Millisekunden auf Layer0 (Edgio)
Planet Blue hat sich von einem Einzelhandelsunternehmen für kuratierte Bio-Bekleidung zu einem internationalen Designer und Omnichannel-Bekleidungshändler entwickelt. Ihr Instant Shopify Store auf dem C ermöglicht ihnen ein erstklassiges Einkaufserlebnis.
Vor dem Start auf tayer0 dauerte das Laden der mobilen Seiten von Planet Blue 10 Sekunden. Mehr als 70 % des mobilen Traffics des Einzelhändlers wirkten sich stark auf die Konversionsraten aus. Planet Blue erkannte, dass eine Überarbeitung seiner mobilen Erfahrung erforderlich war, um die Kundenanforderungen zu erfüllen und wettbewerbsfähig zu bleiben. Das Starten auf Layer0 reduzierte die Navigationszeit um 95 % (16 Sek. → 0,5 Sek. auf dem Desktop und 10 Sek. → 0,5 Sek. auf dem Handy), wodurch der Eindruck eines reibungslosen Online-Katalogs entsteht, wenn Benutzer die Website durchsuchen.
Ergebnisse von Planet Blue mit Layer0:
- 31 % Steigerung der Konversionsrate im Vergleich zum Vorjahr mit einer sofortigen Website auf Layer0
- Übergänge von 16 s → 0,5 s reduzieren die Geschwindigkeit auf Desktop-PCs um 97 %
- Übergänge von 10 s → 0,5 s reduzieren die Geschwindigkeiten auf Mobilgeräten um 95 %
- Durchschnittlich 60 % weniger Seitenlast auf allen Geräten
- Mehr als 20 % höhere Kundenzufriedenheit, da Seiten im Handumdrehen geladen werden
- Eine blitzschnelle E-Commerce-PWA, die mit React Storefront entwickelt wurde
- Serverseitiges Rendering und AMP-Unterstützung
- Prädiktives Prefetching
- CDN-AS-JavaScript optimiert die Cache-Trefferraten für dynamische Inhalte an der Peripherie, sodass der Store die Klicks des Käufers 5 Sekunden voraus vorhersagen kann.
Zusammenfassung
Der Übergang zu einer kopflosen Commerce-Architektur ist für viele Einzelhändler eine Top-Initiative – Macy’s, Walmart, Target, Nike, Airbnb und viele andere haben bereits den Wechsel vollzogen. Der Trend gewinnt aus drei Hauptgründen an Fahrt: Er bietet Freiheit von den Einschränkungen der Frontend-Tools der eCommerce-Plattform, ermöglicht die Implementierung erstklassiger Webtechnologien, die die Geschwindigkeit und SEO der Website erhöhen, und ermöglicht eine einfache Implementierung zukünftiger Anwendungsfälle.
Mit ein paar oben erwähnten Vorbehalten eignet sich Shopify Plus hervorragend für den Aufbau eines Headless-Stores und die Implementierung wichtiger, geschwindigkeitsorientierter Technologien. Kannst du es dir leisten, zurückgelassen zu werden?
