Headless Architecture: The Future of eCommerce

You’ve heard about headless eCommerce. The big guys are all doing it. 

But is it just a tech luxury, or will headless measurably grow your bottom line? How does it work? What’s the real upside? Downside? Does headless make sense for you? Will it replace traditional architecture?

You don’t need to be a coder to answer these questions. This article will tell you everything you need to know about headless. We’ll cover:

Why should you care about headless?

What results will headless deliver?

– 1. Native App Experience

– 2. Speed

– 3. SEO

– 4. New Features

– 5. Internationalization

How exactly does headless work?

Why is headlesscost-effectivee?

When is the right time to go headless?

Prediction: The most successful brands of the next decade will all be headless.

Why should you care about headless?

Summary: A headless implementation gives your customers the fluidity of a native app-like environment, the fastest possible site speed (bar none), improves your SEO ranking to support organic reach, lets you build and deploy features 20-30% faster, and increases global reach by streamlining internationalization.

Any eCommerce brbest-in-classe best in chigh-qualitys, high quality traffic, and still be stuck on a conversion plateau.

How is this possible?

Very often, the answer is a website that disappoints.

You’re in trouble if there are any (literally, ANY) friction points as users scroll and click. And yes, smart design can address some of those pain points, but not all.

Headless architecture eliminates the on-site friction that beautiful design can’t. 

What results will headless deliver?

1. Native App Experience

If you built your own app, you’d have to face the challenge of every app creator on the planet: getting people to download the app. Because no one wants to download another app.

In a headless architecture, you can give your user the most optimized experience, including all the bells and whistles you would’ve put in that dream app, in any web or mobile browser. No native app required.

In addition, headless is the only way to create your own Progressive Web App (PWA). With a PWA, someone visiting your site via a mobile browser can click a single button and immediately add your site (aka: your PWA) to their phone’s home screen. There’s no need to go to the App Store and follow the usual steps for downloading an app, although your PWA will also be downloadable from both the Apple and Google Play Stores.

2. Speed

The quick explanation for why headless is so much faster than every other architecture is cached content.

All the major eCommerce platforms load uncached content, which makes data retrieval inevitably slow. And because these are black box systems, there’s only so much optimization possible before you hit a threshold.

Non-headless implementations will never achieve instant page load.

Relying on uncached content is like playing poker with a dealer who has to slowly hand out all 52 cards in the deck to every player before the game can start. Users are simply unwilling to wait around for all that.

The average mobile landing page takes about 15 seconds to load. But 53% of mobile visitors leave pages that take longer than three seconds to load. 

Instant load time is no longer a nice-to-have. Data says it’s vital.

When a site goes headless, your eCommerce system continues gathering data on your products, orders, etc., but it’s not handling (and restricting) front-end anymore. Most of the page content, including dynamic elements, comes from cache. 

On top of that, headless can be run as a single page application (SPA), so once the first page loads, all other site pages are immediately available. There’s zero load time as the user moves from page to page. 

An extra second or two of site speed matters. A LOT.

Amazon calculated that a one-second slowdown in page load would cost them $1.6 billion annually. 

Google announced that by slowing search results by just four-tenths of a second, they would lose eight million searches per day.

When Walmart went headless, they saw up to a 2% increase in conversions for every one second of improvement in load time. Every 100ms improvement also resulted in up to a 1% increase in revenue.

And no, this data isn’t unique to the eCommerce giants. Because of their ubiquity, the speed these sites deliver has become the benchmark consumers expect, which means achieving the fastest possible site speed is just as relevant for someone driving $100 billion, $100 million, or $10 million a year. The principle scales down to apply to every brand, in every niche.

Headless Speed Conclusion

To reduce bounce rate and increase time on site, every page has to load in under two seconds, at a minimum (ideally, under one second). Only a headless implementation can consistently deliver these results.

3. Search Engine Optimization

You’ve probably already got someone handling SEO, so you’re all set, right? Odds are, you’re actually not.

Outside of a headless architecture, true search engine optimization is not possible. 

Here are the four main reasons why a headless implementation catapults SEO performance:

1. 100% URL Freedom.

On Shopify, Magento, etc you’re boxed into their strict naming structures. URL clutter like /pages or /products or /categories is unavoidable. When you go headless, you get full control of your URLs. This means two things:

1. Ease of use. Cleaner and more concise URLs are simpler to navigate. company.com/collections/shoes/flats complicates the user experience, but company.com/shoes gets right to the point, which is inherently better for SEO. 

2. Congrats! You just won the keyword lottery. With total URL ownership, you can incorporate targeted keywords into URLs. That alone increases the likelihood that your brand will appear when a user is searching for your product category, even if they had zero prior knowledge of you.

