Loom & Field
A storefront that loads before you blink
A headless storefront for a handmade textiles brand selling across Pakistan and the Gulf. I rebuilt it from a slow theme into a Next.js site that feels instant on a mid-range phone on 4G.
- 1.2s
- largest paint on 4G, was 4.1s
- +23%
- mobile conversion rate
- 99
- Lighthouse performance score
The problem
The old theme shipped 2 MB of JavaScript before showing a product. Most visitors arrived from Instagram on a phone, and more than half left before the first image appeared.
Constraints
- Keep Shopify for checkout, inventory and payments.
- The brand team edits collections weekly and cannot wait on a developer.
How it fits together
At the edge
- Pre-rendered Next.js pages
- AVIF images with placeholders
- Cart as a server action
In the cloud
- Shopify Storefront API
- Sanity content studio
- Shopify checkout
Key decisions
Static pages, fresh stock
Product pages are pre-rendered and revalidated when Shopify sends a webhook, so they load from the edge but never show a sold-out rug as available.
Images sized for the phone in hand
Every image is served as AVIF at the exact width the layout needs, with a blurred placeholder baked in at build time. The largest paint dropped from 4.1 to 1.2 seconds.
Content the brand team owns
Lookbooks and collection pages are edited in Sanity with live previews, and publishing rebuilds only the pages that changed.
Outcome
Mobile conversion rose 23% in the first two months, and the brand team now launches collections on their own.
What I’d change
I would set up real-user Core Web Vitals tracking before the rebuild, not after. We had lab numbers for the old site but no field data to compare against.
Stack
- Next.js
- React
- TypeScript
- Shopify Storefront API
- Vercel
- Sanity