Headless Web Design

Headless that loads in under a second.

Headless web design built for sub-second mobile load, complete SEO control, and zero CMS attack surface. Astro and Next.js frontends pulling from Shopify Storefront API, WooCommerce REST, or WordPress. Server-rendered HTML by default. Hydration only where the interaction needs it.

Get a Feasibility Audit 1.877.362.3077
Taylor Rupe, Co-Founder & CTO, B.S. Computer Science at Savo Group
Co-Founder & CTO, B.S. Computer Science ·
★★★★★ What some of our clients had to say

"Michael is an expert at technical SEO who can align both product/business goals with organic traffic increases. He not only brings traffic but relevant converting traffic to the sites he works on."

Sean F.
Sean F. Founder, WorkSimpli

"I can't say enough good things about these guys! Amazing company and I'll continue to refer them to everyone I know!"

Ryan Newman
Ryan Newman Owner, Newman Electric

"Michael delivered everything he promised and more. He has been responsive to our requests and intuitive about our needs. I highly recommend Michael for your web design and SEO needs."

William R.
William R. Personal Injury Lawyer

"We contracted with Michael to develop a series of websites concentrating on attorney marketing and the results have far exceeded expectations. Their results-oriented approach to marketing services delivers a strong return on investment."

Thomas C.
Thomas C. Criminal Defense Lawyer
The architecture

What headless actually means in code.

The CMS or commerce platform stays where it is. The customer-facing site gets rebuilt as a custom Astro or Next.js frontend pulling data through APIs. Same back office, different front end.

Backend

Shopify · WooCommerce · WordPress · Sanity

Editorial workflow, products, orders, content stays here

Storefront API · REST · GraphQL · webhooks

Frontend

Astro · Next.js

Server-rendered HTML, schema at template level, hydration only on islands

Static or hybrid render → edge cache

Edge

Cloudflare Workers · Vercel · Netlify

Asset CDN, image transforms, edge-cached HTML

Sub-second response, anywhere on Earth

Browser

A real human on a phone

Sees the page in under a second. Doesn't see the spinner.

Should you go headless?

A three-question test before any rebuild conversation.

The honest answer for most stores is "stay stock." Run through these three before scoping a headless project. We turn down clients on this test every month.

Q1

Is your stock platform hitting your performance targets?

Mobile PageSpeed above 70, LCP under 2.5s, INP under 200ms, conversion rate stable across devices. If your numbers are green, the platform isn't the bottleneck.

YesStay stock. Headless is overkill. Skip the rebuild conversation.
NoContinue to Q2.
Q2

Can your design and layout be expressed in Liquid (Shopify) or PHP (Woo) themes?

Custom theme development can solve most layout, branding, and template constraints inside the platform. Expensive but cheaper than headless. Only when the templating engine itself can't express what's needed does headless become necessary.

YesCustom theme on stock platform. Cheaper, faster, fewer moving parts.
NoContinue to Q3.
Q3

Do you have engineering capacity (in-house or retained) for ongoing headless ops?

Astro builds are mostly static and need minimal upkeep. Next.js apps with dynamic routing, ISR, and API routes need real engineering attention. Make sure the budget covers both the build and the year-two maintenance.

YesGo headless. Astro for content/marketing, Next.js for app-heavy. We can run ongoing engineering on a retainer.
NoReconsider scope or budget. A headless build without ops capacity creates two problems instead of one.

Ready to Grow Your Business?

Hand-coded websites and real SEO from a family-owned team with 27 years of experience. From small local businesses to enterprise corporations, nationwide.

Custom Websites That Convert

Hand-coded from scratch. No WordPress, no templates, no page builders. Your site loads in under a second, has nothing to hack, and is built to turn visitors into calls and form fills. Pretty is the floor, not the point.

Custom websites

Scoped to what you actually need. We look at the project and give you a straight quote. No packages, no upsells.

Book a Call

Prefer to just talk? (360) 838-6304 · Book a call · Mon-Fri, 9am-6pm PST

In code

What a Savo Group headless stack actually looks like.

Three patterns that show up in nearly every headless build. Real code, edited only for brevity.

