Optimize page speed and SEO with headless commerce

Page speed and SEO improvements have for many merchants been among the key reasons to opt for a headless commerce platform like Medusa. In this article, we will explain how a headless setup can serve as a strong technical foundation to improve performance on these parameters.

So why are page speed and SEO so important in ecommerce? If we start with page speed, studies have shown that if a webshop has a load time of more than 3 seconds then 40% of the visitors abandon the site. On top of that, a one-second delay leads to a 7% reduction in conversion. Not just this, page speed also impacts your website's SEO performance, making it a potential ranking factor in Google SERP (Search Engine Result Pages). Google and other search engines make your brand visible and drive traffic, but if Google does not know you, there's no way that your customers will. Online searches lead to almost 39% of the total ecommerce traffic, but only the top 3 Google search results get 75% of all the traffic.

As the need for speed and enhanced SEO performance increases in importance, developers need to put focus on optimizing ecommerce sites for these parameters. The good part is that developers now have the right technology at their disposal with many headless commerce platforms emerging and these are now becoming more widely accessible with open-source solutions such as Medusa.

How headless commerce work

Before going into the details of how headless commerce enables optimized performance, it is important to understand how headless commerce works.

At its core, headless commerce refers to the decoupling of the frontend (the visual storefront) and the backend (the engine handling orders, customer data, etc.). This means that your storefront can run separately without impacting the backend like logistics, inventory, product details, etc.

This architecture allows businesses to take full control of the user experience with the storefront while configuring a fully customized backend to handle their needs. From a shopping cart to the payment gateway – all functional elements can work as a microservice and be programmatically managed while API supports the transmission and management of data.

Headless commerce breaks the monotony of the monolithic structures that tied both systems together in one which is often seen with traditional platforms like Shopify. This gives some ease to setting it up, bit it also makes the solutions rigid rather than flexible.

If you want to know more about the overall impact a headless setup can have on your ecommerce store, then check out our old article on what +20 ecommerce managers thought to be the key benefits of a headless architecture

How page speed & SEO is improved through headless commerce

Even though SEO can be a moving target with the ever-changing algorithms and updates, there are a few parameters that almost certainly will help improve your rankings. We will explore four of the key reasons below.

Using CDNs & optimized servers for deployment

A Content Delivery Network, like Netlify or Cloudflare, enables you to distribute your content across a wide network of servers, globally. This network of servers hosts your website content and pulls it from the server which is closest to the visitor in order to reduce load time as data doesn't have to transit as far. When a user then loads a web page it will be the closest CDN that sends a catched version of the web page's content to the user's browser. This can have significant impact on page load time; in some instances CDNs have been able to reduce page load time by as much as 30%.

When using out-of-the-box e-commerce platforms (e.g. Shopify), you most often depend on the server they use as the hosting option for your commerce platform. Although this might look like an easy deployment option, it is not optimal for your page speed to, for instance, use a US-based server when operating in Europe. With a headless solution, you can use optimized servers for deployment to improve page delivery speed to the end-user.

Use an SSG

A static site generator (SSG) helps you improve page load speed. An SSG lets you create static web pages (consisting of HTML, CSS, and frontend JS) that can be hosted directly on a CDN. Whereas traditional website generators only generate a page when it is requested by the user, static pages are generated ahead of time and do not need to be generated on the server when the user accesses it. One example of the impact of implementing an SSG can be seen at QueryClick.com, a small B2B site, which witnessed a load time reduction up to 74% after the deployment of a SSG.

With newer SSG frameworks like Gatsby and Next.js, it has become significantly easier to build static sites that they use of popular technologies like ReactJS, GraphQL, Webpack, etc. and makes it easier for developers to jump in without much of a learning curve. Plus, these frameworks do data fetching such as data sourcing from local files. This data is then used to generate static HTML, CSS, and JavaScript files.

Fewer Plugins To Improve Load Time

Monolithic solutions are built for simplicity often obtained through templated solutions. Although templates offer a good starting point, they often end up having more deteriorating long-term consequences on page performance due to a lack of flexibility and customization options.

What happens for most webshop owners is that they end up wanting a more customized setup than what they set out to do as their business needs evolve over time. When starting from a templated design, the only way to solve this issue is by adding new plugins that solve customization issues at hand. However, most of these plugins, especially on the frontend, require a huge amount of processing power slowing down the load time of the site.

The problem is often described as “dead by plugins” and can be avoided using open-source solutions and headless architecture to build custom functionality into the core project instead of relying on outside solutions that might in turn negatively impact performance.

Full control of page structure and content

Using a headless architecture likewise solves many of the common issues with the lack of page structure and content control that content specialists are often vocal about with monolithic solutions.

Websites that use monolithic structures like Shopify generally experience SEO hurdles due to the predetermined sites structure which makes it hard to fully optimize the website setup. What happens with a monolithic solution is that the pages you create on your website will have a ranking structure you can't make changes to.

A common Shopify problem is that with each new category comes multiple URLs. Buffer.com is one such website that faces this issue. Because of multiple paths that lead to the same page, duplicate product pages are produced with the same content but a different URL. See example below where each of these URLs leads to one page only, e.g.:

buffer.com/library/social-media-manager-che..

buffer.com/resources/social-media-manager-c..

These pages are almost exact duplicates. All of this drastically impacts the ranking on SERP since search engines aren't capable to infer which duplicate page to rank, therefore, giving preference to other web pages. Using a headless commerce platform enables you to control the way your content is rendered as content lives on a separate server and can be structured independently for an optimal page structure.

Optimize page speed and SEO with a headless open source project

It is clear that headless commerce presents some easy to grasp benefits in the form of page speed and SEO performance. For many merchants, however, the reason for not going headless has been the excessive costs associated with these types of solutions. That is why Medusa made it a key priority to:

Lower the bar for when businesses can shift to a headless commerce platform

This is done by:

• Open-sourcing the solution to enable merchants to start for free compared to competing platforms starting at +20,000 USD / year
• Creating a setup that is easy to use and extend, even as a smaller merchant with limited developer resources
• Making a suite of plugins, quick starters, and migration tools freely available to make it easy to get up and running

With a lower bar for entering into the world of headless commerce, Medusa aims to make the benefits accessible to merchants of all sizes in the future. If you are interested to hear more, feel free to check-out our solution on GitHub. Or catch the team in the Discord community for a chat.