Headless CMS: Wir nehmen die Content-Management-Systeme unter die Lupe

Ein Backend und ein Frontend – untrennbar miteinander vereint. Lange Zeit galt die feste Verbindung der Präsentationsebene und der dahinterliegenden Logik als Go-to-Lösung im E-Commerce. Spätestens seit dem Einzug des Mobile Shopping wird diese jedoch hinterfragt: Heutzutage müssen Inhalte über verschiedenste Kanäle und Gerätetypen ohne Qualitätsverlust abrufbar sein. Mit monolithischen Systemen kann dies aber nur schwer erreicht werden.

Das Headless CMS hingegen wird den Anforderungen einer Multichannel-Strategie sehr viel besser gerecht. Nicht zuletzt deshalb hält es sich bereits seit längerer Zeit als eines der E-Commerce-Buzzwords schlechthin. Was es mit dem Begriff auf sich hat, der auf den ersten Blick vielleicht etwas befremdlich anmutet, und worin die Stärken des Headless Commerce liegen, erfahren Sie in diesem Blogbeitrag.

Headless CMS: Full-Stack-Technologie ist nicht mehr zeitgemäß

Content Management Systeme, kurz CMS, haben die Erstellung und Pflege von Inhalten im Web merklich vereinfacht. Die gängigsten Vertreter wie WordPress, Typo3 und dergleichen folgen immer demselben Ansatz: Der Nutzer verwendet ein bestimmtes Template und legt seine Inhalte im Backend an, die Besuchern im Frontend ausgespielt werden. Dabei bestimmt das Template maßgeblich über deren visuelle Aufmachung.

Dieses Prinzip funktioniert gut, solange der Content für nur eine Gerätekategorie optimiert wird. Aus heutiger Sicht ist dies aber nicht mehr zeitgemäß, da das Nutzungsverhalten im Web inzwischen sehr vielschichtig ist. Insbesondere im B2C-Bereich nimmt der Anteil der mobilen Zugriffe immer stärker zu. Es ist anzunehmen, dass Smart Speaker wie Amazons Alexa, Siri, Cortana & Co. diese Entwicklung noch einmal verändern werden. Bereits 2021 verwendeten 27 Prozent der Smartphone-Nutzer Voice Search für die Suche im Web (Quelle: Google). Mit Smartwatches beeinflusst eine weitere Gerätekategorie das Nutzerverhalten nachhaltig.

Was ist ein Headless CMS?

Anders als beim klassischen Full-Stack-Ansatz ist das Frontend bei einem Headless CMS vom Backend entkoppelt. Das eigentliche Content Management System besteht nur aus dem Backend, einer Datenbank und einer API, über die das Frontend angebunden wird. Diese Architektur bietet viele Vorteile, auf die wir im Folgenden noch eingehen wollen. Zuvor möchten wir aber noch einmal die Unterschiede zwischen dem Headless CMS und dem Full-Stack-System aufzeigen.

Headless CMS Vorteile für Unternehmen

Das Frontend von der Logik eines Shopsystems zu entkoppeln, bietet zahlreiche Vorteile. Nachfolgendend erläutern wir Ihnen die 5 Wichtigsten einmal näher.

#1 Die Erstellung zielgruppengerechter Inhalte wird vereinfacht

Einer Statista-Umfrage zufolge personalisieren 44,59% der befragten Webseitenbetreiber die Inhalte ihrer Onlinepräsenz. Damit folgen sie dem Ruf ihrer Kunden, die ein individuelles Einkaufserlebnis schätzen und für sie relevante Informationen und Produkte schnell finden möchten.

Ein Headless CMS macht die Erstellung individuellen Contents einfacher. Es ermöglicht spezifische Layouts für verschiedene Kanäle. Unabhängig von der Gerätekategorie lassen sich bestimmte Seitenelemente auch standort-, uhr- und/oder jahreszeitgesteuert ausspielen.

#2 Gute Anpassungsfähigkeit an die Lebenszyklen eines Systems

Sobald ein ins Backend integriertes System erst einmal reibungslos funktioniert, verrichtet es seinen Dienst über mehrere Jahre. Insbesondere ERPs sind manchmal ein Jahrzehnt oder länger im Einsatz, ohne dass diese nennenswerte Updates erhalten – ihre Kernprozesse funktionieren dennoch. Zudem wäre ein Austausch des Systems sehr aufwändig und für gewöhnlich auch mit hohen Kosten verbunden.

Ein Frontend hingegen hat einen sehr viel kürzeren Lebenszyklus. Was heute als modern und nutzerfreundlich gilt, kann in zwei Jahren bereits wieder überholt sein. Durch die Trennung von Backend und Frontend innerhalb des Headless CMS können Sie besser auf die unterschiedlichen Lebenszyklen beider Ebenen reagieren. So bleibt das Backend von einer Modernisierung des Frontends weitgehend unberührt und umgekehrt.

#3 Bessere Performance

Auch wenn Full-Stack-CMS die Content-Erstellung, wie gesagt, sehr vereinfacht haben, entpuppt sich die monolithische Architektur häufig als Flaschenhals in Sachen Performance. Der Grund dafür ist, dass die Systeme oft einen hohen Anteil nicht genutzten CSS, HTML- und JavaScript-Code mitliefern, der die Ladegeschwindigkeiten ausbremst. Dies führt vor allem auf mobilen Seiten dazu, dass die Nutzererfahrung leidet. Im Headless Commerce lässt sich das Frontend losgelöst vom Backend leichter optimieren, weil die Backend-Prozesse nicht betrachtet werden müssen.