2. Your code. Your SEO priorities. 

When you first set up with them, Shopify dropped a bunch of code onto your site. Your theme was layered on top of their code, which means that you can’t prioritize the code sequence to meet your SEO goals.

Closed systems like Shopify can never provide maximum SEO flexibility and prioritization.

This is probably where a Shopify advocate will pipe up and say “But you can add h tags and XML product data inside Shopify!” Yes, that’s technically correct. However…

Google Merchant Center, XML feeds, and others, assign significance based on the sequence of code additions. So even though you can insert these data points within Shopify, Magento, etc, you can’t prioritize them in a way that’s strategically smart for your brand. With headless, this problem goes away.

Headless puts your SEO priorities in the driver’s seat.

When you have final say on every parameter being monitored in the shopping and product feeds (most of which do not occur by default in Shopify), you have full control of every single element a search engine needs. Making the most of these placements will inevitably boost your SEO ranking.

3. SEO rank rises with site speed.

Google has made it clear that page speed is a significant SEO ranking factor, and as we discussed above, page speed is one of the most obvious improvements when a site goes headless. 

After moving to a headless implementation, Rothy’s saw an 83% improvement in site speed.

Headless ensures that people are getting to your site faster, but with the optimized user experience that lightning quick page load offers, they’re also staying on each page longer, which brings additional benefits.

Imagine that Google is walking around your site with a clipboard, giving you SEO points for all the good things they find. The speed that’s only possible on headless gets you one point, but there’s a waterfall effect…

Increased site speed = ✔

High Average Session Duration = ✔

High Pages Per Session = ✔

Low Bounce Rate = ✔

This kind of SEO surge (and the resulting customer acquisition) is only possible on a headless integration, because the site speed that headless offers is not available on any other framework. 

4. International SEO just got way easier. 

International SEO tells search engines which countries you want to target, and which languages you use for business. Going international without it is…well, don’t.

Depending on whether you’re targeting individual countries or all people who speak Spanish, your international SEO strategy will focus on either ccTLDs, subdomains or sub-directories (likely, a combo of all three). 

On conventional eCommerce platforms, implementing the above comes with a long list of limitations and forced modifications. On headless, there are none. 

Speaking of which… 

We could make the argument that without headless, the full spectrum of strategic options (not just for SEO) will always be out of reach.

The average eCommerce platform is a blackbox system that comes with so many “No, you can’t do that!” flashing red stop signs. Headless gives you a clear runway. Once you’ve identified the next best move for your brand, headless lets you go ahead and implement that. No restrictions.

Headless SEO Conclusion

The improved speed that headless delivers automatically increases SEO ranking. Headless also removes the blackbox limitations to international SEO, allows for total URL naming freedom, and gives you control of where your SEO priorities appear in your site theme, all of which improves SEO results.

4. New Features

One of the biggest misconceptions about headless is that it gives you speed, but it takes away flexibility. 

Let’s clear that up.

A headless architecture doesn’t limit functionality or user experience – it expands it. 

Every site you’ll see featured in this article uses a wide range of features, like dynamic filters, sliders, custom fonts, wish lists, reviews and more. And even with all those features, they all still saw sizable improvements in speed and SEO ranking when they switched to a headless implementation.

Conventional eCommerce systems like Shopify, Magento, BigCommerce, all allow you to build features in their core platform. They call them apps, extensions, plugins, etc. So technically, there are infinite ways to extend their core platform into whatever you need it to be.

But there’s a but…

The costs of these extensions, in terms of development time, load time speed, security, and offline support, are significant. In a headless implementation, these drawbacks are resolved. 

Within a headless architecture, features can be built in 20-30% less development time.

Here’s why features in a headless implementation are built faster, load faster, are far more secure, and function even without internet connection:

1. Development Time 

Shopify’s theme framework (Liquid) does not come prebuilt with Vue or React, but Vue and React are the latest and best technology stacks that frontend/UI web development has to offer. 

While it’s possible to incorporate these technologies without leaving the Shopify platform, there are constraints and outright blocks to the Vue features that can be leveraged inside Shopify’s architecture. 

Here’s why we believe that move is worth it:

• Dynamic templates

If you want to use the same template on different product pages, but with different data, Liquid (that’s Shopify) can’t do that.

• Reusable components

You can create reusable components in React and Vue with a combination of HTML, CSS, and Javascript, so that these components function according to the guidance of the parent. 

For example, if you want a slider carousel to highlight your best reviews, Liquid will force you to build that carousel from scratch every time you want to use it. With React or Vue, we build it once, which massively reduces development time.

