How We Cut LCP from 31.9s to 2.2s on a Hydrogen Storefront
LCP Before
31.9s
LCP After
2.2s
Lighthouse
23 → 93
A Shopify streetwear brand came to us with a problem they didn't fully understand yet. Their store “felt slow.” They were right. Their hero image was taking 31.9 seconds to become visible to users. Largest Contentful Paint, the Core Web Vital that Google uses to measure perceived load speed, was nearly 32 seconds.
The store was running a customised Liquid theme. We rebuilt it as a Hydrogen storefront on Shopify's React-based headless framework. LCP dropped to 2.2 seconds. Lighthouse performance went from 23 to 93.
Here's exactly what we changed and why.
The Liquid baseline
The original theme loaded a full-resolution hero image (2400×1600px JPEG, ~1.2MB) with no responsive sizing, no lazy loading strategy, and no preload hint. The image was injected via Liquid's {{ image | image_url }} filter inside a section that rendered after several blocking scripts.
Third-party apps compounded the problem. Four app scripts loaded synchronously in the <head>, each adding 200-800ms before the browser could even begin parsing the page body. By the time the hero image URL was discovered by the browser, 8-12 seconds had already passed.
Moving to Hydrogen
Hydrogen gave us server-side rendering (SSR) out of the box. The HTML arrives fully rendered. The browser sees the hero image URL in the initial HTML response, not after JavaScript hydration. That alone cut several seconds off image discovery time.
But the real gains came from three specific changes:
1. Preload headers, not just HTML tags
We added a Link preload header to the HTTP response for the hero image. This tells the browser to start fetching the image before it even parses the HTML body. The image download begins during HTML streaming, not after DOM construction.
// In the route loader
const headers = new Headers();
headers.set(
"Link",
`<${heroImageUrl}>; rel=preload; as=image; fetchpriority=high`
);2. Native img over Shopify's Image component
This was the non-obvious fix. Shopify's Hydrogen <Image> component silently drops the fetchpriority attribute from server-rendered HTML. You can pass fetchPriority="high" as a prop and it simply won't appear in the SSR output.
For the hero image (the single most important element for LCP) we replaced <Image> with a native <img> tag with explicit fetchpriority="high", loading="eager", and hand-crafted srcset / sizes attributes.
{/* Don't use Hydrogen <Image> for LCP-critical images */}
<img
src={heroImage.url}
srcSet={`${heroImage.url}&width=800 800w, ${heroImage.url}&width=1200 1200w, ${heroImage.url}&width=1600 1600w`}
sizes="100vw"
alt={heroImage.altText ?? ''}
width={1600}
height={900}
fetchpriority="high"
loading="eager"
decoding="async"
/>React SSR note: use lowercase fetchpriority, not camelCase fetchPriority, if you need the attribute rendered correctly in the server HTML. React normalises some attributes differently during SSR.
3. Third-party script control
In Liquid, app scripts inject themselves wherever they want. In Hydrogen, you control every script. We moved all non-critical scripts (reviews, popups, loyalty) to load after the load event with <script defer> or dynamic imports. Analytics (GA4, Meta Pixel) were loaded via a consent-gated system that doesn't block rendering.
Total third-party blocking time went from ~3.2 seconds to under 200ms.
The result
LCP dropped from 31.9 seconds to 2.2 seconds. Lighthouse performance went from 23 to 93. Total Blocking Time fell from 3,200ms to under 200ms. Time to First Byte improved from ~1.8s to ~400ms thanks to Oxygen's edge SSR.
The store loads fast on every device, including the budget Android phones that make up a significant share of streetwear customers' traffic.
What this means for your store
If your Shopify store's LCP is above 2.5 seconds, you are losing customers before they see your product. Google penalises slow LCP in search rankings. Users bounce. Revenue leaks silently.
Most performance problems on Shopify aren't about the platform. They're about how the theme and apps interact with the browser's loading pipeline. A Hydrogen rebuild gives you complete control over that pipeline.
Want to know your store's LCP?
Our free audit measures performance, analytics integrity, and revenue leakage across your storefront.
Get your score