Headless eCommerce Approach for B2C and B2B Mobile Shopping

In this article, we discuss why the headless ecommerce architecture of your B2C or B2B ecommerce platform is so important to work with mobile devices on the customer side.

eCommerce conversion rate as a headless driver for the mobile market

As physical sources shut down for the pandemic, the only place of conversion for so many businesses have become their ecommerce outlets. And if you sell fairly common products and are not a monopolist in your market niche, your business portal has competitors.

First, the trend of the growing share of mobile devices in ecommerce must be pointed out. According to Statista, the share of purchases from mobile devices in the United States will have grown to 15% by 2021, which is twice as much as it was 5 years ago. And if people did not stay at home during the pandemic, the growth of mobile traffic would be even more impressive. In 2021, according to Statista, the total mobile traffic to websites will reach 51%, overwhelming desktop browsing.

Among the many factors that are important for mobile users to make a purchase decision on an ecommerce portal (which is called the conversion rate of visitors to buyers), the speed of loading product web pages is rather essential. There is a lot of market research on how fast pages should load so the user does not get annoyed and does not leave to buy from a competitor's site.

Here are the most significant figures from network service provider Cloudflare to emphasize the importance of website loading speed. We will then tell you how headless technologies help cut it down even further.

  • 64% of mobile users expect pages to load within 4 seconds,

  • 56% of customers abandon the website if it takes longer than 3 seconds to load,

  • 79% of customers are unlikely to return to the vendor site due to low load speed before,

  • 20% of customers will not return to the website at all if they were disappointed with load speed,

  • 1 sec of page load delay brings 7% reduction in conversion rate.

By the way, one of the most well-known site load speed metrics is Google's tool called PageSpeed Insights. You can enter your website and Google will show the loading and will provide some general recommendations to improve the result.

PageSpeed Insight report example when checking from Belgium

PageSpeed Insight report example when checking from Belgium

When assessing the page load speed by PageSpeed Insight or any other tool, it is necessary to take measurements at different times of the day and through different Internet providers in order to obtain an average result.

Technology updates help headless ecommerce platform run faster

What if all the well-known ways to speed up website loading, such as resizing images and optimizing the widget code, have already been applied? Then, it is time to talk about headless as an ecommerce architecture that can further reduce the load time of product pages on ecommerce sites. Industry metrics report up to 20% increase in conversion rate thanks to overall site performance and content personalization associated with headless.

But why exactly does the headless approach speeds up websites? Let's define that the speed of an ecommerce portal can be increased because of new front end technologies, since front end innovations (such as PWA (Progressive web apps), HTTP/2, hybrid applications, lazy loading) appear most frequently on the market. Besides, the front end itself cannot significantly speed up the work of the ecommerce portal since product data is pulled from the back end, which should also work faster.

At the same time, the releases of technologies for the front end and back end could occur at a different pace, depending on the software vendor’s roadmap. The headless approach allows deploying separate updates of technologies on each part of the ecommerce platform (front end, back end, middleware), and can therefore quickly respond to new technological trends. In contrast, new technologies require almost a complete change of the monolithic system or a complex time-consuming update, which usually takes months.

As a result, the refresh rate of B2C or B2B ecommerce platforms built on a headless commerce approach will be noticeably higher than that of monoliths, which gives an overall performance increase due to a more dynamic pace of implementation of new technologies.

Industry metrics report up to 20% increase in conversion rate thanks to overall site performance and content personalization associated with headless.

Buzzword comparison: Headless ecommerce platform vs monolithic system

Everyone heard the term of headless ecommerce like a little buzzword in the industry for a few years now, but not too many people truly know what it is and what headless actually means.

Headless ecommerce is part of this general idea of decoupling the whole front end presentation layer from your back end and splitting them. The decoupling of the front end means it communicates with the back end over APIs, and you are not restricted to whatever framework the platform has in the task to customize the front end.

If you ask how it is otherwise, you can refer to the example of the traditional architecture of the ecommerce platform called a monolith. An example of a monolithic platform is Magento, and if you have a look at their reference architecture diagram from the official documentation, you'll see how much of the complex operational aspects are centered around performance.

Monolith architecture diagram on Magento example

Monolith architecture diagram on Magento example

Let’s have a look at this monolith. There is a Varnish cluster for edge caching on top of the system (Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy).

Below are several different web nodes, and behind that, another caching layer built with Redis to lighten the load on the actual database. A large database cluster with replicas serves the product catalog with a dedicated search layer of the stack on top of Elasticsearch and then a dedicated storage layer just for images. Other parts are CDN content distribution, RabbitMQ open source message-broker software, proxying, etc.

All these complicated components are combined just to operate at the level of acceptable performance in terms of a modern ecommerce experience. But if you look at this whole monolithic stack, it seems like it was cobbled together without any flexibility, and the templates are also inside this monolithic system. The summary here is that all these things are difficult to customize for the business processes of a particular brand.