Headless features built for Rothys:

• No more manual updates

When you’re using React or Vue, you get two way binding. This means that a developer no longer has to update the output in all the required corners of the page when making changes. 

For example, inventory for product X isn’t only applicable to that product’s PDP. If you sell out of product X, that data has to also change on every other page where the product exists (PLP, homepage, search, etc.) Typically, this has to be updated manually. Two way binding allows a developer to update the data just once, and then ‘bind’ that update to all other relevant instances. This reduces development time and cuts down on bugs, which in turn reduces testing efforts and increases deployment speed.

• Community libraries

Let’s say your research shows that your audience would likely respond to a ‘Find the Right Product For You’ quiz. In a non-headless implementation, you’d have to purchase an app to make this happen. 

But the more apps you’ve got running on your site, the slower it becomes (and you know why that’s a problem). And even the most comprehensive app comes with restrictions, which limits you to the vision of the app-creator. 

But with Vue or React, you can access one of the many quiz libraries and then adjust that library however you want. You’re reducing development time by piggybacking on someone’s already excellent work, and then easily modifying that work to suit your exact needs. No app-hacking required.

To access everything that Vue and React offer, you have to migrate to a headless architecture.

2. Load Time Speed

• In an eCommerce system like Shopify, data is never fetched directly. Whatever app, plugin, or extension you’re using, it first has to go through Shopify’s framework to fetch the data, and then later that data gets rendered. This whole process is inevitably slow. This is why you see much faster speeds on Shopify sites that use very few apps.

• Another impact on load time is server side redirects. Most brands have dozens or even hundreds of these 301 redirects, but they’re a pain to manage in default Shopify. To overcome that, you can use client-side redirects with Javascript in the Liquid template, but this slows your site down even further and it’s also a serious SEO issue.

Both of these issues are resolved with Vue or React within a headless setup. You don’t have to make multiple requests to get the data you need, which increases load time.

3. Security

When building features and apps outside of a headless architecture, you become susceptible to two kinds of major security threats.

• Third party apps can insert scripts.

While there have been cases where third party apps have used customer data for their own purposes, the security breaches that can occur through these apps are rarely malicious. In most cases, the apps are managed by small teams who might not be focused on their app full time, which means security updates aren’t happening regularly. This is how a third party app’s code can unknowingly provide backdoor access to your site’s customer data.

• Using GraphQL Admin APIs

If you’re using a feature that requires Shopify’s Admin GraphQL APIs, you’ll have to expose the keys in the frontend, assuming that you’re handling them in Liquid. This opens you up to being hacked.

You’ll also have to acquire extensive cyber insurance and legal contracts with each third party provider to ensure your data and systems are secure, because you’re the one who’s liable to your customers for every feature on your site, not the app developer.

4. Offline Support

Imagine presenting a quarterly report to your executive team, and one section explains that 2% of attempted transactions couldn’t be completed because of “internet connection loss”.

Lots of people come in and out of wifi connection while traveling, for example, so if a potential customer started a transaction on a typical Shopify site, but then hopped on a flight or their Uber driver took them through a tunnel where signal dropped, the transaction gets abandoned. 

In a headless architecture, this problem goes away. You can serve your customers totally functional web pages even with weak or no internet connectivity. (Yes, you read that right.) 

With headless, your site is fully accessible even when users can’t get internet service.

Headless Features Conclusion

Headless allows you to build features faster, significantly increase load time speed, provide offline support, and eliminate liability and security concerns that are unavoidable when relying on the various apps and plugins offered by conventional eCommerce platforms.

5. Internationalization

As your brand grows, international markets will become increasingly important. But going international requires far more than just adding geographic tags to your Facebook ad targets.

To become a thriving global presence, you need an eCommerce store that leverages:

Most eCommerce platforms don’t provide a framework or technology stack that accommodates all of these needs, and the few that do, require inconveniences like:

• Owning/operating multiple online stores

• Tricking rounded USD currency

• Being stuck with the same design and layouts as your main store

• Having a ton of URLs, which weakens domain authority

• Involving multiple legal teams to coordinate country-specific compliance.

We’re the first to admit that taking your store international is a nuanced process. And while a headless architecture doesn’t address every single factor in your internationalization process, it makes things a whole lot easier because you can:

1. Use local currency.

Instead of requiring converted currencies or third party tools, a headless implementation can leverage prices stored in multiple Shopify stores, a Price List Manager (PLM), or a Product Information Manager (PIM). You’re no longer limited to a single price or currency. 

Customers see the currency that corresponds to their geolocation, and if they travel to a new country, the currency immediately adjusts without any additional work. 

