找出网站效果与业务指标之间的相关性是推动优化工作取得成功的关键。
Swappie 是一家销售翻新手机的成功创业公司。几年来，他们优先考虑的是添加新功能，而不是网站性能。不过，当他们注意到移动网站上的业务成效落后于桌面版时，便开始转变策略。他们专注于优化广告效果，很快就看到了移动流量收入的增长。
42%
增加来自移动访问者的收入
10pp*
*百分点 mCvR 相对增幅
突出显示机会
相对移动转化率 (Rel mCvR) 的计算方法是：移动转化率除以桌面设备转化率。跟踪速度指标有很多方法，但将其与业务指标相关联可能非常棘手。由于相同的广告系列和季节性因素同时覆盖移动设备和桌面设备，因此“相对移动转化率”指标会滤除这些外部参数的影响，仅显示移动网站的效果是否有所提升。
美国十大电子商务网站的平均相关 mCvR 为 50%，但 Swappie 的相关 mCvR 为 24%。这表明移动网站存在问题，公司因此错失了收入，这促成了效果提升项目的启动。
衡量效果提升的影响
Swappie 使用 此模板电子表格，通过 Google Analytics 设置了 Rel mCvR 和移动设备平均网页加载时间的每日跟踪。（请参阅有关如何使用电子表格的说明。） 他们还开始通过 Google Analytics 和 BigQuery 跟踪 Core Web Vitals。完成跟踪设置后，开发者开始着手改善网站性能。
仅仅三个月后，成效就显而易见了：相对 mCvR 从 24% 提高到了 34%，移动收入增长了 42%！
23%
缩短平均网页加载时间
55%
LCP 更低
91%
CLS 较低
90%
降低 FID
优化
针对 LCP 和 CLS 进行优化
Swappie 的开发团队发现，长期以来被忽视的一些小事有很大的改进空间。在不同视口和不同语言版本中研究该网站后，我们发现了一些简单易解且对整体性能有很大影响的 LCP 和 CLS 问题。例如，尽可能在服务器（而非客户端）上呈现 LCP 元素可缩短 LCP。
检测布局偏移非常具有挑战性，因为它们可能会因视口和连接而有很大差异。在将 Core Web Vitals 数据从用户那里导入到 Google Analytics 后，他们发现 CLS 有所降低，这让他们知道自己走在正确的道路上。
图片
图片已通过预加载、延迟加载和适当调整大小进行了优化。它们会预加载主要图片（例如 LCP），同时仅在需要时加载视口之外的图片。
字体
Swappie 通过更换提供商优化了字体。这对他们产生了很大影响，因为他们需要找到一种最佳方式来处理不同语言所需的字体。
第三方脚本
Swappie 投入了大量精力来审核每个第三方脚本和 widget，包括其使用场景和提供的功能。与所有利益相关方讨论后，他们制定了计划，以减少脚本对网站的影响，同时保留相关功能。他们移除了不必要的代码并优化了其余代码，从而显著减少了网站上的第三方 JavaScript 数量。
移除未使用的代码并优化捆绑
优化导入内容并移除未使用的 JS 和 CSS 对 Swappie 的网站性能有少许提升，但这些小改进会随着时间的推移而累积。他们还优化了捆绑设置。
在 Swappie 打造绩效文化
Swappie 取得的成果不仅源于代码的更改，还源于组织及其优先事项的变化。
工程主管 Teemu Huovinen 解释道：
您需要将网站速度与业务指标相关联，才能真正突出其重要性。当时间和资源有限时，一切都取决于优先级，这几乎是常态。优先考虑客户价值是正确之道，但如果您认为网站速度只是改善网站的“感觉”，那么很容易就会专注于新功能和更直接的转化改进。 将网站速度与业务指标相关联并不总是一件容易的事，而使用 Rel mCvR 进行计算对我们来说非常有帮助。
Teemu Huovinen
开发者团队有机会在一个季度内完全专注于网站速度，这让他们更有动力深入研究。
我们的影响力与团队的增长相结合，成就了更加令人瞩目的成效。在我们开始着手提升广告效果的当月，7 位开发者中有 4 位就开始了相关工作。所有功劳都归于团队，我们能够围绕该主题达成共识并产生如此巨大的影响，实在令人惊叹。
Teemu Huovinen
Teemu 还指出，在做出任何改进之前，花些时间根据数据制定计划、学习如何使用 DevTools 中的“性能”标签页以及设置用户分析至关重要。图表（尤其是朝着正确方向的图表）是获得反馈和验证工作成效的绝佳来源！结合查看实际环境中的 Core Web Vitals 与 Lighthouse（基于实验室）得分，有助于他们专注于优化会影响大多数用户的正确事项。