Thinking about going headless? You’re not alone! It’s a hot topic in ecommerce these days, and there’s a ton to consider when making your decision. The reality is that the list of pros and cons looks different depending on the lens you’re using. Do you care most about features? Flexibility? What are your goals?
Performance is one of those lenses, and it’s without a doubt one of the biggest reasons people consider headless architecture.
So in this post, we’ll focus solely on performance — comparing real-world performance data of headless sites against another top option: Shopify’s Liquid storefronts.
Let’s start with Liquid.
Shopify Liquid storefronts are fast for real users Jump to heading
And they’re the workhorse of Shopify. Currently, Shopify Liquid outperforms other ecommerce platforms when it comes to passing the Core Web Vitals (CWVs). Just take a look at the comparison below:
In September 2023, 59.5% of Shopify origins passed all Core Web Vitals, and we keep working to push that number higher.
Sometimes, we hear people suggest that Liquid is slower than other options. Looking at the data, it’s clear that this is a misconception. Consider the chart below, which shows Time to First Byte (TTFB) — the time between when a user first requests a page to when the first byte of data returns to their browser.
You can see that Shopify has best-in-class TTFB performance versus the entire web, other ecommerce platforms, and common frameworks used for headless ecommerce.
Can large merchants achieve great performance on Liquid? Jump to heading
Absolutely. And the data confirms it. Take the example of these 3 top-tier merchants who sell at scale and pass the Core Web Vitals:
So, what about headless performance? Jump to heading
Done well, headless can be fast. The catch? Data suggests that it’s not common to see headless implemented in a way that supports great performance.
Headless ecommerce is typically achieved using JavaScript frameworks that support server-side rendering such as Next.js, Nuxt.js, Remix, and of course Hydrogen, which is built on Remix.
When we modify the Core Web Vitals report we used earlier in this post to show those frameworks versus Shopify Liquid storefronts, we see interesting results:
While we can’t separate which of these sites are ecommerce versus other types of sites, we still get a directional signal: Liquid is more performant with Hydrogen coming in second.
Currently, the Core Web Vitals include First Input Delay (FID). FID is notorious for being a participation award. Indeed, for all of the technologies shown in the above chart, none of them had fewer than 93% of origins passing FID. However, Interaction to Next Paint (INP) will replace FID in March of 2024.
Only Shopify Liquid and Hydrogen perform well for real users when looking at INP, as shown in the chart below:
This means in March of 2024, the performance differences in the overall Core Web Vitals will be even more stark.
The Core Web Vitals are sometimes criticized for focusing too much on initial page load when most of the user’s experience occurs afterward. But INP fixes part of that problem, because it is measured for the full page session. Additionally, our internal research shows that users are very sensitive to first/landing page experience when it comes to conversion rates.
In the future, adding soft navigations to real user data will help us get a fuller picture of user experience on SPA-like applications.
Hydrogen is the fastest headless option Jump to heading
So far, we’ve seen that headless is performant only when implemented well. And, when going headless, Hydrogen is the best way to achieve good web performance according to the real user data reported in CrUX.
The choice of going headless relies on more than just web performance. If you’re going headless for other reasons, then Hydrogen is currently your best bet for achieving good web performance according to the real user data reported in CrUX.
How do Liquid and Hydrogen compare? Jump to heading
Part of the reason that headless is slower than Liquid is that Liquid storefronts have many optimizations baked into the platform. When you go headless with any JavaScript framework, you forego those optimized configurations managed by Shopify and must build them yourself.
By default, Hydrogen will not be as fast as Liquid storefronts. However, Hydrogen can be faster than Liquid by performing optimizations such as full-page caching and configuring sub-request caching. But, these optimizations require a merchant-dedicated developer team that is capable of implementing the Shopify-provided performance configurations.
Conclusion Jump to heading
If you’re considering moving to headless because you heard that it’s faster, it’s a good idea to review the data.
Headless architectures give you the ability to fully customize how your site behaves, but it can come at the cost of performance, developer resources, and time to market. On the other hand, Liquid is fast out of the box and when customized — and not just for small shops.
Large enterprise merchants have proven the viability of running a Liquid storefront at scale while passing the Core Web Vitals. And, Shopify is actively building out new features for Liquid storefronts to enable easier content management and greater customization.
Still thinking headless? Great! Then Hydrogen is your best bet in terms of performance, and Hydrogen’s lead in the market will increase once INP replaces FID in the Core Web Vitals.
The bottom line: understand your unique needs and look at the data to determine the best strategy for your website.
About the performance data: HTTP Archive and CrUX Jump to heading
So that you don’t have to take our word for it, we looked at real-life data from two public data sets, the HTTP Archive and the Chrome User Experience Report (CrUX).
These data sets publish monthly data about the most visited 16 million URLs across the web. The HTTP Archive runs WebPageTest on these pages to collect detailed information from a single page load on an emulated device and network speed.
CrUX provides aggregated web performance metrics for those pages. While the HTTP Archive shares lab data about a single run, CrUX provides aggregated user experience metrics from all Chrome traffic where data was allowed to be collected. It’s powerful data since it shows how real users are experiencing a site.
CrUX is also the official Web Vitals data set. Google includes your real user performance on the Core Web Vitals as part of the page experience ranking algorithm for search.
The charts in the article come from the Core Web Vitals (CWV) Technology Report, cwvtech.report. The CWV Tech Report shows aggregated CrUX data split by applications and technologies (the latter coming from the HTTP Archive data). We can use it to compare and contrast different architectures. While correlation is not causation, it can still give us clues that help our decision making.