Headless Shopify Rebuild for a Woodworking Studio — Performance 52 → 100, All Four Scores Green

Mobile PageSpeed (Lighthouse), before → after the rebuild.

Key facts

• Client: A family-run woodworking studio in Charlotte, NC. Hand-carved solid-wood mirrors and home decor with traditional motifs, made sustainably by hand.
• Scope: design, full-stack development, technical SEO. Headless Astro storefront on top of existing Shopify — new front-end, same Shopify checkout and admin.
• Stack: Astro (SSG), Shopify Storefront API (GraphQL), Vercel
• Timeline: ~2 weeks
• PageSpeed mobile before → after: Performance 52 → 100, Accessibility 88 → 100, Best Practices 88 → 100, SEO 92 → 100
• Image payload: ~6 MB cut on key pages (3000 × 3000 px originals → srcset + Shopify CDN resizing + WebP)
• Pages added: Workshop, Author/maker bio, Privacy Policy, Terms, Return Policy, Shipping Details, Accessibility Statement — the old theme had 7 pages; the new site ships with a complete trust and legal layer
• Blog: 17 articles inherited → 22 live (5 new cornerstone guides published June 2026 targeting high-intent buyer queries)

The problem with the original theme

The store used a popular paid Shopify theme — the kind that’s designed for maximum flexibility, not minimum weight. That meant:

• Unoptimized images: product photos served at full resolution regardless of viewport
• Render-blocking CSS: the theme loaded its full stylesheet before any paint
• No structured data: no Product, Offer, or LocalBusiness schema for search engines or AI crawlers
• No control over markup: canonical tags, hreflang, and Open Graph were managed by theme settings, not code

The brand also needed more than a fast store — they wanted a premium, story-led experience that matched the quality of hand-carved woodwork. Paid themes have ceilings for both performance and design.

The solution: headless without the risk

A headless rebuild means the Astro front-end handles everything the user sees, while Shopify handles everything the merchant manages: checkout, payments, order management, inventory, email notifications. The merchant never changes how they run the business — only the storefront changes.

The Shopify Storefront API provides all the data (products, collections, variants, prices, availability) via GraphQL. Astro pre-renders pages at build time (SSG), so every page is a static HTML file served from Vercel’s CDN with zero server wait.

Performance work

Images were the biggest single win. The original theme served 3000 × 3000 px JPEG product photos to every device, including phones. The new build:

• Uses Shopify’s CDN resizing (append ?width=N to the image URL) to serve device-appropriate sizes
• Generates a srcset with 4–5 breakpoints per image
• Converts all hero and collection images to WebP
• Lazy-loads below-fold images; hero image is preloaded
• Result: ~6 MB payload reduction on key pages

CSS was inlined for above-the-fold styles and loaded non-blocking for the rest — eliminating the render-blocking penalty that cost the original theme ~1.5 seconds of First Contentful Paint.

Fonts load with font-display: swap and preconnect hints. No layout shift from late font loads.

SSG delivery: every page (home, collection, product, blog) is pre-rendered at build time. Vercel serves them from CDN edge — Time to First Byte under 50ms globally.

SEO & structured data

Every page type gets its own schema:

• Product pages: Product, Offer, AggregateRating (when reviews exist)
• Home & about: LocalBusiness, Person (maker bio)
• Blog: Article, Person (author)
• FAQ sections: FAQPage
• Navigation: BreadcrumbList

URL structure matches the original store exactly — zero lost URLs, no redirect map needed. An auto-generated XML sitemap is submitted on deploy. IndexNow pings Bing and Yandex on any new content. A Google Merchant Center product feed is scaffolded for Shopping ads.

Trust, legal & accessibility

• Cookie consent respects Global Privacy Control (GPC) header — stores that ship to California need this
• CCPA “Do Not Sell or Share” link in the footer
• Consent-gated analytics — GA4 fires only after accept, not before
• ADA / WCAG 2.1 AA pass: skip links, visible focus states, minimum contrast, prefers-reduced-motion, aria-* attributes on all interactive elements, accessibility statement page
• Accessibility score: 100 on PageSpeed (audited by Lighthouse, not just axe-core)

What was delivered

• Headless Astro storefront
• Product and collection listing pages
• Product detail pages (PDP) with variant selector, add-to-cart, cart drawer
• Cart → Shopify checkout handoff (native Shopify checkout, zero custom payment code)
• Site search (Pagefind)
• Collection filters by size, material, style
• Hybrid blog: 22 articles (17 migrated from Shopify + 5 new cornerstone guides)
• Full structured data and technical SEO
• Cookie consent / CCPA / legal pages
• ADA / WCAG 2.1 AA compliance
• Analytics scaffolding (GA4 + consent layer)
• Google Merchant Center product feed
• Vercel deployment with preview environments

Why it matters

A headless rebuild sounds like overkill for a small e-commerce store. It isn’t when the brand’s product photography and story need to load fast enough to keep a mobile shopper from bouncing. A 52 → 100 Performance score isn’t a vanity metric — it’s the gap between a page that loads in 3 seconds and one that loads in under a second on a phone on a 4G connection.

The Shopify checkout stays exactly where it is. The merchant keeps their admin. The customer gets a faster, more premium experience. And Google now has the full structured-data picture it needs to rank and understand the store.

This is how we approach web development and technical SEO for direct-to-consumer brands. Request a growth audit to see what’s possible for your store.