Every few months a Shopify client asks whether they should “go headless with Hydrogen”. Usually they’ve read that it’s faster. Sometimes it is. But a Hydrogen storefront is a different kind of project from a theme, and the speed isn’t free.
I wanted something more concrete than opinions, so I measured Shopify’s own showcases: the demo store for Dawn, Shopify’s reference theme, and the demo store for Hydrogen, its headless framework.
How I measured
I loaded each homepage in headless Chrome, throttled to Lighthouse’s mobile profile (150 ms latency, 1.6 Mbps download, a CPU four times slower), with the cache disabled. I took the median of three runs.
A fair warning: these are two different demo stores with different products, images and layouts. This isn’t a perfectly controlled experiment. It shows what each approach delivers out of the box when Shopify itself builds it.
The results
| Throttled mobile, homepage | Dawn theme | Hydrogen | Difference |
|---|---|---|---|
| Time to first byte | 176 ms | 129 ms | similar |
| First Contentful Paint | 992 ms | 1,272 ms | Dawn faster |
| Largest Contentful Paint | 3,064 ms | 1,272 ms | Hydrogen 58% faster |
| Page fully loaded | 4,235 ms | 2,961 ms | Hydrogen 30% faster |
| Requests | 233 | 45 | 5× fewer |
| Transferred | 811 KB | 506 KB | 38% less |
| JavaScript | 268 KB | 169 KB | 37% less |
| HTML | 39 KB | 12 KB | 69% less |
Dawn’s first paint was quicker, but its main content arrived at 3.1 seconds, past the 2.5-second line Google counts as “good” for Largest Contentful Paint. Hydrogen showed its main content at 1.3 seconds, with a fifth of the requests.
One more number deserves attention. On the first run, before Shopify’s CDN had cached the page, Hydrogen’s time to first byte was 1,843 ms. Warm runs dropped to about 130 ms. Hydrogen renders on the server, so caching matters. A Hydrogen store with poor cache settings can easily be slower than a theme.
Why Hydrogen was faster here
It isn’t magic. It comes down to control.
- No app scripts. On a theme, each app can add its own JavaScript to every page. Hydrogen has no app embeds. Features are built into the storefront, so you decide exactly what loads.
- Smaller pages. Dawn’s homepage HTML was three times the size of Hydrogen’s, with sections and settings for every possible merchant. A custom storefront only includes what this store needs.
- Fewer requests. 45 requests against 233. Many of Dawn’s were images and theme assets loaded as the page went on.
A well-optimised theme can close much of this gap. Dawn is a sensible baseline, and careful image handling plus fewer apps go a long way. The trouble is keeping them there once marketing starts adding apps.
What Hydrogen costs
Here’s the part the speed comparisons skip.
| Shopify theme | Hydrogen | |
|---|---|---|
| Framework and hosting | Included in your plan | Free and open source. Oxygen hosting is included on paid plans, but not Starter. |
| Theme or starting point | Free (Dawn, Horizon) or US$170–400 one-off | A starter template; the design is built from scratch |
| Build effort | 50–110 hours for a standard store | Closer to a web application: 150–350 hours |
| Apps | Install from the App Store | Many don’t work. Their features have to be rebuilt or wired in through APIs. |
| Who can edit it | Merchants, in the theme editor | Developers, unless you add a CMS or use Shopify’s content tools |
| Ongoing work | Theme updates, now and then | A React codebase: dependency updates, deployments, monitoring |
The biggest hidden cost is the theme editor. On a theme, a merchant can change the homepage banner on a Sunday evening. On Hydrogen, that needs a developer, unless content is managed somewhere else. Many teams underestimate how much they rely on it.
The second is apps. Reviews, loyalty, subscriptions, upsells: on a theme each one is a few clicks. On Hydrogen, each needs an API and some front-end work. Check every app you rely on before deciding.
How I decide
| Your store | My recommendation |
|---|---|
| Under a few hundred products, standard checkout, a small team | A theme. Spend the difference on images, speed fixes and marketing. |
| A theme store that’s slow because of apps | Remove apps and fix images first. That’s usually most of the gain for a fraction of the cost. |
| A brand-led store with a lot of storytelling, custom interactions or content | Hydrogen, if you have a developer for the long term |
| A store that’s one part of a bigger product (an app, a portal, several regions with different content) | Hydrogen. You need that flexibility anyway. |
| Strong revenue, where every tenth of a second shows in conversions | Hydrogen, with someone accountable for caching and performance |
What I take from this
Shopify’s own demos show what Hydrogen can do: main content in 1.3 seconds instead of 3.1, with a fraction of the requests. But the gap comes from control, not from the framework. A headless store gives you the power to keep things lean, and the job of doing it.
If your store is slow, start with the cheap fixes on the theme you have. If you’ve done that and you’re still hitting the ceiling, or your brand needs things a theme can’t do, that’s when Hydrogen starts to pay for itself.