Swappie 如何通过专注于核心网页指标将移动收入提高 42%

找到网站性能与业务指标之间的相关性是推动其优化工作取得成功的关键。

Lina Hansson

Swappie 是一家成功的初创公司，销售翻新手机。几年来，他们将开发重点放在添加新的功能而非网站性能上，但后来，他们发现移动版网站上的业务结果落后于桌面版，于是开始改变。他们将工作重心放在优化性能上，移动收入很快就实现了增长。

突出显示机会

相对移动设备转化率 (Rel mCvR) 的计算方法是用移动设备转化率除以桌面设备转化率。跟踪速度指标的机会有很多，但将速度指标与业务指标相关联可能会非常棘手。由于移动设备和桌面设备都会受到相同的广告系列和季节性因素的影响，因此 Rel mCvR 指标消除了这些外部参数的影响，并且仅显示移动网站是否有改进。

美国十大电子商务网站的平均 Rel mCvR 为 50%，但 Swappie 的平均值为 24%。这表明该移动网站面临挑战，公司错失了收入，因此启动了性能改进项目。

衡量性能改进的影响

Swappie 使用 Google Analytics（分析）使用此模板电子表格设置对 Rel mCvR 和移动设备平均网页加载时间的每日跟踪。（请参阅有关如何使用电子表格的说明。） 他们还开始通过 Google Analytics（分析）和 BigQuery 跟踪核心网页指标。跟踪到位后，开发者便开始着手改善网站性能。

仅经过三个月的努力，成效显而易见 - Rel mCvR 从 24% 提高到 34%，移动收入增长了 42%！

优化

针对 LCP 和 CLS 进行优化

Swappie 的开发团队发现对于长期被忽视的小问题，有很大的改进空间。通过以不同语言使用不同视口研究该网站，研究突显了 LCP 和 CLS 方面的问题，这些问题易于解决并且对整体性能有很大影响。例如，尽可能在服务器（而不是客户端）上渲染 LCP 元素会导致 LCP 下降。

检测布局偏移是一项颇具挑战性的任务，因为它们可能会因视口和连接而有很大差异。在将核心网页指标从用户获取分析数据后，他们知道，随着 CLS 下降，他们一切正常。

图片

通过预加载、延迟加载和适当尺寸优化图片。它们会预加载主要图片（例如 LCP），而仅在需要时加载视口之外的图片。

字体

通过切换提供程序替换优化字体。这产生了巨大的影响，因为他们需要一种最佳的方式来处理不同语言所需的字体。

第三方脚本

Swappie 投入了大量精力来审核每个第三方脚本和 widget、其使用位置及其提供的功能。与所有利益相关方讨论后，他们制定了计划减少脚本对网站的影响，同时保留功能。他们移除了不必要的内容，并对其余内容进行了优化，从而显著减少了网站上的第三方 JavaScript 数量。

移除未使用的代码并优化捆绑

优化导入以及移除未使用的 JS 和 CSS 有助于小幅提升 Swappie 的网站性能，但这些细微的改进会随着时间的推移而不断累积。他们还优化了套装设置。

在 Swappie 打造性能文化

Swappie 的成果不仅源于代码的变化，还源于组织及其优先级的变化。

工程主管 Teemu Huovinen 解释说：

您需要将网站速度与业务指标联系起来，真正凸显网站速度的重要性。关键在于，当您的时间和资源不够用时，一定要确定优先级，通常都是如此。优先考虑客户价值不失为一个很好的做法，但如果您认为网站速度只是提升网站的“感受”，那就无从下手专注于新功能和更直接的转化改进。 将网站速度与业务指标联系起来并非易事，这正是使用 Rel mCvR 进行计算的益处。

Teemu Huovinen

开发者团队在一个季度内有机会完全关注网站速度后，就会更有动力进行深入研究。

将我们的影响与团队的发展相结合，让这一成就更加令人印象深刻。我们的七名开发者中有 4 人在当月内就开始了效果提升工作。这一切都要归功于这个团队，我们能够聚集在这个话题上，并产生如此巨大的影响，真是令人惊叹。

Teemu Huovinen

Teemu 还指出了在开始制定以数据为依据的计划、学习如何使用开发者工具的“性能”标签页以及在进行任何改进之前设置用户分析数据的重要性。图表（尤其是朝着正确方向的图表）是获得反馈和验证您工作成果的绝佳来源！他们查看实际应用中的 Core Web Vitals 以及 Lighthouse（基于实验室）的得分，有助他们专注于优化那些会对大多数用户产生影响的合适内容。