Ecommerce

Headless commerce migration with sub-second LCP

Challenge

A monolithic storefront suffered from slow mobile loads, heavy theme JavaScript, and a product configurator that struggled on mid-range devices. The team wanted a fast, custom frontend without giving up their native checkout.

Solution

We migrated to a headless architecture: Next.js for the storefront, a Storefront API for product and cart, a headless CMS for editorial content, and Algolia for instant search. Native checkout was preserved. PLPs are edge-rendered with predictive prefetching.

Architecture

Next.js App Router with React Server Components for product pages. The Storefront API handles cart and checkout token handoff. A headless CMS manages editorial content and landing pages. Algolia provides instant search with merchandising rules. Edge caching with surrogate-key invalidation.

Stack

Next.jsShopify Storefront APISanityAlgoliaTailwind CSSVercel Edge

Key Metrics

Sub-second

LCP

95+

Lighthouse

Reduced

Initial JS

High

Edge cache hit

Outcomes

Sub-second LCP on the storefront's most-trafficked pages
Heavy reduction in initial JavaScript and main-thread time
Faster perceived navigation via predictive prefetching
Editorial team kept their CMS workflow; checkout stayed on Shopify