Rakuten 24 如何投资于核心网页指标，将每位访问者带来的收入提高了 53.37%，将转化率提高了 33.13%

通过衡量真实用户的网页指标，Rakuten 24 还发现，良好的 Largest Contentful Paint (LCP) 可以使转化率提高 61.13%。

Hayoung Lee

Linh Duong

Ryunosuke Akiba

Shogo Kashiwase

Rakuten 24 是一家与跨国和国内消费品制造商合作的网店，销售各式各样的日常必需品，包括医疗保健、饮料、宠物用品和婴儿用品等。这家商店由互联网服务全球领导者 Rakuten Group, Inc. 提供，是日本数字市场平台表现出色的前几名。

了解网页性能对用户体验的影响，Rakuten 24 团队一直在不断衡量、优化和监控 Core Web Vitals 指标及其他指标。

因此，超过 75% 的用户能够体验良好的 Largest Contentful Paint (LCP)、First Input Delay (FID) 和 First Contentful Paint (FCP) 体验。不过，他们仍在努力改进 Cumulative Layout Shift (CLS)。

在分析首页数据后，Rakuten 24 发现良好的 LCP 得分可以带来以下成效：

转化率增幅高达 61.13%。
每位访问者带来的收入增加了 26.09%。
平均订单价值为 11.26%。
良好的 FID 得分可以使转化率提高高达 55.88%。

为了进一步将核心网页指标与业务指标相关联，Rakuten 24 还运行了一项专注于优化核心网页指标和相关指标的 A/B 测试，结果发现：

每位访问者带来的收入增加了 53.37%。
转化率提高了 33.13%。
平均订单价值为 15.20%。
用户平均使用时间达到 9.99%。
退出率降低了 35.12%。

突出显示优化建议

虽然优化网页性能是改善用户体验和促进业务增长的一项明智投资，但 Rakuten 24 团队深知说服利益相关者采用核心网页指标并专注于网页性能有多么困难。他们认为，要让利益相关方确切了解投资回报率 (ROI) 效果优化可以带来什么样的价值，是让他们参与进来的最佳方式。

作为一家相对较新的独立服务，Rakuten 24 利用灵活性的优势来接受挑战。他们认为，案例研究的成果有助于他们将来做出更多以数据为导向的决策，并帮助其他开发者衡量其工作的影响，并说服他们的利益相关者，提高性能是值得投入的。阅读这篇博文，了解他们是如何做到的。

Rakuten 24 首页的屏幕截图示例，每张屏幕截图周围都有移动设备的边框。 — Rakuten 24 首页的一些示例屏幕截图。

优化 JavaScript 和资源

移除阻塞渲染的资源。
拆分代码并使用动态 import()。
将所有内容拆分为多个单独的部分，并延迟加载非首屏 HTML 文件。
按需执行和加载 JavaScript。
通过在 <script> 标记上使用异步属性并尽早与重要来源（dns-prefetch、preconnect 和 preload 等资源提示）建立连接，找出速度缓慢的 JavaScript 资源并优化加载过程。
移除未使用的代码，并缩减并压缩代码。
使用 CDN。
使用 Service Worker 控制缓存和 Workbox。

优化图像

延迟加载非首屏图片。
使用 CDN 优化图片，提供适当大小的图片、压缩图片以及为作业采用合适的图片格式（WebP、SVG、网页字体）。

优化 CLS

在图片加载期间，使用 CSS aspect-ratio 为图片预留所需的空间。
使用 CSS min-height，在元素延迟加载时尽可能减少布局偏移。

性能衡量

除了使用 PageSpeed Insights 审核网站，该团队还希望找到更好的方式来了解用户在现场实际遇到的情况。因此，Rakuten 24 决定使用 web-vitals JavaScript 库来衡量实际应用中的核心网页指标和其他指标，并将数据发送给内部分析工具。

Rakuten 24 的网页指标跟踪集成流程。第一步是通过将脚本添加到 Rakuten 24 网站来集成 web-vitals 库。之后，即可根据真实用户指标衡量网页指标，并将相关数据发送至 Rakuten 24 的内部数据收集工具。

