通过衡量真实用户的网页指标，Rakuten 24 还发现，良好的 Largest Contentful Paint (LCP) 可以使转化率提高 61.13%。
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 利用灵活性的优势来接受挑战。他们认为，案例研究的成果有助于他们将来做出更多以数据为导向的决策，并帮助其他开发者衡量其工作的影响，并说服他们的利益相关者，提高性能是值得投入的。阅读这篇博文，了解他们是如何做到的。
优化 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 库来衡量实际应用中的核心网页指标和其他指标，并将数据发送给内部分析工具。
效果分析
该团队分析了收集的实测数据，以确定核心网页指标与关键业务指标之间是否存在任何关联。他们发现，与未转化用户相比，完成转化的用户往往能体验到更好的 LCP。
收集到的数据还表明：
- 良好的 LCP 可以使转化率提高高达 61.13%、每位访问者带来的收入提高 26.09% 以及平均订单价值提高 11.26%。
- 与总体平均数据相比，良好的 FID 可以使转化率提高高达 55.88%。
性能监控
该团队使用在现场收集的数据和商业智能工具构建了一个性能监控信息中心。这对于监控进度和防止回归非常重要。
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%。
通过比较优化后的版本 A 和未优化的版本 B，Rakuten 24 发现版本 A 带来了以下变化：
- 每位访问者带来的收入增加了 53.37%。
- 转化率提高了 33.13%。
- 平均订单价值增加了 15.20%。
- 平均使用时间增加了 9.99%。
- 退出率降低了 35.12%。
总结
网站性能优化颇具挑战，但回报颇丰。通过采用数据驱动的方法，Rakuten 24 成功地提供了更好的用户体验，并衡量了对其业务的积极影响。他们明白这只是客户购买历程的一部分，而非目的地，他们将继续改进自己的网站，为在线买家提供更愉悦的体验。
优化需要共同努力，开发者在这一旅程中不必孤军奋战。通过分享他们遇到的困难和成就，Rakuten 24 希望更多开发者能够利用 Core Web Vitals 数据，与利益相关方达成共识，然后携手合作，以实现高质量的用户体验和业务增长。