2. Leverage CMS to store language translations.

A headless CMS like Prismic or Contentful can store multiple languages per page. This means that you don’t have to create duplicate pages or duplicate websites per language. You enter the translations for each page, and the browser figures out which language each user needs to see.

3. Vary design aesthetics, layouts, media assets, and merchandising.

With Headless, you can have any number of design templates on ONE codebase. 

While the data for your products or collections comes from the backend, you can style each differently, based on locale. But you only have to do this once on one codebase, not on multiple themes across multiple backend stores. 

4. Customize tax and regulatory compliance

With one codebase, you can determine what rules you want to activate and deactivate based on country-specific configurations.

For example, in the UK you have to add VAT into the product price. Some countries require duty or de minimis. In order to sell your products to other countries, you have to figure out these rules.

Headless provides a global set of rules you can turn off and on by country, while customizing the look and feel for users based on their geolocation. There’s no need to do anything on the individual store level. You have total autonomy to implement best-in-class UX principles in accordance with each country’s requirements, while controlling how final pricing is affected. 

5. Maintain a single domain

Since headless operates with only one codebase, with locale-specific configurations, you can run every country into one domain.

Headless reads GeoIP and browser language settings to personalize each user’s experience and route them to the right URLs.

See how it works for Rothys:

Headless Internationalization Conclusion

A headless implementation streamlines internationalization by allowing country-specific configurations on one codebase. Without the cost and development time required to build multiple stores on multiple domains, you can customize currency, language, and UX, while adhering to country-specific regulations.

How exactly does headless work?

In the typical eCommerce setup (let’s call it The Old Way), the frontend and backend management is combined into one system. This is massively restrictive. 

Instead of allowing UX and UI to each have their own playground, The Old Way forces everything into one sandbox.

A site that’s not headless is eCommerce with handcuffs.

There are limitations on the features you can deploy (and many you can’t use at all), and no matter how robust Shopify Plus, Magento, or Salesforce Commerce Cloud might be, none of these platforms are truly performance-centric. 

So it’s no surprise that Amazon, eBay, and Walmart have already jumped on the headless bandwagon. But headless isn’t just for the behemoths. Digitally-native brands like Rothy’s ($140M in 2018 revenue) and Four Sigmatic ($62M in 2018 revenue) have also seen major returns because of migrating to a headless architecture.

Technical Details on How Headless Works:

1. Caching Content (VUEX) using a blazing fast Javascript framework creates a seamless user experience.

2. Hosting applications on the EC2 servers gives you a huge boost in Time To First Byte (TTFB). In Shopify, this is usually between 1-2 seconds. On EC2 servers, it drops to 200-300 milliseconds.

3. Adding a cache layer for presentation and data significantly reduces response time.

4. The modern Javascript framework (Vue.js) offers full control using best practices and strategies to handle the loading of the page in a browser.

Why is headless cost effective?

So if headless is this wonderful, it probably carries an extra heavy price tag, right?

Consider these two comparisons to see why the opposite is true.

1. Calculate all your lost revenue due to high bounce rate, low time on site, ranking low (or not at all) for your product/niche due to poor SEO performance, sub-par features or not enough features, international customers exiting because their language or currency isn’t accommodated for, and the low conversion rate that all these things contribute to. That number will be miles beyond the investment of migrating to headless.

2. Several (not all) of the benefits that a headless architecture provides could be acquired with a native app. But if you compare the cost of building and maintaining that app, plus the cost of the acquisition channels that would have to be devoted to the arduous task of getting consumers to download the app, headless is exponentially more cost effective. 

And unlike apps, headless allows you to build a single version of your site that functions beautifully on every device, regardless of the operating system (iOS, Android, etc.) or the constraints of your eCommerce platform.

When is the right time to go headless?

We’ve spent this entire article highlighting the endless eCommerce optimizations that a headless architecture offers. But the truth is, headless isn’t right for everyone. 

Headless is probably NOT for you if:

• You’re a SMB without a development agency on retainer OR a dedicated development team of at least 2 people 
• You’ve been in business for less than 2 years.
• You’re south of $20M in revenue.

Headless is the ideal architecture for any company that wants an acquisition edge (that’s everyone), and has the financial resources to either hire and manage your own team of highly skilled coders, or partner with a development agency that has a proven track record of building and maintaining successful headless implementations. 

In conclusion…

Headless separates your backend and frontend systems, so that one is no longer limited by the other. Never sacrificing design or functionality, a headless architecture provides unmatched site speed, improved SEO rankings, ease and autonomy when developing features, and streamlines the internationalization process. For DNVBs making more than $20M in revenue, headless is the clear choice.