通过使用真实用户监控工具，并在重构应用时专注于改进 Core Web Vitals，他们还将 CLS 提高了 72%，并提升了应用响应能力。
Kayce Basques
Agrofy 是拉丁美洲农业综合企业市场的在线购物平台。他们为农机、土地、设备和金融服务的买家和卖家牵线搭桥。2020 年第 3 季度，Agrofy 的 4 人开发团队花了一个月的时间优化了他们的网站，因为他们假设提高网站性能有助于降低跳出率。他们专注于改进 LCP，这是核心 Web 指标之一。这些性能优化使 LCP 提升了 70%，这与加载弃用率降低了 76%（从 3.8% 降至 0.9%）相关联。
70%
LCP 更低
76%
降低加载放弃率
问题
在研究业务指标时，Agrofy 的开发团队发现，其跳出率似乎高于行业基准。网站代码库中的技术债务也在增加。
解决方案
Agrofy 团队向高管推介了以下计划，并获得了他们的支持：
- 从旧版已废弃的框架迁移到新版受积极支持的框架。
- 优化新代码库的加载性能。
迁移过程花了 2 个月的时间。除了前面提到的 4 人开发团队外，此次迁移还涉及产品和用户体验专家以及一名软件架构师。优化项目耗时 1 个月，由 4 人组成的开发团队完成。他们重点关注了 LCP、CLS（另一个 Core Web Vitals 指标）和 FCP。具体优化包括：
- 使用 Intersection Observer API 延迟加载所有不可见元素。
- 使用内容传送网络更快地分发静态资源。
- 使用
loading="lazy"延迟加载图片。 - 关键渲染路径内容的服务器端渲染。
- 预加载和预连接关键资源，以最大限度地缩短握手时间。
- 使用实时用户监控 (RUM) 工具来确定哪些商品详情页面出现大量布局偏移，然后调整代码库的架构。
如需了解更多技术细节，请参阅 Agrofy 工程博文。
在 20% 的流量上启用新代码库后，他们于 2020 年 9 月初面向所有访问者发布了新网站。
结果
开发团队的优化工作在许多不同指标方面带来了可衡量的改进：
- LCP 提高了 70%。
- CLS 提高了 72%。
- 阻止 JS 请求可将其减少 100%，阻止 CSS 请求可将其减少 80%。
- 长任务减少了 72%。
- 首次 CPU 闲置时间缩短了 25%。
在同一时间段内，实时用户监控数据（也称为实测数据）显示，产品详情页面的加载放弃率从 3.8% 下降到了 0.9%，下降了 76%：