Pattern · Storefront API query

Pulling products from Shopify, server-side.

A GraphQL query against the Shopify Storefront API runs at build time (or on demand for dynamic pages). The HTML ships pre-rendered to the browser — no client-side fetch, no loading spinner, no JS-render trap for Googlebot.

// src/pages/products/[handle].astro — server-rendered
const { handle } = Astro.params;
const query = `
  query GetProduct($handle: String!) {
    product(handle: $handle) {
      title
      description
      priceRange { minVariantPrice { amount currencyCode } }
      images(first: 10) { nodes { url altText } }
    }
  }
`;
const { data } = await shopifyClient.request(query, { handle });
Pattern · Astro islands

Hydration only on the parts that need it.

Most of a marketing or product page is static. There's no reason to ship a 200KB React bundle for content that doesn't change. Astro's island architecture lets us hydrate only the interactive components — the cart drawer, the variant selector, the search box — and ship plain HTML for everything else.

<!-- Static HTML — ships to browser as plain markup -->
<ProductGallery images={product.images} />
<ProductDescription html={product.description} />

<!-- Interactive island — hydrates with client:visible -->
<VariantSelector
  variants={product.variants}
  client:visible
/>

<!-- Cart drawer hydrates only when needed -->
<CartDrawer client:idle />
Pattern · Webhook-triggered revalidation

Editor saves in WP. Live site updates within seconds.

A common headless bug: editors update content in the CMS but the front end doesn't refresh because revalidation is misconfigured. We wire a webhook from the CMS to a Cloudflare Worker that triggers an on-demand rebuild of the affected pages — typically under 30 seconds end-to-end.

// src/pages/api/revalidate.ts — Astro server endpoint
export const POST: APIRoute = async ({ request }) => {
  const sig = request.headers.get('x-wp-webhook-signature');
  if (!verifySignature(sig, WEBHOOK_SECRET)) {
    return new Response('unauthorized', { status: 401 });
  }
  const { slug, type } = await request.json();
  await revalidatePath(`/${type}/${slug}/`);
  return new Response('ok');
};
The numbers that justify it

Stock platform PageSpeed vs headless on the same site.

Typical mobile PageSpeed scores across stack patterns we audit. Headless is the only path to consistently green Core Web Vitals on commerce. Stock platforms with apps drag from yellow into red.

Stack Mobile Desktop LCP
Stock Shopify (default theme) 38 72 4.2s
Stock Shopify + apps 24 58 5.8s
Headless Shopify (Astro) 96 100 1.1s
Stock WooCommerce + Elementor 19 42 6.4s
Headless WordPress (Astro) 95 100 1.3s

Numbers reflect typical PageSpeed scores from sites we audit, not best-case lab data. Real production performance varies by hosting, image weight, and third-party scripts. Real measurement is part of every Savo Group feasibility audit.

The migration playbook

Twelve checks every headless migration has to pass.

The migration risk is what kills most headless rebuilds. Broken redirects, lost schema, indexation drift. The playbook below runs on every Savo Group headless engagement.

01 Pre-launch
  • Crawl baseline of current site captured (URL inventory, current rankings, traffic per template)
  • Schema audit on existing site so nothing of value gets dropped during the rebuild
  • URL-by-URL redirect map drafted, validated against the actual sitemap (not regex shortcuts)
  • Cart, checkout, and account flows mapped between current platform and headless front end
02 Build + staging
  • Astro/Next.js front end built against the API (Storefront, REST, or GraphQL)
  • Schema preserved at template level: Product, Article, FAQPage, BreadcrumbList, Review
  • Webhook + ISR or revalidation tested so editor changes ship to live within seconds
  • Edge config tuned: cache headers, image transforms, compression
03 Cutover + post-launch
  • DNS cut at low-traffic window with rollback plan ready
  • Search Console resubmitted with new sitemap, change-of-address tool used where applicable
  • 404 log review daily for 14 days, weekly through day 60, to catch redirect edge cases
  • Ranking and traffic deltas tracked against the pre-migration baseline weekly
Headless · technical questions

The seven questions technical buyers ask.

