Liquid vs headless: A look at real user web performance

By admin
Thinking about going headless? You’re not alone! It’s a hot topic in ecommerce

these days
DATE

, 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
CARDINAL

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
ORG

storefronts.

Let’s start with Liquid.


Shopify Liquid
ORG

storefronts are fast for real users Jump to heading #

And they’re the workhorse of Shopify. Currently,

Shopify Liquid
ORG

outperforms other ecommerce platforms when it comes to passing

the Core Web Vitals
ORG

(CWVs). Just take a look at the comparison below:

Since

2021
DATE

, Shopify has been outperforming nearly all ecommerce platforms when it comes to real user web performance (source).

In

September 2023
DATE

,

59.5%
PERCENT

of Shopify origins passed all Core Web Vitals, and we keep working to push that number higher.

Sometimes, we hear people suggest that

Liquid
ORG

is slower than other options. Looking at the data, it’s clear that this is a misconception. Consider the chart below, which shows

Time
ORG

to First Byte (TTFB) — the time between when a user

first
ORDINAL

requests a page to when the

first
ORDINAL

byte of data returns to their browser.


78%
PERCENT

of Shopify domains have good TTFB performance which is higher than the total for the web plus all the ecommerce and headless frameworks shown in the chart (source).

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.

Is your Shopify site using

Liquid
PRODUCT

but not achieving the performance you want? We can help – check out Getting started with performance and Techniques for optimizing performance.

Can large merchants achieve great performance on

Liquid
PRODUCT

? Jump to heading #

Absolutely. And the data confirms it. Take the example of these

3
CARDINAL

top-tier merchants who sell at scale and pass

the Core Web Vitals
WORK_OF_ART

:


Rothy
PERSON

’s is a large, successful merchant with excellent performance. The

TREO
ORG

sitespeed tool is a nice visualizer of the

CrUX
PRODUCT

data for a single domain.

See how you perform on

the Core Web Vitals
WORK_OF_ART

with the

CrUX
PRODUCT

dashboard launcher or the

TREO
ORG

sitespeed tool. Both are free.

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
PRODUCT

frameworks that support server-side rendering such as Next.js, Nuxt.js, Remix, and of course

Hydrogen
ORG

, 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
ORG

storefronts, we see interesting results:

Common

SSR
ORG

frameworks used for headless ecommerce are associated with fewer origins passing

the Core Web Vitals
WORK_OF_ART

(source).

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
ORG

coming in

second
ORDINAL

.

Currently,

the Core Web Vitals
ORG

include First Input Delay (

FID
ORG

).

FID
ORG

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%
PERCENT

of origins passing

FID
ORG

. However, Interaction to Next Paint (INP) will replace

FID
ORG

in

March of 2024
DATE

.

Only Shopify Liquid and

Hydrogen
ORG

perform well for real users when looking at

INP
ORG

, as shown in the chart below:

Out of the common headless ecommerce frameworks, only

Hydrogen
ORG

is close to matching

Shopify Liquid
ORG

in terms of

INP
ORG

performance.

INP
ORG

will replace

FID
ORG

in

Core Web Vitals
WORK_OF_ART

in

March 2024
DATE

. (source).

This means in

March of 2024
DATE

, the performance differences in the overall

Core Web Vitals
ORG

will be even more stark.


The Core Web Vitals
WORK_OF_ART

are sometimes criticized for focusing too much on initial page load when most of the user’s experience occurs afterward. But

INP
ORG

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
ORDINAL

/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
ORG

-like applications.

Another architecture pattern we see is using a frontend framework, like Vue or React, on top of a

Liquid
ORG

storefront. This pattern takes the worst of both worlds and should be avoided. It significantly delays when the end user can see the page while also increasing the chance of slow response times to interactions.


Hydrogen
ORG

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
ORG

is the best way to achieve good web performance according to the real user data reported in

CrUX
PRODUCT

.

The choice of going headless relies on more than just web performance. If you’re going headless for other reasons, then

Hydrogen
ORG

is currently your best bet for achieving good web performance according to the real user data reported in

CrUX
PRODUCT

.

How do Liquid and

Hydrogen
ORG

compare? Jump to heading #

Part of the reason that headless is slower than

Liquid
ORG

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
ORG

will not be as fast as Liquid storefronts. However,

Hydrogen
ORG

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.

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
ORG

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
PRODUCT

storefront at scale while passing

the Core Web Vitals
WORK_OF_ART

. And, Shopify is actively building out new features for

Liquid
ORG

storefronts to enable easier content management and greater customization.

Still thinking headless? Great! Then

Hydrogen
ORG

is your best bet in terms of performance, and

Hydrogen
ORG

’s lead in the market will increase once

INP
ORG

replaces

FID
ORG

in

the Core Web Vitals
FAC

.

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
PRODUCT

to heading #

So that you don’t have to take our word for it, we looked at real-life data from

two
CARDINAL

public data sets,

the HTTP Archive
ORG

and the Chrome User Experience Report (

CrUX
PRODUCT

).

These data sets publish

monthly
DATE

data about the most visited

16 million
CARDINAL

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
PRODUCT

provides aggregated web performance metrics for those pages. While the

HTTP Archive
ORG

shares lab data about a single run,

CrUX
PRODUCT

provides aggregated user experience metrics from all

Chrome
ORG

traffic where data was allowed to be collected. It’s powerful data since it shows how real users are experiencing a site.


CrUX
PRODUCT

is also the official Web Vitals data set.

Google
ORG

includes your real user performance on

the Core Web Vitals
ORG

as part of the page experience ranking algorithm for search.

The charts in the article come from

the Core Web Vitals
ORG

(CWV) Technology Report, cwvtech.report.

The CWV Tech Report
ORG

shows aggregated

CrUX
PRODUCT

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.