该团队分析了其着陆页 1,000 万次访问的数据，发现 Largest Contentful Paint 和转化率之间存在很强的相关性。
雷诺集团是法国跨国汽车制造商，业务遍及 130 多个国家/地区。对于雷诺这样的汽车集团来说，性能出色的品牌网站能够提升用户互动度和转化次数，意味着可带来更多业务。该公司的所有品牌网站都致力于大规模提供最佳用户体验，同时针对本地化网站保持灵活性，以提供内容和功能。在这种情况下，效果监控是客户体验团队（负责开发和维护该全球平台的）关键职责。
衡量核心网页指标对业务的影响
Google Analytics（分析）中的衡量功能
雷诺与全球数据合作伙伴 fifty-five 合作，建立了 web-vitals 库。借助该库，可将真实用户的所有网页指标指标发送到 Google Analytics（分析），具体方式与 Chrome 衡量这些指标以及报告给其他 Google 工具的方式完全一致。
以下分析展示了在 2020 年 12 月至 2021 年 3 月期间四个月内使用这些工具获取的数据集。
经过优化的 LCP 与用户互动度和业务指标密切相关
相关团队发现，低 Largest Contentful Paint (LCP) 与理想的跳出率和转化率之间存在特别强的关联，如下面的图表所示。
该数据集捕获了 4 个月内 33 个国家/地区的超过 1,000 万次访问，并展示了较低的 LCP 衡量结果与以下各项之间的关系：
- 跳出率降幅
- 转化次数增幅（潜在客户表单已完成）
有趣的是，当网站以单页应用 (SPA) 的形式运行时，所有这些措施都仅在着陆页上捕获。数据显示，在 LCP 控制在 1 秒以下之前，优化网站是值得的。这个集团的品牌网站永远无法过于优化！
此数据集不仅显示了 LCP 与业务指标之间的负相关关系，还突出显示了效果最佳的着陆页之间的效果差异。在此网站中，使 LCP 低于 1 秒有助于大幅增加转化次数，减少跳出次数。
Eja Rakotoarimanana，fifty-5ive 顾问
LCP 每提高 1 秒，跳出率就会降低 14 个百分点 (ppt)，转化率可提高 13%。
| LCP 改进 1 秒 | 结果 |
|---|---|
| LCP 约为 1 秒 | 转化率 (CVR) 提高 13% |
| LCP 低于 1.6 秒 | 跳出率降低了 14% |
| LCP 高于 1.6 秒 | 跳出率降低了 5% |
雷诺大规模优化核心网页指标的方法
自 2020 年初以来，在该品牌排名前 5 的欧洲市场，雷诺域名的 LCP 较快（低于 2.5 秒）的访问者数量平均增长了 22%（从 51% 降至 73%）。
下面介绍了他们是如何做到的。
集中优化 SPA
多年来，从平台角度来看，性能一直是我们优先考虑的问题，并且将核心网页指标纳入关键指标的过程很顺利。核心团队制定了全面的监控解决方案（借助 Google Lighthouse 和 Chrome UX Report API），并在整个组织中建立了性能文化。优化其单页应用的策略有多种，包括：
- 服务器端渲染 (SSR)，可确保快速进行首次内容绘制 (FCP)。
- 代码拆分，以便仅提供着陆页所需的 JS 和 CSS 数据块（以便获得更好的 LCP 和 FID）。
- 具有高级资源缓存的 CDN（包括用于排序和移除不必要的查询参数的 Lambda@Edge）。这有助于避免 SSR 的缺点（服务器计算导致 TTFB 速度变慢），并将内容分发到更靠近最终用户的位置（以获得更好的 TTFB 和 LCP）。
- 使用 brotli 优化压缩以缩减代码大小。
- HTTP2：用于实现请求和响应的多路复用。
- 使用具有 WebP 支持以及
srcset和sizes属性的自适应图片，向用户提供最合适的图片尺寸和格式。 - 使用
IntersectionObserver和 FPO（1 KB 小缩略图）延迟加载图片、视频和 iframe。 - 移除阻塞脚本并调整针对浏览器目标的转译，以缩减 JS 文件大小（避免不必要的 polyfill）。
- 缩减 Google 跟踪代码管理器容器的大小，从而仅在需要时加载第三方脚本。
- 减少自定义字体的数量，将 woff/woff2 格式与 unicode-range 搭配使用，以及
font-display:swap以缩减字体文件大小并尽快显示文本，即使自定义字体尚不可用也是如此。 - 预加载主打图片（通常是 LCP 元素）。
该团队仍在致力于未来的改进，例如：
- 服务器推送：可通过更快地提供 CSS 来改进 FCP。（由于缺少 AWS 支持和弃用方案而处于待机状态）。
- 渐进式水合，以提高 FID。
- ES6 模块支持：为现代浏览器使用 ES6 build 来提供更快的体验。
SPA 方法对性能有益，因为当用户跨页面导航时，无需重新加载整个页面。也就是说，由于未衡量路由转换，当前使用 SPA 的核心网页指标衡量方法存在缺点；因此，由于界面缓存的原因，会话内相对较快的网页加载速度不会考虑在内。这也使得核心网页指标很难与多页应用竞争对手的网站进行比较。在多页应用网站上，温缓存会降低用户在会话期间浏览的每个网页上的衡量指标。如需了解详情，请参阅网页指标 SPA 常见问题解答。
这些都是已知限制，Chrome 产品团队正在研究这些限制。我们已经发布 CLS 指标更新，以改进 SPA 的衡量效果。
性能需要持续监控，因为不同的技术团队可能会影响它。尽管在 SPA 上衡量此类指标的方式存在局限性，但核心网页指标允许我们跟踪团队所执行操作的影响。我们希望能尽快将路线改换纳入考量！
Cedric Bazureau，雷诺技术主管
推动效果优化的当地法律，员工将共同承担责任
绩效既作为全局（核心）责任，也作为本地责任传达。各团队汇总了本地内容所有者应当遵循的一系列最佳做法。以下是这些指南中的几个示例：
- 优化本地 Google 跟踪代码管理器容器，以提升网站性能。例如，有条件地触发某些代码。
- 通过使用内部工具压缩视频内容或将其托管在外部平台（例如 YouTube）上，限制视频内容的大小。
- 避免通过 Google 跟踪代码管理器上传照片。
深入了解我们的数字营销效果，是确保持续优化品牌网站的关键。我们的客户体验团队的做法是，提供一个全球性平台，对当地团队的业务成果产生积极影响，同时为这些团队提供指南和最佳做法，帮助他们保持高水平的绩效。
Alexandre Perruche，雷诺性能主管
总而言之，网站性能一直是雷诺的重中之重，而且其网站平台也在不断优化。通过衡量核心网页指标和业务指标，他们能够将这一主题作为全球共同的责任进行推广，而当地准则使团队能够参与这项有益的努力。