效果分析

该团队分析了收集的实测数据，以确定核心网页指标与关键业务指标之间是否存在任何关联。他们发现，与未转化用户相比，完成转化的用户往往能体验到更好的 LCP。

通过 LCP 转化的用户与未转化用户的对比情况。转化更频繁的用户组的 LCP 较低。

收集到的数据还表明：

良好的 LCP 可以使转化率提高高达 61.13%、每位访问者带来的收入提高 26.09% 以及平均订单价值提高 11.26%。
与总体平均数据相比，良好的 FID 可以使转化率提高高达 55.88%。

按转化率和 LCP 时间划分的 LCP 范围。LCP 较低时转化频率较高的用户，61.13% 的用户在 LCP 不超过 1 秒的情况下完成转化。 — LCP 对转化率的影响。

LCP 划分为每位访问者带来的收入以及 LCP 时间。LCP 较低的用户带来的收入更多，当 LCP 不超过 1 秒时，每位用户带来的收入增加了 26.09%。 — LCP 对每位访问者带来的收入的影响。

按平均订单价值和 LCP 时间分桶的 LCP。LCP 较低用户在 LCP 为 1 秒或更短时，平均订单价值会提高 11.26%。 — LCP 对平均订单价值的影响。

按转化率和 FID 时间划分的 FID。FID 较低时转化频率较高的用户，55.88% 的用户在 FID 不超过 50 毫秒时转化。 — FID 对转化率的影响。

性能监控

该团队使用在现场收集的数据和商业智能工具构建了一个性能监控信息中心。这对于监控进度和防止回归非常重要。

A/B 测试

该团队认为 A/B 测试是衡量性能优化对业务影响的好方法，因此针对核心网页指标优化了一个着陆页，然后通过为期一个月的 A/B 测试将优化后的版本与原始网页进行了比较。他们选择了一个带来大量流量和转化的着陆页，以便测试能够取得有意义的结果。在测试期间，50% 的流量定向到经过优化的着陆页（版本 A），50% 的流量定向到原始网页（版本 B）。版本 A 和版本 B 的唯一区别是版本 A 针对 Core Web Vitals 进行了优化，并且没有其他功能或外观差异。

在移动加载测试中，优化版本 A 的加载时间提前了 0.4 秒，且没有明显的布局偏移。事实上，版本 A 的 CLS 与版本 B 相比提高了 92.72%。其他网页指标的得分也有所提高：FID 提高了 7.95%，FCP 提高了 8.45%，TTFB 提高了 18.03%。

Rakuten 24 首页的初创公司对比情况。版本 A 已经过优化，可在 1.6 秒内完成加载，而版本 B 可在 2 秒内完成加载。 — 版本 A 和版本 B 的移动设备负载测试结果。

通过比较优化后的版本 A 和未优化的版本 B，Rakuten 24 发现版本 A 带来了以下变化：

每位访问者带来的收入增加了 53.37%。
转化率提高了 33.13%。
平均订单价值增加了 15.20%。
平均使用时间增加了 9.99%。
退出率降低了 35.12%。

针对 Rakuten 24 首页的核心网页指标改进的屏幕截图。统计数据显示，每个访问者带来的收入增加了 53.37%，转化率提高了 33.13%，平均订单价值提高了 15.2%，平均页面停留时间增加了 9.99%，退出率降低了 35.12%。

总结

网站性能优化颇具挑战，但回报颇丰。通过采用数据驱动的方法，Rakuten 24 成功地提供了更好的用户体验，并衡量了对其业务的积极影响。他们明白这只是客户购买历程的一部分，而非目的地，他们将继续改进自己的网站，为在线买家提供更愉悦的体验。

优化需要共同努力，开发者在这一旅程中不必孤军奋战。通过分享他们遇到的困难和成就，Rakuten 24 希望更多开发者能够利用 Core Web Vitals 数据，与利益相关方达成共识，然后携手合作，以实现高质量的用户体验和业务增长。