When you really start to decouple the front from the back end, you are able to separate these parts. For the front end, as you'll see in the “Monolith vs Headless” diagram below, there are different architectural approaches, with the cool part being the headless one as you have a self-standing front end that developers can work with individually.

Brands that really want to give their users a luxury customer experience can completely customize how front ends look. Moreover, they have the flexibility to tackle smaller projects like a quick addition of a feature to an existing front end.

Monolith vs headless ecommerce

Monolith vs headless diagram

Within a typical headless ecommerce architecture (see it right), there are usually three layers of the digital commerce ecosystem: 

1. Front-end layer

The first one is the front-end layer on the top, where websites, PWA and mobile apps are most popular. This layer also includes a chatbot, social network pages, and others. The key factor for success is the ability to implement, test and improve customer UI/UX. The ideal scenario is when businesses can adapt the UI in no-code or low-code development cost.

2.  Headless real-time layer

The first one is the front-end layer on the top, where websites, PWA and mobile apps are most popular. This layer also includes a chatbot, social network pages, and others. The key factor for success is the ability to implement, test and improve customer UI/UX. The ideal scenario is when businesses can adapt the UI in no-code or low-code development cost.

3. The ecommerce back-office layer

The first one is the front-end layer on the top, where websites, PWA and mobile apps are most popular. This layer also includes a chatbot, social network pages, and others. The key factor for success is the ability to implement, test and improve customer UI/UX. The ideal scenario is when businesses can adapt the UI in no-code or low-code development cost.

2 ways to implement Headless eCommerce

In general, there are two ways to implement headless ecommerce.

  1. The first one is developing your own headless ecommerce architecture of an online store and migrate from the current monolithic ecommerce solution. This takes a lot of time (months if not years), is very expensive and is no guarantee for a successful result.

  2. The second way is to migrate the online store to a new B2B ecommerce platform like Virto Commerce, in which the headless principle has already been implemented. Virto Commerce is an example of a platform with a headless approach that perfectly matches the above description. For the Virto Commerce architecture reference diagram, please visit its documentation section.

Virto Commerce headless ecommerce approach

Headless approach by Virto Commerce

Book a quick demo to explore Virto Commerce Headless ecommerce platform

Top 7 benefits of Headless eCommerce approach

  1. Portal performance
  2. Flexibility & Integration
  3. Developer productivity & agility
  4. Ease of experimentation & tests
  5. Regulations compliance
  6. Limitless Personalisation
  7. Security

According to “The state of headless: A global research report”, in February 2021, about 64% of all enterprises already adopted headless architectures, and 21% were at the stage of evaluating the use of it.

The headless approach allows businesses to remain truly flexible as they can implement the features and functionality, they need to run a really profitable business. Additional benefits of this structure include:

In February 2021, about 64% of all enterprises already adopted headless architectures, and 21% were at the stage of evaluating the use of it.

– Portal performance

With a headless architecture, developers are able to pick any framework, now or next year, and make changes to the platform modules without the risk of an entire system crash. Front end developers work efficiently at the next level, which means lower operating costs for business. UI design changes, testing and code optimization can be done without impacting the platform stability.

– Flexibility & integration

Product data from the asynchronous back end (ERP, PIM, CRM, etc.) can be delivered to the front end over the integration layer without impacting the back end functionality since they are decoupled, making it easier to update systems and launch new touchpoints.

– Development productivity and experimentation

The speed of development and experimentation increases if every deployment gives a preview where the developers can share the ideas with stakeholders and fixing bugs.

– Personalization & customization

With a traditional monolith ecommerce, the ability to personalize the customer experience on the fly is nearly impossible. A toolbox of personalization solutions enables marketers to deliver effective product promotions and offers to customers at every touchpoint. IT restrictions no longer interfere with performing marketing campaigns while constant content updates become easy to do.

– Compliance & security

With a headless approach, the actual PCI DSS compliance is completely delegated to the credit card and e-money providers, making it easier for the merchant or B2B portal to comply with the payment processing legislation and security threats.

Caution — the headless approach is not for everyone.
The well-known English proverb fits perfectly well for headless: “Easier said than done”. Headless is suitable for enterprise portals where businesses have sufficient resources to pay for their IT team or pay for implementation partner services. A headless implementation can require additional team members and developers to manage and execute, which also affects the total cost of ownership. Small businesses are better off considering an out-of-the-box solution that meets most needs under one roof.

Conclusion

It is imperative these days to offer users with complete omnichannel customer experience, from brick-and-mortar stores to a wide range of online applications. The ability to authenticate users across multiple devices keeps the sales pipeline running smoothly and is critical for customer retention and acquisition.

With a headless approach implementation, B2C and B2B businesses get the ability to build their ecommerce solution in a Lego-like style. Developers become able to listen to decision-makers and choose which pieces of software are most valuable to drive profitable business.

Get this checklist to smoothly transform to a Headless eCommerce platform
Evgeny Grigul
Co-founder Virto Commerce