Headless Shopify Performance: Why Hydrogen Can Be Slower
A headless Shopify storefront can be slower than a Liquid theme, because a theme gets Shopify’s speed work for free and a custom storefront has to earn it. On a theme, Shopify serves the pages from its CDN, compresses and minifies the files and optimizes images; on Hydrogen or any other headless front end, caching, data loading and the JavaScript you ship are decisions your developers make. The fixes are well documented by Shopify, and they come down to four levers and one habit: cache what can be cached, stream what can wait, break chains of requests, ship less JavaScript, and measure real visitors.
Where headless loses speed
Shopify’s web performance page, read on October 23, 2026, lists what every Online Store gets automatically: a CDN with HTTP/2, browser caching for one year, gzip compression, image compression with WebP where possible, and minified CSS and JavaScript. A headless front end replaces the Online Store, so it starts without those, unless its host and framework provide them.
Three things then slow a custom storefront down:
- Data fetched on every request. Each page asks the Storefront API, and often a CMS or a reviews service, for its data. Without caching, every visitor waits for every one of those calls.
- Requests in a chain. When the second query needs an ID from the first, the second waits. Shopify’s docs call this a waterfall.
- Heavy client-side JavaScript. A React storefront can send a large bundle to the browser before the page becomes usable, which shows up as slow interaction on phones.
The levers
Cache Storefront API data. Shopify’s guide to caching in Hydrogen says Hydrogen’s built-in API client caches Storefront API data by default, and lets you set a strategy per request:
| Strategy | Duration | Use for |
|---|---|---|
CacheShort() |
About 10 seconds (max-age=1, stale-while-revalidate=9) |
Prices and stock that change often |
CacheLong() |
About a day (max-age=3600, stale-while-revalidate=82800) |
Navigation, collections, page content |
CacheNone() |
No caching (no-store) |
Anything personal |
CacheCustom() |
Your own header | Special cases |
Personal data must never be cached for other visitors. Shopify says Customer Account API data is never cached, and that for Storefront API customer queries you should pass CacheNone() and send a private or no-store header on the page, because a public header, or none, risks showing one customer’s data to another. Customer-specific routes should keep Oxygen’s full-page cache out with no-store or private, max-age=<seconds>.
Stream what can wait. Shopify’s page on performant data loading says to defer non-critical data and stream the response, so the page renders as soon as the critical data arrives. The product title, price and images are critical; reviews and recommendations can follow. In Hydrogen this uses React’s <Suspense> with React Router’s <Await>.
Break the waterfalls. Start deferred requests before awaiting the critical ones, run independent requests together with Promise.all, and key third-party data by product handle rather than product ID, so it can be fetched in parallel with the Storefront API query instead of after it. Shopify recommends its Subrequest Profiler as the first stop for diagnosing slow loaders.
Ship less JavaScript. Render on the server, keep interactive components small, and load scripts for widgets (chat, reviews, analytics) after the page is usable. Every tag your marketing team adds is JavaScript too, and on a headless site no theme setting limits it.
Measure real users
Lab tests are a start, but the verdict comes from real visits. Google’s Core Web Vitals guidance sets the targets at LCP within 2.5 seconds, INP under 200 milliseconds and CLS under 0.1, and points to the Core Web Vitals report in Search Console. Shopify’s Web Performance reports describe the Online Store, so for a custom storefront, set up your own real-user measurement: the Search Console report for the storefront’s domain, and a monitoring tool your developers wire in. Check the numbers after every release, not once a quarter.
A short audit for an existing headless store:
- Search Console’s Core Web Vitals report: which page groups fail, on mobile or desktop.
- The slowest route in the Subrequest Profiler: how many requests, and are any in a chain?
- Every Storefront API query: does it have a cache strategy, and is anything personal cached publicly?
- The JavaScript bundle size for a product page, and which third-party scripts load before the page is usable.
Whether headless was the right choice at all is covered in headless vs themes. For a Liquid theme, the speed work is in Shopify speed optimization and the tools in speed test tools. More operations guides sit in the running a store hub.
Frequently asked questions
Is Hydrogen faster than Liquid? Hydrogen can be fast, but it is not faster by default. A Liquid theme gets Shopify’s CDN, compression and image optimization automatically; a Hydrogen storefront is as fast as its caching, data loading and JavaScript make it.
Does Oxygen cache pages? Oxygen has a full-page cache, and Hydrogen caches Storefront API data by default with per-request strategies. Pages with customer-specific content must send a no-store or private header so the full-page cache does not store them.
How do I see Core Web Vitals for a headless store? Use the Core Web Vitals report in Google Search Console for the storefront’s domain, plus a real-user monitoring tool your developers add. Shopify’s Web Performance reports cover the Online Store channel.