加载速度：快一点，值多少？

Vodafone 用 A/B 测试验证：LCP 改善 31%，销售提升 8%，性能收益要自己测

洛洛以前一直觉得"加载速度"是写代码的人该操心的事，跟做设计和做内容的没关系。然后就翻车了。

那次给社团做活动落地页，洛洛在 Figma 里把首图磨了两天，四千像素宽的原图直接导出就扔上去。在实验室 Wi-Fi 上预览，秒开，美丽之。

上线当天报名数低得离谱，洛洛第一反应是文案不行、时间不对。

后来把链接发给默子老师，他连内容都没评价，第一句是："你这页面，用户在手机 4G 上要等三秒才看见第一张图。"

洛洛当时的疑问特别实在：慢这么一点点，到底值多少钱？ 答案比"越快越好"具体得多。

加载速度信息图：A 对照版与 B 优化版视觉和功能完全一致，区别只是主要内容显示时间 LCP 的早晚；右侧为 Vodafone 官方公开案例，LCP 改善 31%，销售提升 8%，采用 A/B 测试验证

研究说了什么

先说清楚：这一篇的来源不是实验室论文，是一个公开的业务案例——Vodafone 发布在 web.dev 上的性能优化案例研究，页面发布日期是 2021 年 3 月 17 日。

先解释图上那个缩写。LCP，Largest Contentful Paint，中文一般叫「最大内容绘制」，就是"页面上那块主要内容什么时候显示出来"，通常是首图或大标题。洛洛的土办法记法：LCP 不是"跑完全程"，是"第一眼看见东西"。

Vodafone 做的是一次 A/B 测试：50% 的流量进优化过的落地页（A 版），50% 进原来的基线页（B 版）。

优化手段有三类：把一个组件的渲染逻辑从客户端挪到服务端以减少阻塞渲染的 JavaScript；对关键 HTML 做服务端渲染；以及一整套图片处理。

结果 A 版的实地 LCP 比 B 版好 31%，对应的业务数字是：

案例里还有一个细节，洛洛看到时"欸"了一声：A 版的 DOMContentLoaded 时间反而变长了 15%，但业务结果照样变好。也就是说，真正跟生意挂钩的不是"页面处理完了没"，是"用户看见主要内容了没"。

图上明确标了：界面为示意，31% 与 8% 这两个数字来自 Vodafone 案例，不是普遍规律。

图上"机制解释"那格说得很克制：等待成本可能使用户在得到内容前离开，从而影响业务结果。

洛洛想补的是等待时人在想什么。盯着白屏或一堆灰色占位块，你拿不到任何反馈——不知道还要多久，不知道内容值不值得等，甚至不确定是不是自己网络坏了。这种"不知道"比"慢"更难熬。

所以速度影响的不是抽象的品质感，是一个很具体的动作：有多少人还在页面上，没走。

这也解释了为什么 LCP 比"全部加载完"更重要：只要主要内容先出来，用户就有东西可看，后台还在忙什么他不关心。

图上"产品延伸"那格给的原则是：保持视觉与功能一致，用自己的 A/B 验证性能收益。展开成可操作的：

对照组和实验组，视觉与功能必须完全一样。 如果 A 版顺手把按钮改大了，你就不知道那 8% 是速度带来的还是设计带来的。想测速度就只动速度，别的都别碰。
盯 LCP，别只盯"加载完成"。 先确定"用户最该先看到的那一块是什么"，再让它第一个出来。
图片是做内容的人最容易拿到的那块收益。 尺寸按实际展示宽度出、用 WebP、按视口加载、能压就压。这几件事在 Figma 里导出时就能搞定，而它们恰好都在 Vodafone 的优化清单里。

洛洛碎碎念

那次活动页后来把首图压到了三百多 KB，视觉上几乎看不出区别。最扎心的是，我在 Figma 里磨那两天纠结的是投影要不要再柔一点，而真正决定有多少人看到这张图的，是导出时随手点的那个尺寸。

默子老师说过一句话洛洛一直记着："用户看不见的设计，等于没做。"当时以为是在说排版，现在知道也在说加载。

图上"边界"这格写的是：不存在通用的"每慢 1 秒固定损失比例"；案例不能直接套用。 这句话洛洛想重重地讲一遍，因为网上抄得最多的就是这类换算。

第一，31% 和 8% 是 Vodafone 的数字，不是你的。 你的品类、客单价、网络环境、基线快慢都不同，收益可能是另一个量级，也可能测不出显著差异。

第二，"每慢 1 秒掉 X% 转化"这种说法本身就很可疑。 速度和转化的关系不是线性的：从 8 秒优化到 5 秒和从 1.5 秒优化到 1.2 秒，收益不可能相同；快到某个程度回报会明显递减。

第三，相关不等于因果，除非你做了对照。 这个案例站得住是因为它是 A/B 测试。只是"优化了性能，同期销售涨了 8%"的话，那 8% 可能来自节日、投放或竞品出事。

第四，快是及格线，不是卖点。 页面秒开救不了没人想要的东西。洛洛那次活动页后来图也压了、首屏也快了，报名数确实回来一些，但真正翻身是换了主题之后。

性能收益是真的，但它的大小只能在你自己的产品里测出来。

web.dev,《Vodafone: A 31% improvement in LCP increased sales by 8%》，Google web.dev 案例研究，发布日期 2021-03-17。https://web.dev/case-studies/vodafone （查阅日期 2026-09-14）
Google Search Central Blog 对同一案例的转载说明：https://developers.google.com/search/blog/2021/04/vodafone-case-study （查阅日期 2026-09-14）