Agrofy：LCP 提升 70%，加载放弃率降低 76%

使用内容集保持井井有条 根据您的偏好保存内容并对其进行分类。

通过使用真实用户监控工具并专注于在重构应用时改进 Core Web Vitals，他们还将 CLS 提高了 72%，并提高了应用程序的响应速度。

Kayce Basques

Agrofy 是拉丁美洲农业综合市场的在线市场。他们为农机、土地、设备和金融服务的买家和卖家牵线搭桥。在 2020 年第三季度，Agrofy 的一个 4 人开发团队花了一个月的时间优化他们的网站，因为他们假设性能的提升将降低跳出率。他们特别专注于改进 LCP，这是 Core Web Vitals 之一。这些性能优化使 LCP 提升了 70%，这与加载放弃率降低 76%（从 3.8% 降至 0.9%）相关。

问题

在研究其业务指标时，Agrofy 的一个开发团队注意到他们的跳出率似乎高于行业基准。网站代码库中的技术债务也在增加。

解决方案

Agrofy 团队向其高管进行了推介，并获得了对以下事项的支持：

• 从较旧的、已弃用的框架迁移到较新的、积极维护的框架。
• 优化新代码库的加载性能。

迁移耗时 2 个月。除了前面提到的 4 人开发团队外，此次迁移还涉及产品和用户体验专家以及一名软件架构师。优化项目耗时 4 人开发团队 1 个月。他们专注于 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%。

在同一时间段内，真实用户监控数据（也称为 现场数据）显示，产品详情页面的加载放弃率下降了 76%，从 3.8% 降至 0.9%。