2024年3月，一个DTC护肤品牌找到我们时面临一个痛苦的问题：他们的Shopify主题速度很慢，广告支出正在大量浪费，他们的Core Web Vitals指标深陷红色区域，Google基本上在搜索结果中降低了他们的优先级。八个月后，他们的广告支出回报率增长了249%，LCP从8.2秒降低到1.4秒，每一个Core Web Vitals指标都处于绿色区域。这是我们如何做到这一点的完整故事——架构决策、权衡取舍、犯过的错误，以及实际数据。

目录

DTC Brand Migrated Shopify to Headless Next.js: 249% ROAS Increase

起点：一个陷入困境的Shopify商店

我们称他们为GlowCo（NDA，你懂的规则）。他们是一个DTC护肤品牌，通过Shopify Plus商店年销售额约320万美元。他们有47个SKU、通过Recharge的订阅模式，每月在Meta和Google广告上的支出约为8.5万美元。

问题不在于他们的产品或营销团队。问题在于他们的网站。

以下是他们联系我们时的指标情况：

指标 值（2024年3月） 状态
最大内容绘制时间（LCP） 8.2秒 🔴 较差
首次输入延迟（FID） 340毫秒 🔴 较差
累积布局偏移（CLS） 0.42 🔴 较差
下一次绘制的交互（INP） 510毫秒 🔴 较差
移动PageSpeed评分 18/100 🔴
桌面PageSpeed评分 42/100 🟡
跳出率（移动） 71% —
转化率 1.2% —
Meta广告ROAS 1.8x —
Google广告ROAS 2.1x —

移动设备上的PageSpeed评分只有18分。我见过很多糟糕的Shopify商店，但这个携带着一个主题，其中包含2.4MB的未优化JavaScript、14个阻塞渲染的第三方脚本（Klaviyo、Yotpo、一个忠诚度应用、两个不同的弹窗工具，以及一些分析脚本），以及英雄图像——3MB的PNG文件，都是在没有任何响应式尺寸的情况下提供的。

他们的Shopify主题是一个热门高级主题的高度定制版本，在三年内被至少四个不同的自由职业者修改过。Liquid模板代码是一个嵌套的条件逻辑混乱，没有人能完全理解。

但最吸引我注意力的是：他们的营销团队向我们展示了他们的Meta广告质量评分在过去几个月里一直在下降。Meta的算法会惩罚加载缓慢的登陆页面。Google Shopping的情况也是一样——他们的广告获得更少的展示次数，CPCs更高，因为登陆页面体验评分正在下降。

他们不仅在失去有机流量。他们实际上是在为每次点击支付更多费用，因为他们的网站速度很慢。

为什么选择Headless以及时机问题

GlowCo已经探索过显而易见的选择。他们尝试过优化他们现有的Shopify主题——删除一些应用、压缩图像、切换到一个稍微轻一点的主题。它有帮助，但作用有限。LCP从8.2秒降到约6.8秒。仍然深陷红色区域。

根本问题是我们在Shopify的单一架构中反复看到的：你无法控制渲染管道。Shopify的服务器呈现Liquid模板，注入他们自己的JavaScript（仅Shopify的核心JS就约200KB），你受到主题和应用正在做什么的摆布。

采用Headless意味着将前端与Shopify的渲染层完全分离。Shopify仍然会处理商务后端——产品、库存、结账、支付——但我们将从头开始构建整个面向客户的体验。

时机在三个方面是有利的：

  1. Shopify的Storefront API已经成熟得相当不错。 到2024年初，Storefront API涵盖了您在完整商店体验中需要的几乎所有内容，包括购物车管理、客户账户和元字段访问。

  2. Shopify结账可扩展性现在在Plus上可用。这意味着我们不需要重建结账（说实话，这曾是Headless陷入困境的地方）。

  3. 业务案例很清楚。 如果改进网站速度可以在改进转化率的同时甚至将他们的CPC降低15-20%，该项目将在3-4个月内收回投资。

技术栈选择：Next.js、Hydrogen和Storefront API

这是事情变得有趣的地方，因为我们对技术栈进行了真正的辩论。

候选技术

Shopify的Headless官方方案是Hydrogen——他们基于React的、建立在Remix基础上的框架。它与Shopify的API紧密集成，部署在Oxygen（Shopify的托管平台）上。

但我们最终选择了Next.js 14（App Router）使用Shopify的Hydrogen React库——而不是完整的Hydrogen/Remix框架。

以下是原因：

