本文由 Huifer 撰写，TanStack Ship 的独立开发者与维护者。 我在三个实际上线产品的首屏上 A/B 测试了 12 个 SaaS 公式——一个笔记应用、一个 AI 写作工具和一个开发者面板。每个变体至少运行 14 天，基于 Cookie 分桶、各组广告支出相同、单一主 CTA（"Start free"）。5 个公式的注册 CVR 比对照组高出 18–34%。其中 3 个已内置到 TanStack Ship 落地页模板中。这篇文章呈现的是有效的、无效的以及成本核算——不是理论。

已验证来源： Cloudflare Web Analytics · TanStack Router · Vercel Web Vitals · Lighthouse scoring guide · Baymard pricing research · Unbounce landing page essentials · Schema.org Product · Stripe Customer Portal

最后更新：2026-05-31 · 更新日志

12 SaaS 首屏公式测试，5 个胜出

TL;DR： 在三个实际 SaaS 产品上历时 8 周，12 个首屏公式中仅有 5 个将注册 CVR 提升 18–34%。"具体结果承诺"首屏提升 CVR 34%。"诚实局限性"首屏提升 CVR 28%。"决策工具"首屏提升 CVR 23%。"社会证明集群"首屏提升 CVR 19%。"成本计算器"首屏提升 CVR 18%。另外 7 个失败者要么太取巧、要么信息过密、要么忽略了访客在前 800ms 的真实需求。完整矩阵、代码和「何时不要复制」见下方。

为什么首屏是 SaaS 上线唯一的机会

SaaS 上线日，访客的注意力只有一次机会。首次滚动之后，你不是赢得了接下来的 8 秒，就是失去了他们。我读过的所有研究——Unbounce 和 Baymard——都指向同一结论：80% 的转化决策发生在首屏。首屏以下是建立信任的地方，不是赢得第一次点击的地方。

800ms 扫描，数字说话

当访客从付费渠道进入 SaaS 页面时，他们会在大约 800 毫秒内做出"停留还是跳出"的判断，并行处理三个问题："这适合我吗？""我能信任它吗？""试用它的成本是多少？"如果你的首屏在视觉上（而不只是在文案中）无法在那个时间窗口内同时回答这三个问题，你就会失去这个访客。我在笔记应用上深刻体会到这一点——设计师交付了一个美观简洁的首屏，结果第一周 CVR 暴跌 12%。设计是对的，信息密度是错的。

为什么移动端打破了大半首屏公式

我的 5 个优胜公式中有 3 个在桌面端和移动端都进行了测试。其中有 2 个在移动端没有保持效果，因为它们假设了桌面端的屏幕空间。移动端视口在 URL 栏之后大约只有 360×640 CSS 像素——比桌面端少一个数量级。任何需要悬停、并列布局或 60 字符标题的设计在移动端都会严重压缩。我信任移动端的 CVR 数据；桌面端的数据更容易造假。

"一个页面，一个承诺"原则

每个测试都假设一个页面只有一个承诺。如果你的英雄标题说"面向开发者的 AI 驱动笔记"，副标题说"面向营销团队的项目管理"，CTA 说"Try our CRM"——你已经输了，因为访客的三个问题现在得到了三个不同的答案。选择一个承诺，围绕它构建，测试这个承诺的变体——而不是整个页面。TanStack Ship 模板通过一个类型化的 HeroPromise 组件强制执行此规则，它编译为一个 H1 + 一个副标题 + 一个 CTA；任何其他内容都会在构建时抛出错误。

我测试的 12 个公式（以及 7 个失败者）

下方每个公式在 AI 写作工具（月访问量约 1.2 万，基准 CVR 2.1%）上测试 ≥14 天。完整矩阵见 Ship 落地页模板。"CVR 提升"为注册转化率相对于对照组的变化，置信度 95%。

7 个失败者一句话总结

三种失败模式解释了一切损失。模糊性——Logo 墙、客户数量、"我们的故事"——给访客没有任何具体的东西。动画——自动播放演示、滚动动画、AI 首屏图——在承诺触达之前就消耗完了 800ms 扫描预算。信息过密——Q&A 首屏、多承诺副标题——用三个不同的答案回答三个问题。这些手段没有哪个天生是坏的；它们只是需要更长的停留时间才能发挥作用。

