What is “headless ecommerce”?
Headless is the term used for separating your backend website infrastructure from the frontend interface. In ecommerce, the backend infrastructure will power your shopping cart, checkout, customer accounts, inventory, merchandising, and fulfilment systems. When running a headless ecommerce solution, these services are then presented as pure data via an API, rather than as HTML web pages. Because of this, any UX, SEO, Performance, or Conversion issues which were present in the ecommerce platform, can get left behind. You are no longer platform-dependent and are free to build any website design or structure that you wish. SEO changes are mostly tackled on the frontend, and slow backend servers are mostly mitigated by delivering fast frontend web pages from a high performance CDN.
What are the pitfalls of headless ecommerce?
The biggest issue with headless ecommerce often comes from maintaining two separate and very different systems. You may need to have two engineering teams or development agencies, e.g. a Next.js frontend team and a SFCC (Salesforce Commerce Cloud) backend team.
Whilst it’s possible to have a single team maintaining both systems, the skill set required on the frontend and backend is very different. When problems occur, this can lead to one team blaming the other, or fixes can take longer than a traditional “monolithic stack” (two fixes needed for every one problem).
There are also cost implications – running two tech teams and two tech infrastructures. Plus, your additional POF (Points of Failure) can double the chances of downtime, unless the backend infrastructure is completely uncoupled from the customer facing website.
Whilst going headless can take the website appearance and structure away from the backend ecommerce platform, it doesn’t usually remove website visitors from accessing the backend entirely. In most cases, each web page request will still ping the backend servers to request a category product list, product data from the PIM, images from the DAM, basket contents, delivery options and payment handling. If the backend infrastructure is unbearably slow in returning data for these, it can still hurt SEO and user experience.
The frontend can mitigate slow backend systems by “caching” a lot of the information needed. CDNs such as Cloudflare allow a website to cache/save data as well as images on their fast local servers. When a product search, list of products or product information get requested for the first time, it can save that information for hours or even days, so that very few data requests get sent directly to the backend infrastructure. It’s tricky (but not impossible) to cache individual basket and checkout data, though – so the backend will never completely disappear from a customer journey. This is why travel websites can dramatically slow down at the checkout stage. Their frontends are powered by the latest tech, but airlines and large hotel chains still use slow and outdated proprietary booking technology.
What are the benefits of headless ecommerce?
Headless ecommerce can deliver fantastic innovation and freedom to the customer experience. You are no longer restricted to the user journey or processes enforced by the ecommerce platform. From an SEO perspective, this can also mean implementing on-page changes and site architecture improvements that have been left unaddressed in the tech roadmap for far too long.
The benefits are largely dependent on how decoupled the backend and frontend systems are, though. Some headless systems only free-up the HTML templates of a website, but still let the backend system dictate URLs and site architecture. Others allow the frontend to completely dictate a customer’s experience, only contacting the backend when product, customer, or order data is needed. If making the headless leap, we would recommend the latter approach to maximise cost-benefit return. There’s little point in going headless, if the backend still largely controls your website.
Once decoupled, website performance can be improved in partnership with a CDN provider and speed consultant. Customers will no longer have to wait for pages to load, and Google will reward your site accordingly. Internal search can be decoupled as well, using a system such as Algolia to increase conversion and customer satisfaction. Category structure can be reworked to match popularity, search intent and specific buying processes in your sector.
This can also be your opportunity to cleanly separate transactional and editorial elements on your website. Because headless frontends pull data from an API, you could use as many APIs as you’d like to build a page. Greater editorial freedom can be achieved by powering content pages with headless WordPress, Sanity, Strapi, Contentful or Ghost under the same website as your ecommerce pages.
SEO improvements can even be powered independently of an API or data file, overriding rigid or outdated SEO elements baked into your platform. Retailers such as Dunelm have an independent SEO system, capable of making optimisations at an individual page level.
SEO best practices for headless ecommerce
When moving to or launching a headless ecommerce website, it’s important for both the frontend and backend developer teams to understand the importance of SEO. Backend developers will have their SEO load lightened, but the backend data may still be used to populate meta tags, content and other elements. An even greater level of responsibility will be put upon the frontend developers, to ensure that SEO best practices are baked into the HTML page templates and site architecture.
SEO, Paid Media and historical sales data should lead the website structure and design. There are no more restrictions on how a customer can land on your website or how they can make a purchase. So it is crucial to design the website around your most popular products and content, plus the unique buying journey that your visitors take. Customers buying a wedding dress, car, groceries, fast fashion or a custom bouquet of flowers will all go through the process in different ways. Matching the customer’s needs and removing all elements of friction is how the likes of Amazon, Apple and Moonpig have become so successful online.
Prerendering your ecommerce pages
Headless ecommerce frontends are quite often powered by JavaScript-heavy SPA (Single Page Application) frameworks using Angular, Ember or React. When a web page is requested, JavaScript is loaded on the page which determines the page type, loads a design template and inserts content from your backend’s API. This can be a slow process on the first customer visit, with JavaScript frameworks frequently downloading and processing all the code required for every page type at once on the customer’s device. This is then usually cached/saved by the browser, so future navigational clicks are fast, but that initial page load can be a big issue.
It’s particularly an issue for Googlebot, which does not cache/save the JavaScript whilst crawling, causing it to download and execute the code bloat on every page. Google can crawl web pages using a virtual Chrome browser for JavaScript support, but does not guarantee this and will stop processing a page that takes too long to load. This is why many JavaScript heavy websites bounce around so much in Google’s search results.
It is generally agreed that content and ecommerce websites are better off prerendering their product and content pages, only using JavaScript to load elements that must be dynamic, e.g. basket contents. Prerendering is a process where the server loads every web page in a virtual browser and then saves the output. When a page is then requested by a website visitor, the server can deliver the page with all the elements already loaded into it. Every page load can be fast, and the backend servers aren’t relied upon as much. PDPs and PLPs can be mostly decoupled from the backend, simply refreshing the cached pre-rendered content regularly, to reflect stock and inventory changes.
Prerendering or SSR (Server Side Rendering) is baked into some frontend solutions. If this isn’t the case for your frontend, there are specialist services such as Prerender.io and SEO4AJAX that can help. CDNs such as Cloudflare and frontend hosting providers such as Netlify are also beta testing their own solutions.
If you are looking for expert advice to super-charge your SEO efforts, get in touch with our team – we’d be happy to help!