因素 Hydrogen（Remix/Oxygen） Next.js + Hydrogen React Astro + Storefront API
SSR/SSG灵活性 良好（Remix流式传输） 出色（ISR、SSG、SSR、RSC） 出色（Islands、SSG）
React生态系统 完整 完整 部分（Islands）
托管选项 仅Oxygen（或自托管） Vercel、Netlify、AWS、自托管 任何静态主机 + SSR
Shopify集成深度 原生 通过@shopify/hydrogen-react 手动API调用
团队熟悉度 低 高 中等
边缘渲染 Oxygen Workers Vercel Edge、Cloudflare Cloudflare、Netlify
社区/生态系统 不断增长 庞大 快速增长

我们认真考虑了Astro。对于内容丰富、交互性较少的网站，Astro的部分水合模型会很理想。但GlowCo的网站需要大量的客户端交互——一个产品测验、护肤程序构建器、快速添加购物车抽屉、实时订阅管理。Next.js的React Server Components给了我们最好的服务器渲染性能与客户端丰富性的平衡。

我们还选择在Vercel而不是Oxygen上部署。Vercel的边缘网络和ISR（增量静态再生）功能为我们提供了当时无法在Oxygen上轻松复制的精细缓存控制。

我们的最终技术栈：

  • Next.js 14（App Router with React Server Components）
  • @shopify/hydrogen-react用于购物车和Storefront API实用程序
  • Shopify Storefront API（GraphQL）用于产品数据
  • Shopify Plus结账（原生，而不是自定义构建）
  • Sanity CMS用于编辑内容、登陆页面和博客文章
  • Vercel用于托管和边缘函数
  • Recharge通过他们的Headless API处理订阅
  • Klaviyo通过轻量级自定义集成异步加载

如果您正在评估类似的设置，我们Social Animal团队对这个确切的架构有深厚的经验。

DTC Brand Migrated Shopify to Headless Next.js: 249% ROAS Increase - architecture

迁移架构

数据层

我们将Shopify作为所有商务数据的信息来源。产品、变体、库存、定价、客户、订单——一切都保留在Shopify中。这是不可协商的。Shopify的商务引擎经过了实战考验，他们的结账转化率很难被击败。

对于内容，我们设置了Sanity作为一个Headless CMS。产品页面从Shopify提取结构化数据（定价、变体、库存）以及来自Sanity的编辑内容（成分故事、使用指南、交叉销售叙述）。这种分离很关键——这意味着营销团队可以更新页面内容而无需接触产品数据，运营团队可以管理库存而不会破坏登陆页面。

// 简化的产品页面数据获取（Next.js App Router）
async function getProductPageData(handle: string) {
  const [shopifyProduct, sanityContent] = await Promise.all([
    getShopifyProduct(handle),   // Storefront API GraphQL
    getSanityProductContent(handle) // Sanity GROQ query
  ]);

  return {
    product: shopifyProduct,
    editorial: sanityContent,
    // 合并元字段以用于结构化数据
    structuredData: buildProductSchema(shopifyProduct, sanityContent),
  };
}

渲染策略

并非每个页面都需要相同的渲染方式。我们对此很谨慎：

  • 产品页面： ISR，60秒再生周期。产品不会每秒都改变，但我们需要在一分钟内保持库存准确性。
  • 集合页面： ISR，5分钟再生周期。这些变化更少。
  • 首页和登陆页面： ISR with按需再生由Sanity webhooks触发。当营销团队发布时，一个webhook点击我们的再生端点。
  • 购物车/账户页面： 完整客户端，带服务器呈现的shell。这些本质上是动态的。
  • 博客/编辑： 在构建时进行静态生成，with按需再生。

购物车实现

这是@shopify/hydrogen-react值得被使用的地方。CartProvider和相关的hooks处理所有购物车状态管理，包括乐观UI更新。购物车存放在Shopify的Storefront API中（而不是本地状态），这意味着它跨会话和设备持久化。

// 具有乐观更新的购物车抽屉
'use client';
import { CartProvider, useCart } from '@shopify/hydrogen-react';

function CartDrawer() {
  const { lines, totalQuantity, cost, linesUpdate } = useCart();

  return (
    <Sheet>
      {lines.map((line) => (
        <CartLine
          key={line.id}
          line={line}
          onQuantityChange={(quantity) =>
            linesUpdate([{ id: line.id, quantity }])
          }
        />
      ))}
      <CartTotal cost={cost} />
      <CheckoutButton />
    </Sheet>
  );
}

结账

我们没有构建自定义结账。这很重要。Shopify的原生结账（特别是在Plus上with Checkout Extensibility）有多年的A/B测试和优化。Shop Pay本身可以为回头客增加50%的结账转化率。我们使用Checkout UI Extensions进行品牌一致性和追加销售小部件的定制，但核心流程保持Shopify原生。

修复Core Web Vitals：什么真正产生了影响