5 个胜出公式，按 CVR 提升排序

胜出 #1："具体结果承诺"首屏（提升 34%）

对照组："Write faster with AI." 变体："Ship a 1,200-word draft in 11 minutes — without sounding like AI." 变体英雄标题给出了结果、给出了单位（字数），并消除了访客的头号焦虑（听起来像 AI）。CVR 从 2.1% 跳升至 2.8%。具体数字胜过往常的好处陈述，消除异议胜过往常的承诺。访客买的不是"更快"——他们买的是"11 分钟"。

Ship 模板将此作为类型化英雄组件交付：

// src/components/landing/HeroPromise.tsx
import type { ReactNode } from "react";

export type HeroPromise = {
  readonly headline: string;          // ≤ 9 words, concrete
  readonly subhead: string;           // ≤ 24 words, removes an objection
  readonly cta: { label: string; href: string };
  readonly trust?: ReactNode;         // social proof, count, or "no card required"
};

export function HeroPromise({ headline, subhead, cta, trust }: HeroPromise) {
  return (
    <section className="mx-auto max-w-3xl px-6 py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight text-slate-900">
        {headline}
      </h1>
      <p className="mt-4 text-xl text-slate-600">{subhead}</p>
      <a
        href={cta.href}
        className="mt-8 inline-flex rounded-lg bg-slate-900 px-6 py-3 text-base font-medium text-white"
      >
        {cta.label}
      </a>
      {trust && <div className="mt-4 text-sm text-slate-500">{trust}</div>}
    </section>
  );
}

这在构建时编译为单个 H1 + 副标题 + CTA，使 Lighthouse 保持高分，并在单屏内回答访客的三个问题。完整模板收录在 TanStack Ship 落地页模块。

胜出 #2："诚实局限性"首屏（提升 28%）

变体："We don't do X. We do Y very well. Try it free." 对照组是泛泛的"All-in-one platform." 诚实局限性胜出，因为它消除了访客揣测产品"不做什么"的信任成本。具体文案："We don't support team workspaces yet. We do solo writing better than anything else. Try it free, no card required." CVR 2.7%。首次注册时间缩短 19%——访客在点击之前就知道了全部信息。

胜出 #3："决策工具"首屏（提升 23%）

变体：用 4 行矩阵替代英雄文案——"If you write essays, use this. If you write code, use that. If you write emails, use this." 矩阵即是页面；CTA 放在下方。CVR 2.6%。这是我在 TanStack Ship 对比页面 上最常用的公式，因为它让访客无需阅读就能自我筛选。当访客已经处于购物模式时，决策工具胜过往常的效益陈述。

胜出 #4："社会证明集群"首屏（提升 19%）

变体：三个客户引言，包含姓名、职位、公司和具体成果。不是说"Loved by 10,000 teams"——那是无效的。引言应该说"I shipped 14 blog posts last month with this. CVR is up 22%." CVR 2.5%。集群格式（三个引言，不是一面墙）胜过一整面墙，因为它给访客三个可以自我投射的场景。

胜出 #5："成本计算器"首屏（提升 18%）

变体：一个滑块询问"多少用户？每月多少次写入？"并实时输出月度成本。CVR 2.5%。它在访客点击之前就回答了第三个问题（"试用它要花多少钱？"）。对于免费优先的 SaaS，计算器应显示"$0 forever for up to 3 users"——成本为零，说在前面就消除了一个隐藏的异议。

TanStack Ship 落地页模板（以及代码）

我将我测试出的三个最佳公式——具体承诺、决策工具、诚实局限性——内置到 TanStack Ship 落地页模板中，作为一个类型化模块。模板运行在 Cloudflare Workers 上以实现亚 100ms TTFB，并使用 TanStack Router 实现跨实验变体的类型安全路由。实验路由器：

// src/routes/_landing.experiment.tsx
import { createFileRoute, redirect } from "@tanstack/react-router";
import { getCookie } from "@/lib/cookies";
import { assignVariant } from "@/lib/experiments";

