Over the last months commerce has completely changed. Disrupt or be disrupted.
The hype about Headless Commerce has held up for some time now. But what is this “headless” anyway? And what’s all the fuss about?
In this guide, you will learn what Headless is, what its advantages and gotchas are, and what it could mean for your business. We will look at one combination, Shopify in combination with Gatsby as a frontend, specifically and will go through a general side-by-side comparison of traditional and headless Shopify stores. We will discuss as well whether and when you should consider switching to a headless setup.
Headless has been a myth for some and a revelation for others. After the changes the pandemic has accelerated, 10 years of e-commerce growth in 3 months, it is clear though, that you should try to count to the latter group.
Because Headless Commerce improves many of the most important metrics for you and your customer and because the space is becoming increasingly more competitive:
As legacy wholesalers go online and global retail giants like
Walmart expand their ecommerce initiatives, digital competition is
heating up. Likewise, competitors in product categories not
traditionally in demand online are also competing for ecommerce
The Future of Ecommerce Report 2021
You surely don't have to become an expert, but you should try to understand what implications a switch to the right headless stack could have for your business or for your competitor's business.
61% of retailers surveyed they are either currently leveraging or planning to leverage a headless commerce architecture in 2020.
2020 Ecommerce Leaders Survey
"Headless" means the separation of the front-end (the head and visual UI) and the back-end (the body and the logic) of your store.
This decoupling allows you to choose technologies for the front-end of your store that can bring major business benefits with them.
The advantages and disadvantages of course differ depending on what technologies you decide to use for your front-end. In this guide, we will look at a specific combination that people are excited about, namely the JAM-Stack or specifically Gatsby.
This combination is the Shopify back-end with frameworks like Gatsby or Next. Let’s take Gatsby as an example and go into the advantages frontends created with it provide in combination with Shopify.
Site performance is important and if a page is slow that’s bad for your bottom line. Most people understand that. What they mostly don’t understand is how important it is.
Google and Deloitte made a study about it in 2020. The title? “Milliseconds Make Millions”.
If you are serious about your eCommerce business, you should have a look at it. As a small teaser: a 0.1-second improvement in page speed can lead to 8% more conversions. 0.1 seconds.
Combine that with 50% of customers abandoning a website if it takes more than 3 seconds to load and 20% of those never returning.
Performance is about improving conversions.
Retaining users is crucial to improving conversions. Slow sites have a negative impact on revenue, and fast sites are shown to increase conversion rates.
For Mobify, every 100ms decrease in homepage load speed worked out to a 1.11% increase in session-based conversion, yielding an average annual revenue increase of nearly $380,000. Additionally, a 100ms decrease in checkout page load speed amounted to a 1.55% increase in session-based conversion, which in turn yielded an average annual revenue increase of nearly $530,000.
When AutoAnything reduced page load time by half, they saw a boost of 12% to 13% in sales.
Retailer Furniture Village audited their site speed and developed a plan to address the problems they found, leading to a 20% reduction in page load time and a 10% increase in conversion rate.
Why Speed Matters
The front-ends that are produced with Gatsby take speed to a whole new level. The pages created are precomputed/prerendered, but nevertheless interactive and alive (you are using a site made with Gatsby right now). This means that as much work as possible is done upfront so that the customer's browser doesn't have to do it.
Other fashion brands benchmarking against Victoria Beckham Beauty want to understand how it’s so much faster.
at Fostr for Victoria Beckham Beauty
Here is a video comparing StriVectins Headless Shopify storefront with Gatsby with their previous store using Magento:
The shift to mobile is accelerating the need for speed. Back in 2014, the split has been still 70% desktop and 30% mobile. Now in 2021 that split is at 47% desktop and 53% mobile.
This matters a lot because on mobile your customers are much more likely to have a bad internet connection and won't be more patient.
The probability of a bounce also increase drastically with every second added to the page load:
Competing on customer experience also requires a lightning-fast mobile experience, with 50% of global ecommerce sales happening on mobile devices. Even prior to COVID-19, mobile commerce accounted for 92% ecommerce growth. Research indicates 53% of consumers will abandon a site that takes longer than three seconds to load on mobile. Worse yet, mobile bounce rates are consistently higher than desktop.
The Future of Commerce Report 2021
Source: Google/SOASTA Research 2017
We're seeing this rapid shift and it's not just ecommerce. It's everything. Our consumers are demanding speed and efficiency, no matter what you're doing.
Principal of Digital Strategy, TSG
As if that were not enough, Google just recently made performance an even bigger part of ranking, which alleviates its importance further.
As mentioned Gatsby sites are static/server-side rendered. That means that their content is easily crawlable, which combined with their incredible speed means that search engines will love them.
In May 2021 Google made the core web vitals a key part of their ranking signals. In addition to mobile-first indexing, this means that performance will not only influence your bottom line because of consumer behavior but also because it determines how visible your store and all your content are to the public.
Because the sites generated are static and are served worldwide via a CDN, there are no servers involved that run a backend. That means the site is a (still very dynamic) brick. You can not hack into it, because there isn’t anything to hack into. Automated malware won't stand a chance.
There is no comparison with traditional setups like WordPress & WooCommerce.
The CEO of Netlify (a leading San Francisco-based cloud computing company), Mathias Biillman, provided the common thread regarding security issues and traditional shops:
At Netlify we get around 60 million requests every month starting with "wp-admin" even though you can not put a WordPress site on Netlify. And it’s just from crawlers and automated malware looking for holes in WordPress and automatically infecting. I think by now it is save to say, that if you take any normal WordPress site with a few plugins, you put it on a host and then you don’t update it, the time it will take from when you put it live until something bad happens to it is probably down to 11 days or something like that.
CEO and co-founder of Netlify
A headless approach allows businesses to take control over their customer's shopping experience and avoid lock-in by rigid drag & drop systems.
Because eCommerce is constantly changing as the technologies around us evolve, retailers must be agile to adapt their strategies — not as a response, but as a forethought. We work with brands all over the world, and the top initiatives we are currently seeing include headless commerce, mobile, and personalization.
Digital Strategy, Astound Commerce
What would you say to cutting your monthly server bills of thousands of dollars in half? European shopping mall leader Klépierre did just that. “We realized: you could cut your hosting costs in half if you take a Jamstack approach,” said Jonathan Bobo, CTO of former Proximity (now RAPP) that helped Klépierre archive those results.
Also, server maintenance and the associated costs aren’t a thing anymore and you don’t have to worry about one of your employees or a college breaking your database.
Before you might have been worried about your campaigns becoming a little too successful. Using a classic server setup, that perfectly rolled out Instagram campaign might lead to a traffic spike and that traffic spike might lead to your server going down. No more with serverless. You can now run a Superbowl ad and not worry about the traffic spike where you before had to had all hands on deck to fight the fires.
Traffic spiked immediately after the Super Bowl ad aired, and we saw a high number of simultaneous uses. I remember watching and seeing we had 3,000 simultaneous users, then 10,000, then a few seconds later it was 15,000 — and we just didn’t have to worry. Because we built with Gatsby, we knew we had the performance to handle the traffic without even thinking about it.
Application Architect, Little Caesars
That global CDN doesn’t care all that much how much traffic you receive. The network handles it. There is no single server that might be too weak.
Covid-19 has lead to dramatic changes in both offline and online commerce. McKinsey calls it "the Leap". 10 years growth in 3 months.
Combine this incredible acceleration with the fact that according to McKinsey also 75% of US consumers have tried different stores, websites, or brands during the crisis and that of those 60% expect to integrate the new brands and stores into life after the pandemic.
The market is not slowing down and competition is increasing as commerce has been pushed online including many players that haven't had their main focus in the digital realm so far. Disrupt or be disrupted.
If you're waiting for this to end, you say we're gonna be back to normal in two months, that we're just biding our time and getting through it, then you're gonna be screwed.
Editor in Chief, Glossy
The points above accumulate and they clearly influence the most important of goals. Your business goals and your bottom line. Higher performance means higher conversions, which means that you make more money with the same amount of traffic. Which means higher growth and more opportunities in all other aspects of your business.
Getting a custom frontend developed is an investment with a clear ROI and your online store is one of your most crucial profit centers. But of course it also has to be the right time to make that investment. If you are only starting out and don’t have any cash flow or capital available, it might not be that time. Going headless is an investment for business owners that want to reach new heights, that want to accelerate their growth, and compete at the highest levels. If that’s you, then yes, headless might well be what you are looking for.