How I Achieved Sub-Second FCP on a Shopify Store using Headless Next.js ⚡

hamza tahir — Thu, 24 Sep 2026 19:21:12 +0000

If you've spent any time working with monolithic Shopify Liquid themes, you know the struggle. A client comes to you with a store that takes 10+ seconds to load, bogged down by 20 different third-party apps injecting heavy JavaScript directly into the .

Recently, I was tasked with migrating an established e-commerce store suffering from terrible load times (we're talking 30s full-page loads) to a high-converting architecture.

The solution wasn't just another theme optimization—it was going fully headless with Next.js and the Shopify Storefront API.

Here is a breakdown of how we achieved a sub-second First Contentful Paint (FCP) and massively dropped their Cost Per Acquisition (CPA).

Decoupling the Frontend with the Storefront API The first step was ditching Liquid entirely. By using the Shopify Storefront API (GraphQL), we gained complete control over what data was fetched and when.

Instead of waiting for Shopify's servers to render a massive HTML file with dozens of synchronous app scripts, we queried only the exact product data needed for the page:

GraphQL
query getProduct($handle: String!) { product(handle: $handle) { id title descriptionHtml variants(first: 1) { edges { node { id priceV2 { amount currencyCode } } } } } }

Leveraging Next.js Server Components and ISR To get that instant-load feel, you cannot rely on client-side rendering for your product catalog.

We heavily utilized Incremental Static Regeneration (ISR) and Next.js React Server Components. This allowed us to pre-render product pages at build time and update them in the background when prices or inventory changed.

`// Fetching product data on the server
export async function getStaticProps({ params }) {
const product = await fetchShopifyProduct(params.handle);

return {
props: {
product,
},
// Revalidate every 60 seconds to keep inventory fresh
revalidate: 60,
};
}`
Result: Time to First Byte (TTFB) dropped from over 1.5 seconds to ~50ms globally, thanks to edge caching.

Aggressive Image Optimization E-commerce sites are incredibly asset-heavy. Next.js's built-in component was a lifesaver here, but it requires proper configuration when pulling from Shopify's CDN.

We ensured all product images were:

Served in WebP/AVIF formats automatically.

Lazy-loaded if below the fold.

Prioritized (using the priority prop) if they were the main LCP (Largest Contentful Paint) element, like the hero product image.

`import Image from 'next/image';

export default function ProductHero({ image }) {
return (

src={image.url}
alt={image.altText}
fill
priority // Crucial for passing Core Web Vitals on the LCP image
sizes="(max-width: 768px) 100vw, 50vw"
/>

);
}`

Purging Third-Party App Bloat In a standard Shopify setup, marketing teams install apps that blindly inject blocking scripts. In our headless build, we moved critical tracking (like Google Analytics and Meta Pixels) to Google Tag Manager and loaded them asynchronously.

For essential Shopify apps (like reviews or loyalty programs), we interacted strictly via their REST or GraphQL APIs server-side, keeping the client bundle incredibly lean.

The Results 📊
Moving to a Next.js headless architecture wasn't just a technical flex; it completely transformed the business metrics:

FCP: Dropped to < 0.8s

LCP: Stabilized at 1.2s

Customer Retention: +35%

CPA (Cost Per Acquisition): Dropped significantly as the bounce rate plummeted.

Conclusion
Building a headless Shopify store requires more upfront engineering than customizing a premium Liquid theme, but for high-volume stores, the ROI on performance is undeniable.

Have you experimented with Next.js and the Storefront API? Let me know your thoughts or any caching roadblocks you've hit in the comments!

I'm Hamza Tahir, a Senior Full Stack Web Developer and Shopify Expert specializing in high-performance stores that convert. If you're struggling with Core Web Vitals or looking to scale your e-commerce architecture, feel free to check out my recent case studies at hamzatahir.info.

DEV Community: hamza tahir

How I Achieved Sub-Second FCP on a Shopify Store using Headless Next.js ⚡