Headless CMS: We take a close look at the content management systems

A backend and a frontend - inseparably combined. For a long time, the fixed connection of the presentation layer and the logic behind it was considered the go-to solution in e-commerce. However, at the latest since the arrival of mobile shopping, this has been questioned: nowadays, content must be accessible across a wide range of channels and device types without any loss of quality. However, this is difficult to achieve with monolithic systems.

The headless CMS, on the other hand, meets the requirements of a multichannel strategy much better. This is one of the reasons why it has been one of the e-commerce buzzwords par excellence for some time now. In this blog post, you will learn what the term is all about, which may seem a bit strange at first glance, and what the strengths of headless commerce are.

Headless CMS: Full-stack technology is no longer up to date

Content management systems, CMS for short, have significantly simplified the creation and maintenance of content on the web. The most common representatives such as WordPress, Typo3 and the like always follow the same approach: the user uses a specific template and creates his content in the backend, which is then displayed to visitors in the frontend. The template determines the visual appearance of the content.

This principle works well as long as the content is optimized for only one device category. From today's point of view, however, this is no longer up to date, as user behavior on the web is now very multi-layered. In the B2C sector in particular, the proportion of mobile access is increasing more and more. It can be assumed that smart speakers such as Amazon's Alexa, Siri, Cortana & Co. will change this development once again. As early as 2021, 27 percent of smartphone users used voice search to search the web (source: Google). Smartwatches are another device category that will have a lasting impact on user behavior.

What is a Headless CMS?

Unlike the classic full-stack approach, the frontend is separated from the backend in a headless CMS. The actual content management system consists only of the backend, a database, and an API through which the frontend is connected. This architecture offers many advantages, which we will discuss below. But first, we would like to point out the differences between the headless CMS and the full-stack system.

Headless CMS advantages for companies

Decoupling the frontend from the logic of a store system offers numerous advantages. In the following, we will explain the 5 most important ones in more detail.

#1 The creation of target group-specific content is simplified

According to a Statista survey, 44.59% of the website operators surveyed personalize the content of their online presence. In doing so, they are responding to the call of their customers, who value an individualized shopping experience and want to find information and products that are relevant to them quickly.

A headless CMS makes it easier to create customized content. It enables specific layouts for different channels. Regardless of the device category, certain page elements can also be played out according to location, time and/or season.

#2 Good adaptability to the life cycles of a system.

Once a system integrated into the backend is running smoothly, it performs its service for several years. ERPs in particular are sometimes in use for a decade or more without receiving any significant updates - their core processes still function. In addition, replacing the system would be very time-consuming and usually also associated with high costs.

A frontend, on the other hand, has a much shorter lifecycle. What is considered modern and user-friendly today may already be outdated in two years. By separating the backend and frontend within the Headless CMS, you can better respond to the different lifecycles of both levels. Thus, the backend remains largely unaffected by a modernization of the frontend and vice versa.

#3 Better performance

Even though full-stack CMSs have greatly simplified content creation, as mentioned above, the monolithic architecture often turns out to be a performance bottleneck. The reason for this is that the systems often include a high proportion of unused CSS, HTML and JavaScript code, which slows down loading speeds. This causes the user experience to suffer, especially on mobile sites. In headless commerce, it is easier to optimize the frontend separately from the backend because the backend processes do not have to be considered.

#4 SEO Benefits

An improved user experience and faster loading times also result in indirect advantages for search engine optimization, which is still essential for the visibility of online stores.

It is to be expected that users who are presented with content that is suitable for them are less inclined to leave a page again directly. Dwell time and bounce rate are indicators for search engine bots, as it can be assumed that pages with particularly long sessions offer relevant and high-quality content. Accordingly, they are ranked higher.

Furthermore, fast loading times are not only significant for the user experience. Website performance is also becoming an increasingly important criterion for Google & Co. For this reason, Google introduced the Web Vitals in 2021, which are intended to better assess loading times and are included in the indexing as a ranking factor.

#5 Shortening of process chains

Even today, a responsive website is often "only" the mobile version of a site optimized for the desktop. If you wanted to use other channels in addition to the desktop and mobile versions, you would need different full-stack systems. You would therefore have to maintain your content several times, which unnecessarily inflates your processes and ties up resources.

A headless CMS allows you to centralize your content, which can be maintained across channels in one and the same backend. In addition, modern systems often have so-called pattern libraries, which define exactly how a particular element should look. This creates consistency and speeds up the creation of new pages.

Shopify Plus, Headless thanks to Storefront API

Of course, the Canadian commerce platform Shopify is not immune to the headless commerce trend. The system's enterprise solution, Shopify Plus, can therefore be operated as a headless CMS. This is made possible by the so-called Storefront API. This is based on the GraphQL query language, which guarantees a particularly high-performance and resource-saving interface.

Merchants can use the API to program their own frontends or connect external systems, e.g.:

• Storyblok

• Makaira

• Contentful

Headless CMS for easy multi-channel publishing

A headless CMS enables the efficient management and publication of content across different channels such as websites, mobile apps and IoT devices. By separating content and presentation, a headless CMS offers flexibility so that the same content can be presented in different formats and designs. With API-based delivery, content can be delivered seamlessly and consistently across different platforms, improving the user experience.

Content only needs to be created once and can then be reused on different channels, ensuring consistency and efficiency. Developers can ensure content is presented optimally for each format by using responsive design, native app development or cross-platform solutions. Real-time updates and synchronization ensure that all channels always display the latest content.

Analytics tools help to monitor and optimize the performance of content on the various channels. This comprehensive control and flexibility makes content management across all channels much more efficient and consistent. Overall, a headless CMS offers a powerful solution for a modern, cross-channel content strategy.

Headless CMS vs. Traditional CMS vs. Decoupled CMS

A Traditional CMS is an all-in-one solution where the backend and the frontend are closely connected. An example of this is WordPress. A Decoupled CMS, on the other hand, is a hybrid solution that combines elements of the Headless CMS and the Traditional CMS. The differences between the three systems are shown in the table below:

Headless CMS Examples: These headless CMS exist

Storyblok

Storyblok is a headless CMS that enables powerful content experiences. What makes this CMS special is that it is aimed at both developers and marketers. These are the features of Storyblok:

• Content creation

• Asset management

• Rich text editor

• Image management

• Reusable content

• Content performance analysis

• Internal search

Latori client Horando decided to use the headless CMS Storyblok. We programmed this for them, added content and connected the CMS to Shopify Plus using an API.

Latori also uses the content management system to create content and present it on their website.

Ghost

The Ghost CMS is used by NASA and Apple and is probably the best-known headless CMS. The content management system is based on the Node.js framework and, thanks to the REST API provided, is ideally suited as a headless CMS.

Cockpit

Cockpit is a German headless CMS. The open source solution is best suited for the usual PHP stack.

Directus

Directus is a self-hosted content management system with an open source based framework. The system offers an API as well as an intuitive admin interface. It is based on the PHP programming language and Backbone.js.

Our conclusion about Headless CMS

In view of its many advantages, the headless CMS is highly likely to replace monolithic full-stack systems in the medium and long term as user behavior on the web continues to diversify.

Shopify Plus can already be operated headless today, enabling retailers to implement an efficient multi- and omnichannel strategy.