Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)

最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。以下是开始测量、调试和优化 LCP 所需了解的一切。

什么导致 LCP 速度变慢？

可能会影响最大内容绘制时间的常见问题：

• 浏览器无法在初始 HTML 文档中发现 LCP 资源，例如，如果 LCP 元素是通过 JavaScript 动态添加到页面的。

• 在页面渲染路径开始处加载的缓慢或阻塞的脚本和样式表可能会延迟图像开始渲染的时间。

• 未优化的图片 ，加载时间过长。LCP 包括图片完成渲染所需的全部时间。如果您的图片在 1 秒时开始渲染，但需要 4 秒才能完全渲染，那么您的 LCP 时间就是 5 秒。

如何调查 LCP 问题

为了缩短 LCP 时间，您需要首先了解页面的关键渲染路径，然后确定导致最大绘制元素延迟的问题。综合监控可以帮助确定上述哪些问题是罪魁祸首。

例如， 亚马逊主页的综合测试结果显示 LCP 时间为 3.63 秒，换句话说，超出了 Google 的 2.5 秒阈值。您还可以看到 LCP 资源实际上是图像集合ÿ