这是大多数案例研究回避的部分。采用Headless不会神奇地修复你的Core Web Vitals。你完全可以构建一个缓慢的Next.js网站。我见过这种情况发生。重要的是，一旦你对渲染管道有了控制权，你进行的具体优化。

LCP：从8.2秒到1.4秒

LCP最大的改进来自三件事：

  1. 消除阻塞渲染的资源。 在旧的Shopify主题中，14个第三方脚本同步加载。在我们的Next.js构建中，关键CSS内联，JavaScript进行代码分割并仅在需要的地方加载，第三方脚本使用next/script with strategy="lazyOnload"在主要内容绘制后加载。

  2. 使用next/image进行图像优化。 我们以WebP/AVIF格式提供响应式图像，针对每个视口进行适当的尺寸调整。英雄图像从3MB的PNG缩小到~80KB的AVIF文件。LCP元素（通常是英雄图像）现在作为优先级预加载资源加载。

  3. 带有stale-while-revalidate的边缘缓存。 Vercel上的ISR意味着再生窗口之后的第一个访问者立即获得缓存的页面，而服务器在后台再生。大多数访问者从不需要等待服务器呈现。

CLS：从0.42到0.02

布局偏移是由没有尺寸的图像、字体加载延迟（FOUT）和动态注入的应用小部件引起的。我们的修复：

  • 所有图像都有显式的width和height属性（或使用aspect-ratio CSS）
  • 字体预加载with font-display: swap和尺寸调整的后备字体
  • 折叠线上方没有动态注入的第三方小部件
  • 任何异步内容的骨架UI组件

INP：从510毫秒到78毫秒

下一次绘制的交互是最难修复的。旧主题在整个DOM上附加了事件处理程序、jQuery瀑布，以及阻塞主线程的大量客户端JavaScript。

React Server Components是这里的关键。通过在服务器上呈现页面的大部分并仅水合交互组件（购物车抽屉、产品选择器、测验小部件），我们大大减少了客户端JavaScript的数量。产品页面的总客户端bundle从2.4MB降到187KB。

After数字

指标 之前（2024年3月） 之后（2024年11月） 状态
LCP 8.2秒 1.4秒 🟢 好
FID 340毫秒 12毫秒 🟢 好
CLS 0.42 0.02 🟢 好
INP 510毫秒 78毫秒 🟢 好
移动PageSpeed 18 94 🟢
桌面PageSpeed 42 99 🟢
总JS（产品页面） 2.4MB 187KB —
TTFB（p75） 1.8秒 0.12秒 —

ROAS故事：性能如何转化为利润

这是橡胶上路的地方。没有人为了好玩而迁移到Headless——业务案例必须存在。

新网站在2024年7月至10月之间分阶段启动。到11月，我们有清晰的数据进行比较。结果坦率地说，比我们的预期要好。

直接转化影响

移动跳出率从71%降到38%。这单独就是巨大的——这意味着46%更多的访问者留下来甚至查看产品。移动转化率从1.2%升到2.8%。

桌面转化率从2.4%改进到3.9%。

总体混合转化率：1.2% → 3.1%

广告平台影响

这是让我们甚至感到惊讶的部分。在Core Web Vitals跨越整个平台转绿的六周内：

  • Google广告CPC下降22% ——Google的登陆页面体验评分改进，直接降低了每次点击的成本
  • Meta广告CPM下降18% ——Meta的算法开始更多地展示他们的广告（更好的登陆页面=更高的相关性评分=更低的成本）
  • Google Shopping展示份额增加34% ——更好的页面体验意味着Google更愿意展示他们的产品列表

ROAS上的综合效果：

渠道 之前ROAS 之后ROAS 变化
Meta广告 1.8x 5.2x +189%
Google搜索广告 2.1x 7.4x +252%
Google购物 2.4x 8.8x +267%
混合 1.95x 6.8x +249%

249%的混合ROAS增加来自两个复合因素：更低的每次点击成本和更高的转化率。当你的点击成本更低，每次点击的转化率更高时，数学会变得很美妙。

有机流量

我应该提到SEO影响。在所有Core Web Vitals转绿后的4个月内：

  • 有机流量增加67%
  • 目标关键词的平均位置改进了4.2个位置
  • 有机收入增加89%

Google一直很明确表示页面体验是排名信号。这是真实世界的证明。

时间表、预算和实际成本

我相信关于这类项目实际成本的透明度。以下是真实的细分：

时间表： 从启动到全面启动的7个月（with分阶段部署从第5个月开始）

团队： 2名高级前端开发人员、1名Shopify后端专家、1名设计师、1名项目经理（兼职）

总项目成本： 约145,000美元

月度托管/基础设施： 约350美元/月（Vercel Pro + Sanity Growth计划）

