A national grocery retailer

The problem

The client's storefront ran on a monolithic platform where every template change went through a six-week vendor release train. Mobile LCP sat at 2.1 seconds on a 4G connection and their own analytics showed a 34% drop-off before the product grid painted. They had already bought a headless CMS and a commerce API; what they did not have was a front end that could use either.

What we did

1. 01

   Peel the platform, not the brand

   The first two weeks were spent proving the existing design could survive a re-platform unchanged. Redesigning at the same time as re-architecting is how these projects fail — two variables, one measurement. The visual system shipped identical and was revisited in a later phase.

2. 02

   Render the catalogue statically

   40,000 product pages are generated at build and revalidated on webhook from the commerce API. Only cart, stock and pricing are dynamic, so the vast majority of requests never touch an origin server.

3. 03

   Move the configurator into the browser

   Bundle previews were being composited server-side and cached as flat images — 900ms per permutation, and a cache that could never be warm. Rebuilt in WebGL against the same product geometry, the preview is now instant and the image pipeline was decommissioned.

What changed

The client's team now ships template changes themselves, several times a week, without a vendor ticket. The performance work paid for the engagement inside a quarter on recovered mobile conversion alone.

Largest Contentful Paint

2.1s→0.6s

Mobile conversion

2.6%→3.4%

Time to publish a template change

6 weeks→Same day

Product pages prerendered

40,000+

Built with

• Next.js
• TypeScript
• Three.js
• Sanity
• Vercel
• Node.js