本文将通过一些已取得积极成效的公司的示例，帮助您了解核心网页指标与关键业务指标之间的关联。
您是否在努力说服利益相关方采用核心 Web 指标？或者，您是否在想它是否真的有助于您的业务？ 本文将通过一些已取得积极成效的公司的示例，帮助您了解 Core Web Vitals 与关键业务指标之间的关联。
如果您更喜欢通过视频了解信息，请观看 Google I/O 大会上的这段演讲：
核心网页指标对您的用户和业务而言为何至关重要
组织中的不同利益相关方可能有不同的优先事项。核心网页指标可以通过专注于优化以用户为中心的指标以及由此带来的业务增长，让所有人达成共识。
不同网站在提升核心网页指标方面所采取的路径可能有所不同，具体取决于它们在性能改进历程中所处的位置以及网站设计的复杂程度。从着手解决简单问题并取得有意义的结果，到实施复杂的解决方案来解决棘手问题，方法不尽相同。无论花费多少时间，决策者都应将其视为对业务增长的长期投资。提供快速顺畅的导航体验可让用户满意，并有助于将他们转变为忠实的回头客。对于产品经理而言，效果应该是衡量新产品功能质量和成效的重要标准。优质的产品和有趣的挑战也会提升开发者满意度。
虽然将 Core Web Vitals 用作排名信号会让您更有动力花时间提升性能，但除了排名之外，采用 Core Web Vitals 还有许多其他短期和长期好处。我们来看看一些全球和本地品牌的案例，了解他们是如何因为 Core Web Vitals 侧重于用户体验而采用该指标的（在 Core Web Vitals 对排名产生影响之前）。
案例研究
Vodafone
Vodafone（意大利）将 LCP 提升了 31%，从而提高了 8% 的销售额。
技巧
- 服务器端渲染关键 HTML。
- 减少会阻塞渲染的 JavaScript。
- 图片优化技巧。
- 调整主打图片的尺寸；推迟非关键资源。
重要经验
- A/B 测试是衡量有意义影响的最佳方式。
- A/B 测试应为服务器端测试。
iCook
iCook 将 CLS 提高了 15%，从而将广告收入提高了 10%。
技巧
- 界面中预分配的广告单元尺寸和固定大小广告位的差异较小。
- 优化了广告脚本加载逻辑，以优先处理标头出价并延迟加载非关键 JS。
重要经验
填充率可能会受到影响，但随着广告可见度的提升，最终收入会增加。
Tokopedia
Tokopedia 将 LCP 缩短了 55%，平均会话时长延长了 23%。
技巧
- 服务器端渲染 (SSR) LCP 元素。
- 预加载 LCP 元素。
- 图片优化（压缩、WebP、延迟加载非关键图片）。
重要经验
- 构建了性能监控信息中心，以监控各团队的进度和成效。
- 尝试了不同的呈现技术（例如，SSR LCP 元素与 SSR 可见区域内容与完全客户端呈现）。
Redbus
修复核心网页指标问题后，Redbus 在全球市场的各项媒体资源的移动转化率 (mCVR) 提高了 80-100%，网域排名也显著提升。
技巧
重要经验
- 将 CLS 从 1.65 降低至 0，使其域名在全球的排名大幅提升。
- 将 TTI 从大约 8 秒缩短到大约 4 秒，并将 TBT 从大约 1200 毫秒缩短到大约 700 毫秒，这有助于全球媒体资源的 mCVR 提高了 80-100%。
- 使用 RUM 工具有助于捕获低层级市场中的实际性能指标。
- 为了避免出现回归问题，采用效果文化非常重要。此外，由于代码经过优化、发布速度更快且生产问题更少，团队的工作效率也得到了提升。
上述案例研究表明，通过采用最佳实践并实施快速见效的措施，您可以取得很多成就。下面是关于这一点的几个其他真实示例。
上述成效是通过抓住一些唾手可得的机会实现的，例如：
| 图片优化 | JavaScript 优化 | 广告和动态内容 |
|---|---|---|
| 使用 WebP 图片格式 | 推迟加载第三方 JS | 为首屏上方广告预留空间 |
| 使用图片 CDN | 移除会阻塞渲染的 JavaScript 和未使用的 JavaScript | 为动态内容设置高度 |
| 压缩 | 延迟加载非关键 JS | |
| 推迟非关键图片 | 预加载关键 JS | |
| 预加载主打图片 | ||
| 指定宽高比 |
如需了解更多最佳实践，请参阅 Web Vitals 指南。 使用 PageSpeed Insights 审核您的网站，并立即获取切实可行的建议。
还有多家全球品牌也通过投资 Core Web Vitals 获得了益处。
- 腾讯视频通过达到核心 Web 指标要求，将视频点击率提高了 70%。
- Cdiscount 改进了所有 3 个指标，这有助于其在黑色星期五促销活动中提高了 6% 的收入。
- Wix 将通过核心网页指标测试的移动源增加了 250% 以上。
- Nykaa 发现，LCP 改善了 40%，来自第 2/第 3 级城市的自然流量增加了 28%。
- NIKKEI STYLE 的 LCP 改善幅度为 18%，每次会话的网页浏览量增加了 9%。
- 在将 LCP 缩减一半并做出其他产品更改后，NDTV 的跳出率降低了 50%。
- Agrofy Market 的 LCP 提升了 70%，加载弃用率下降了 76%。
- Flipkart 通过改进 Core Web Vitals 指标，将跳出率降低了 2.6%。
- Ameba Manga 将 CLS 得分提高了 10 倍，阅读漫画的次数提高了 2-3 倍。
- Yahoo! 日本修复了 CLS，导致效果不佳的网页减少了 98%，每次会话网页浏览量提高了 15%。
- AliExpress 将 CLS 提高了 10 倍，将 LCP 提高了 2 倍，这使得跳出率降低了 15%。
- GEDI 的 CLS 降低了 77%，跳出率降低了 8%。
如何立即开始使用？
第 1 步：开始衡量
首先，使用实时用户监控 (RUM) 工具衡量您网站的实测数据。目前，已有各种 Google 和第三方 (3P) RUM 工具可供使用。
Google RUM 工具
- Search Console
- PageSpeed Insights
- web-vitals JavaScript 库
- Chrome 用户体验报告 (CrUX)
第三方 RUM 工具
- Cloudflare
- New Relic
- Akamai
- Calibre
- 蓝色三角形
- Sentry
- SpeedCurve
- Raygun
请选择最适合您的工具。您还可以更进一步，与 Google Analytics 4 集成，将 Core Web Vitals 与您的业务指标相关联。
第 2 步：说服利益相关方
- 向利益相关方说明采用 Core Web Vitals 来改善用户体验的重要性，以及它与公司业务指标之间的相关性。
- 在内部寻找赞助者，以开展小规模实验。
- 让利益相关方达成共识，以便各团队共同提升 Core Web Vitals 指标。
第 3 步：利用以下提示成功实现
- 确定优先级：选择流量和/或转化重要性较高的网页，以便获得有意义的结果（例如广告着陆页、转化页或热门页）。
- A/B 测试：使用服务器端测试可避免任何渲染开销。 比较优化后的版本与未优化版本的结果。
- 监控：使用持续监控来防止回归。
最后，我们认为，效果是一场旅程，而不是终点。 因此，我们计划不断更新本文，以便您及时了解最新的案例研究亮点。 如果您也有令人瞩目的业务成就，并且希望在本文中展示，请提交内容提案。