持续Shopify Plus： 2,300美元/月（不变——他们已经在Plus上）

投资回报期： 基于提高的ROAS和转化率带来的增加收入，项目在2.8个月内收回投资。

这种投资是否适合每个品牌？不。如果你的年收入低于100万美元，数学可能还不可行。但对于年支出超过5万美元的DTC品牌，who have poor Core Web Vitals，ROI几乎总是存在的。

经验教训和我们会做的不同之处

什么有效

  • 保持Shopify结账原生是100%的正确选择。没有结账转化率回归。
  • ISR with按需再生给了我们两个世界中最好的：静态性能with动态内容。
  • 分阶段推出（首先启动博客/编辑页面，然后集合，然后PDPs，然后首页）让我们在迁移高流量页面之前在生产环境中验证性能。

我们会做的不同之处

  • 更早启动Recharge Headless迁移。 他们的Headless API有一些我们没有预料到的怪癖，它耗费了我们3周的时间表。如果你使用Recharge，预留额外的时间。
  • 从第一天起建立A/B测试基础设施。 我们在第2个月添加了它，丧失了一些早期的比较数据。
  • 使用Vercel的Edge Config进行功能标志而不是我们开始使用的环境变量方式。会让分阶段推出更清洁。

一个诚实的警告

Headless方法增加了操作复杂性。GlowCo现在管理两个系统而不是一个。他们的营销团队不能只是安装一个Shopify应用并让它出现在店面上——任何新的第三方集成都需要开发工作。对于GlowCo来说，在他们的规模和广告支出，性能增益远远超过这个摩擦。但这是你需要从一开始理解的真正权衡。

常见问题

将Shopify商店迁移到Headless Next.js需要多长时间？ 对于典型的DTC品牌with 30-100个SKU，expect 4-8个月，取决于复杂性。GlowCo的项目花费7个月是由于自定义功能，如他们的护肤测验和Recharge订阅集成。with更少自定义功能的更简单商店可以在4-5个月内完成。

采用Headless会破坏Shopify应用吗？ 是的，大多数依赖主题的Shopify应用在Headless设置中不会工作。将UI注入到店面中的应用（评价小部件、忠诚弹窗、追加销售工具）需要被替换为API-based替代品或自定义构建的组件。后端应用（库存管理、运输等）继续工作正常，因为它们不接触前端。

对于Headless Shopify，Hydrogen还是Next.js更好？ 这取决于你的团队和需求。Hydrogen（built on Remix）开箱即用提供更紧密的Shopify集成，是Shopify的官方支持路径。Next.js提供更大的生态系统、更多托管灵活性和React Server Components。我们为GlowCo选择了Next.js，因为团队的现有专业知识和Vercel的边缘缓存功能。两个都是很好的选择。

一个Headless Shopify迁移在2026年要花多少钱？ 现实的预算范围从80,000美元到250,000美元+，取决于商店复杂性、自定义功能和代理机构费率。GlowCo的项目是145,000美元。小心任何报价低于50,000美元进行完整Headless构建的代理——你可能会得到一个模板with有限的定制。月度基础设施成本通常运行200-600美元用于托管和CMS。

Core Web Vitals真的影响Google广告成本吗？ 是的。Google广告使用"登陆页面体验"评分作为其质量评分计算的一部分。更好的页面速度和Core Web Vitals评分导致更高的质量评分，这直接降低了你的每次点击成本。GlowCo在他们的Core Web Vitals改进后看到了22%的CPC减少。Meta使用类似的信号用于广告相关性评分。

采用Headless时你可以保持Shopify结账吗？ 绝对可以，我们强烈建议这样做。Shopify的结账高度优化，包括Shop Pay这样的功能（可以为回头客增加结账转化率50%+）。with Shopify Plus，你可以使用Checkout Extensibility来自定义外观并添加追加销售，同时保持核心结账流程完好。

Headless Shopify和Shopify Hydrogen之间的区别是什么？ Headless Shopify是一个宽泛的概念——任何使用Shopify的Storefront API的自定义前端。Hydrogen是Shopify的具体框架用于构建Headless店铺，built on Remix并部署在Shopify的Oxygen托管上。你可以用Next.js、Astro、Nuxt或任何框架采用Headless。Hydrogen只是Headless Shopify生态系统内的一个选项。

对于小型Shopify商店，Headless值得吗？ 通常不值得。如果你的年收入低于100万美元，每月广告支出少于20,000美元，Headless迁移的成本可能不会产生有意义的ROI。首先专注于优化你现有的主题——删除未使用的应用、压缩图像、切换到Dawn这样的性能驱动主题。当你的广告支出足够高，以至于即使是小的效率收益也转化为显著的美元金额时，考虑Headless。