Google提出的Largest Contentful Paint (LCP)是什么？

Largest Contentful Paint (LCP)是Google提出的新时期网站排序的重要指标，目前官方没有给出中文含义，这里我翻译为“最大内容呈现（LCP）”吧，是以用户为中心的度量标准，因为它标记了页面主要内容可能已呈现时页面呈现时间线中的时间点-快速的LCP有助于使用户确信页面有用。

从历史上看，Web开发人员衡量网页主要内容的呈现速度和对用户可见的速度一直是一个挑战。

较旧的指标（例如load或DOMContentLoaded）不好，因为它们不一定与用户在屏幕上看到的相对应。而且，以用户为中心的更新性能指标（例如First Contentful Paint（FCP））只能捕捉到呈现体验的最开始。如果页面显示启动画面或显示呈现指示器，则此刻与用户无关。

过去，我们建议使用诸如“首次有意义的呈现（FMP）”和“速度指数（SI）”（均可以在Lighthouse中获得）这样的性能指标来帮助捕获最初的呈现后的更多呈现体验，但是这些指标非常复杂，难以解释，而且通常是错误的-表示它们仍然无法识别页面的主要内容何时呈现。

有时越简单越好。根据W3C Web性能工作组的讨论和Google的研究，我们发现，衡量何时呈现页面主要内容的一种更准确的方法是查看何时呈现最大的元素。

1、什么是LCP？

最大内容呈现（LCP）度量标准报告视口内可见的最大图像或文本块的呈现时间。

2、好的LCP分数是多少？

为了提供良好的用户体验，网站应努力在开始呈现页面的前2.5秒内进行“最大内容呈现”。为了确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面呈现量的第75个百分位是一个很好的衡量标准。

3、考虑哪些要素？

根据“最大内容丰富的呈现API”中当前指定的内容，“最大内容丰富的呈现”考虑的元素类型为：

• <img>元素
• <image>元素内的<svg>元素
• <video>元素（使用海报图像）
• 具有通过url()功能呈现的背景图片的元素（与CSS渐变相反）
• 包含文本节点或其他内联级文本元素子级的块级元素。

注意，将元素限制在此有限范围内是有意的，以便一开始就保持简单。附加元件（例如<svg>，<video>）可以在将来添加更多的研究进行的。

4、如何确定元素的大小？

为“最大内容呈现”报告的元素的大小通常是用户在视口中可见的大小。如果元素延伸到视口之外，或者任何元素被裁剪或具有不可见的溢出，则这些部分不会计入元素的大小。

对于已根据其固有尺寸调整大小的图像元素，报告的尺寸为可见尺寸或固有尺寸，以较小者为准。例如，缩小到远小于其固有尺寸的图像将仅报告其显示尺寸，而拉伸或扩展为较大尺寸的图像将仅报告其固有尺寸。

对于文本元素，仅考虑其文本节点的大小（包含所有文本节点的最小矩形）。

对于所有元素，不考虑通过CSS应用的任何边距，填充或边框。

确定哪个文本节点属于哪个元素有时可能很棘手，尤其是对于其子元素包括嵌入式元素和纯文本节点以及块级元素的元素而言。关键是每个文本节点都属于（并且仅属于）其最接近的块级祖先元素。用规范术语来说：每个文本节点都属于生成其包含块的元素。

5、何时报告最大的满意呈现？

网页通常是分阶段呈现的，因此，页面上最大的元素可能会发生变化。

为了处理这种潜在的变化，浏览器在绘制第一帧时会立即派出一个PerformanceEntry类型，largest-contentful-paint该类型标识最大的内容元素。但随后，在呈现后续帧之后，它将PerformanceEntry在最大内容单元发生更改时再次调度另一个帧。

重要的是要注意，一个元素一旦呈现并对用户可见，就只能被认为是最大的内容元素。尚未呈现的图像不被视为“已呈现”。在字体块期间，文本节点也不使用Web字体。在这种情况下，较小的元素可能会报告为最大的内容元素，但是较大的元素一旦完成呈现，就会通过另一个PerformanceEntry对象进行报告。

除了延迟呈现图像和字体外，页面可能会在新内容可用时向DOM添加新元素。如果这些新元素中的任何一个大于先前最大的有争议元素，那么PerformanceEntry还将报告一个新元素。

如果页面从DOM中删除了一个元素，则不再考虑该元素。同样，如果元素的关联图像资源发生更改（例如，img.src通过JavaScript进行更改），则该元素将停止考虑，直到呈现新图像为止。

将来，从DOM中删除的元素仍可以视为LCP候选对象。目前正在进行研究以评估此更改的影响。您可以按照指标CHANGELOG保持最新。

一旦用户与页面进行交互（通过轻击，滚动或按键），浏览器将停止报告新条目，因为用户交互通常会更改用户可见的内容（滚动时尤为如此）。

出于分析目的，您只应报告最近分PerformanceEntry发给您的分析服务的信息。

注意：由于用户可以在背景标签中打开页面，因此，只有当用户将标签聚焦后，最大的内容呈现才会出现，这可能比他们第一次呈现时要晚得多。

6、如何处理元素布局和大小更改？

为了使计算和分配新性能条目的性能开销保持较低，对元素大小或位置的更改不会生成新的LCP候选对象。仅考虑元素的初始大小和在视口中的位置。

这意味着可能不会报告最初在屏幕外呈现然后在屏幕上过渡的图像。这也意味着最初在视口中呈现的元素随后被下推，但视线外仍然会报告其初始的视口大小。

但是，（如上所述）如果某个元素已从DOM中删除或与其关联的图像资源发生了更改，则该元素将从考虑中删除。

7、如何改善LCP

LCP主要受以下四个因素影响：

• 服务器响应时间慢
• 呈现阻止的JavaScript和CSS
• 资源呈现时间
• 客户端呈现