#4 SEO-Vorteile

Aus einer verbesserten Nutzererfahrung und schnelleren Ladezeiten ergeben sich auch indirekte Vorteile für die Suchmaschinenoptimierung, die für die Sichtbarkeit von Onlineshops nach wie vor von essenzieller Bedeutung ist.

Erwartbar ist, dass Nutzer, denen für sie passender Content ausgespielt wird, weniger geneigt sind, eine Seite direkt wieder zu verlassen. Verweildauer und Absprungrate sind Indikatoren für Suchmaschinen-Bots, da davon auszugehen ist, dass Seiten mit besonders langen Sitzungen relevante und hochwertige Inhalte bieten. Sie werden dementsprechend höher im Ranking eingestuft.

Darüber hinaus sind schnelle Ladezeiten nicht nur für die Nutzererfahrung bedeutsam. Auch für Google & Co. wird aus der Webseiten-Performance ein immer wichtigeres Kriterium. Google hat 2021 aus diesem Grund die Web Vitals eingeführt, die die Ladezeiten besser beurteilen sollen und als Rankingfaktor in die Indexierung mit einfließen.

#5 Verkürzung von Prozessketten

Eine responsive Webseite ist auch heute oft „nur“ die mobile Version einer für den Desktop optimierten Seite. Wollten Sie neben der Desktop- und der mobilen Version weitere Kanäle bespielen, bedürfte es verschiedener Full-Stack-Systeme. Sie müssten Ihren Content deshalb mehrmals einpflegen, was Ihre Prozesse unnötig aufbläht und Ressourcen bindet.

Ein Headless CMS ermöglicht die Zentralisierung Ihrer Inhalte, die kanalübergreifend in ein- und demselben Backend gepflegt werden können. Zudem verfügen moderne Systeme oft über sogenannte Pattern Librarys, in denen genau definiert ist, wie ein bestimmtes Element auszusehen hat. Das schafft Konsistenz und beschleunigt die Erstellung neuer Seiten.

Shopify Plus, Headless dank Storefront API

Natürlich geht der Trend des Headless Commerce auch an der kanadischen Commerce-Plattform Shopify nicht vorbei. Die Enterprise-Lösung des Systems, Shopify Plus, lässt sich deshalb als Headless CMS betreiben. Dies ermöglicht die sog. Storefront API. Diese basiert auf der Abfragesprache GraphQL, die eine besonders performante und ressourcensparende Schnittstelle garantiert.

Händler können über die API eigene Frontends programmieren oder externe Systeme anbinden, z.B.:

• Storyblok

• Makaira

• Contentful

Headless CMS vs. Traditional CMS vs. Decoupled CMS

Bei einem Traditional CMS handelt es sich um eine All-In-One-Lösung, bei der das Backend und das Frontend eng miteinander verbunden sind. Ein Beispiel hierfür ist WordPress. Ein Decoupled CMS hingegen ist eine Hybrid-Lösung, die Elemente des Headless CMS und des Traditional CMS vereint. Welche Unterschiede es zwischen den drei Systemen gibt, zeigen wir Ihnen anhand der Tabelle:

Headless CMS Beispiele: Diese Headless CMS gibt es

Storyblok

Storyblok ist ein Headless CMS, das leistungsstarke Content-Erlebnisse ermöglicht. Das Besondere an diesem CMS ist, dass es sich sowohl an Entwickler, als auch an Marketer richtet. Das sind die Funktionen von Storyblok:

• Erstellen von Inhalten

• Asset Management

• Rich-Text-Editor

• Bild Management

• Wiederverwendbarer Content

• Analyse der Content Performance

• Interne Suche

Latori Kunde Horando hat sich für die Nutzung des Headless CMS Storyblok entschieden. Dies haben wir für sie programmiert, Inhalte eingepflegt und das CMS mithilfe einer API an Shopify Plus angebunden. 

Auch Latori nutzt das Content-Management-System, um Inhalte zu erstellen und auf der Website zu präsentieren. 

Ghost

Das CMS Ghost wird von der NASA und Apple genutzt und ist wohl das bekannteste Headless CMS. Das Content-Management-System basiert auf dem Node.js-Framework und eignet sich, dank bereitgestellter REST-API, bestens als Headless CMS.

Cockpit

Bei Cockpit handelt es sich um ein deutsches Headless CMS. Die Open-Source-Lösung eignet sich bestens für den üblichen PHP-Stack. 

Directus

Directus ist ein self-hosted Content-Management-System mit einem Open-Source-basierten Framework. Das System bietet neben der API auch eine intuitiv bedienbare Admin-Oberfläche. Es basiert auf der Programmiersprache PHP und Backbone.js.

Unser Fazit zum Headless CMS

Angesichts seiner vielen Vorteile wird das Headless CMS monolithische Full-Stack-Systeme mittel- und langfristig mit hoher Wahrscheinlichkeit ablösen, wenn sich das Nutzerverhalten im Web weiter diversifiziert.

Shopiy Plus lässt sich schon heute headless betreiben und ermöglicht Händlern so die Umsetzung einer effizienten Multi- und Omnichannel-Strategie.