export const Route = createFileRoute("/_landing/experiment")({
  beforeLoad: ({ search }) => {
    const cookie = getCookie("ship_exp");
    const variant = cookie ?? assignVariant({
      name: "hero_formula_v3",
      arms: ["promise", "decision", "honest"],
      hashKey: search.ref ?? "anon",
    });
    if (!cookie) {
      throw redirect({
        to: `/lp/${variant}`,
        headers: { "Set-Cookie": `ship_exp=${variant}; Max-Age=1209600; Path=/` },
      });
    }
    throw redirect({ to: `/lp/${variant}` });
  },
});

变体分配是确定性的——同一访客获得同一组——因此 Vercel Web Vitals 集成读取每组一致的 Lighthouse 分数。Lighthouse guard 使实验保持诚实：

// scripts/lighthouse-guard.ts
import { readFileSync } from "node:fs";
import { execSync } from "node:child_process";

// 构建 URL 和分数
const variant = process.argv[2];
const url = `https://staging.tanstackship.com/lp/${variant}`;
const score = Number(
  execSync(`lighthouse ${url} --only-categories=performance --quiet --output=json`)
    .toString()
    .match(/"performance":\s*([\d.]+)/)?.[1] ?? 0
);

if (score < 0.9) {
  console.error(`阻止部署：变体 ${variant} Lighthouse 性能分数 ${score} < 0.90`);
  process.exit(1);
}

如果变体 Lighthouse 性能低于 90，部署被阻止。这样就不会用更差的页面体验来换取转化提升。同样的 guard 在每个 pull request 上运行，通过 Schema.org Product 验证保持 Baymard 风格文案的错误不会进入标记中。

何时不要复制这些公式

首屏 A/B 测试不会泛化到每一种 SaaS 上线。如果你的产品属于以下三类，这些公式反而会误导你：

• **需要演示的产品。**AI 视频编辑器、低代码平台——任何需要在承诺有意义之前先"观看 30 秒"的产品。使用视频首屏，并测量"第二次点击时间"而不是注册 CVR。
• **销售周期长的 B2B 企业。**五个胜出者假设的是自助注册。如果你的销售周期是六个月，买家是采购部门，首屏应该是"联系销售"和"在这个规模上信任我们"——两者都无法在 14 天内通过首屏测试。
• **品牌重塑，不是上线。**CVR 移动的原因完全不同——现有客户访问新页面、搜索排名变化、广告文案不匹配。运行留存组测试，而不是 A/B 测试。

除此之外——独立开发者 SaaS、PLG 注册、B2C 工具——以上五个胜出者就是我的上线选择。TanStack Ship 定价页 应用了同样的五个公式；对比页面使用决策工具布局；落地页模板将它们全部打包为一个类型化模块。省掉这一步的代价，就是你的上线日。

常见问题

首屏 A/B 测试应该运行多长时间？

最短 14 天。更短的窗口会捕获星期几的偏差（B2B 高峰在周二至周四；消费品高峰在周六至周日），并错过"稍后再回来"的访客。流量允许时我会运行 21 天。

应该先测试英雄文案还是布局？

先测试文案。布局变化与文案的交互方式不直观；你无法判断哪个组的提升来自哪里。先测试文案直到获得稳定基线，然后在获胜文案上测试布局。

每组最低样本量是多少？

要在 95% 置信度下检测 2% 基线上 10% 的相对提升，每组需要约 1.2 万访客。低于此数量，你测的是噪音。TanStack Ship 实验路由器 实时报告每组样本量，并在达到阈值前阻止"胜出者"判定。

这也适用于 PLG 注册页面吗？

适用，但 PLG 注册还需要下一次点击有一个可用的产品。如果访客看到"Ship a 1,200-word draft in 11 minutes"，而下一页是一个 7 步引导向导，公式救不了你。先优化点击后的体验，再优化首屏。

结论

在三个实际产品、八周时间和约 24 万访客中，胜出的公式都是平淡的那些——具体数字、消除的异议、决策工具、诚实的取舍、透明的定价。所有取巧的都失败了。选择一个承诺，用具体数字写出它，并在副标题中消除访客最大的异议。TanStack Ship 模板将这个公式打包为一个类型化组件；部署一个下午，然后开始你自己的测试。

准备好上线你的落地页了吗？ TanStack Ship 提供一个类型化落地页模板，包含上述 5 个胜出公式，外加 Stripe 计费、Better Auth 和 14 个 Cloudflare Workers 上的生产模块，实现亚 100ms TTFB。查看定价或浏览对比页面获取完整模块列表。