When does headless actually make sense?

Three triggers, any one of which justifies it. Speed targets a stock theme can't hit. Stock Shopify caps around 60-65 mobile PageSpeed once apps are loaded. If sub-second mobile load is required for conversion or CWV ranking, headless is the answer. Design or layout that doesn't fit Liquid, PHP themes, or stock templates. If your buyer's path requires custom layouts, dynamic personalization, or content composition the platform's templating engine can't express, headless removes the constraint. SEO requirements that need template-level control. Schema architecture, canonical strategy, and JS-rendering control are vastly easier in a headless build than wrestling with a stock theme.

When does headless NOT make sense?

Most of the time, honestly. If your stock platform is hitting your performance targets, the design is expressible in Liquid or PHP, and SEO is ranking, headless is overkill. The migration cost (10-16 weeks) and ongoing engineering overhead (you now have two systems to maintain) outpaces the marginal speed gain. We turn down headless requests every month because the client's existing platform is fine. We'd rather lose the project than ship a headless rebuild that doesn't earn its cost.

What stack does Savo Group ship most often?

Astro for content-led, marketing, and most ecommerce frontends. Astro's island architecture means we ship near-zero JavaScript by default and hydrate only the parts that need to be interactive — exactly the wrong default for Next.js's app-heavy use case but exactly the right one for marketing and product pages. Next.js for app-heavy interfaces where React state and routing carry the page (dashboards, configurators, B2B portals). Backend: Shopify Storefront API, WooCommerce REST or WPGraphQL, or a SaaS headless CMS (Sanity, Contentful, DatoCMS) depending on what the back office needs to be.

Will my SEO survive the headless migration?

Yes when the migration is run properly. The risk in any migration is broken redirects, lost schema, and indexation drift. Our playbook covers pre-migration crawl baseline, URL-by-URL 301 mapping validated in staging, schema preservation across templates, and 60 days of 404-log monitoring post-launch. Google's official site-move guidance is the foundation. The case study to read for technical-migration depth is LifeMD, where the engagement diagnosed and fixed a Craft CMS rendering bug that had been blocking indexing entirely.

What about hosting and edge deployment?

We deploy on Cloudflare Workers, Vercel, or Netlify based on traffic patterns and edge requirements. Cloudflare Workers most often because the pricing scales sanely and the edge network is broad. Image CDN, asset caching, and compression are tuned per project. Hosting is included in the engagement quote, not a separate line item discovered after launch.

Can my editors keep using their existing CMS?

Yes. That's the whole point of headless. Shopify merchandisers stay in Shopify admin. WooCommerce store managers stay in WP. Editors on a SaaS CMS stay there. The customer-facing site gets rebuilt as a custom Astro or Next.js frontend pulling content through APIs, but the editorial workflow is preserved. Webhooks trigger frontend rebuilds (or revalidation, depending on the framework) so changes go live within seconds.

How much engineering does my team need to maintain headless?

Less than people think for an Astro build, more than they think for a Next.js app. Astro sites are mostly static — content updates trigger a rebuild but day-to-day code maintenance is minimal. Next.js apps with dynamic routing, ISR, server actions, and API routes need ongoing engineering attention. We'll tell you upfront which side your project lands on. Some clients keep us on a small monthly retainer for ongoing engineering. Others handle it in-house.

Ready to Grow Your Business?

Hand-coded websites and real SEO from a family-owned team with 27 years of experience. From small local businesses to enterprise corporations, nationwide.

Custom Websites That Convert

Hand-coded from scratch. No WordPress, no templates, no page builders. Your site loads in under a second, has nothing to hack, and is built to turn visitors into calls and form fills. Pretty is the floor, not the point.

Custom websites

Scoped to what you actually need. We look at the project and give you a straight quote. No packages, no upsells.

Book a Call

Prefer to just talk? (360) 838-6304 · Book a call · Mon-Fri, 9am-6pm PST

5.0 We reply within 24 hours
Call now Get a Free Quote

Get a Free Quote

Tell us about your project and we'll respond within 24 hours.
Message sent! We'll be in touch within 24 hours.