Skip to main content

Case study

Headless ecommerce: Astro + Shopify, CWV and accessibility

Case study: headless front with Astro + Shopify Storefront API, CWV budgets, and integrated accessibility.

Industry

Retail

Role

Frontend Lead / Technical SEO

Stack

AstroReactShopify Storefront APITailwind CSSCore Web VitalsAccesibilidad (WCAG)GA4 / Pixel

Situation

Shopify store with a script-heavy theme, high LCP, and recurring CLS. Needed control over performance and accessibility without hurting conversion.

Task

Build a headless front with Astro + Storefront API, with CWV budgets, accessibility by default, and consistent technical SEO.

Action

1) CWV audit and dependency map for JS/third-parties. 2) Migration to Astro with minimal islands and critical asset preloading. 3) Accessible layouts (landmarks, focus order, modals/menu) and keyboard tests. 4) Canonicals/hreflang per template and JSON-LD (Person, WebSite, BreadcrumbList). 5) Post-launch monitoring with CWV dashboards and alerts.

Outcome

  • PDP LCP 3.4s -> 2.1s p75 (CrUX)
  • CLS 0.12 -> 0.03; INP <= 180ms
  • Stable technical SEO: canonicals, hreflang, schema
  • Checkout CVR +6% and bounce -9% on mobile
  • Organic traffic to PDP +18% in 45 days

Summary

Migration to a headless front with Astro/React to control CWV, accessibility, and technical SEO.

Deliverables

  • Astro front with minimal islands
  • CWV budgets per template
  • Accessible patterns validated
  • Canonicals + hreflang + schema per page
  • CWV dashboard and alerts