largest contentful paint（LCP）是衡量用户感知加载速度的重要，以用户为中心的度量标准，因为它标记了页面主要内容可能已加载时页面加载时间线中的时间点-快速的LCP有助于使用户确信页面有用 。
从历史上看，Web开发人员衡量网页主要内容的加载速度和对用户可见的速度一直是一个挑战。
较旧的指标（例如load或DOMContentLoaded）不好，因为它们不一定与用户在屏幕上看到的相对应。 而且，以用户为中心的更新性能指标（例如First Contentful Paint（FCP））只能捕捉到加载体验的最开始。 如果页面显示启动画面或显示加载指示器，则此刻与用户无关。
过去，我们建议使用诸如“第一有意义的油漆（FMP）”和“速度指数（SI）”（均可以在Lighthouse中获得）等性能指标来帮助捕获初始油漆后的更多负载体验，但是这些指标非常复杂，难以解释 ，而且通常是错误的-表示它们仍然无法识别页面的主要内容何时加载。
有时越简单越好。 根据W3C网络性能工作组的讨论和Google的研究，我们发现，衡量何时加载页面主要内容的一种更准确的方法是查看何时呈现了最大的元素
什么是LCP？
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport.
最大内容绘画（LCP）度量标准报告视口内可见的最大图像或文本块的渲染时间。
什么是LCP分数？
为了提供良好的用户体验，网站应努力在页面开始加载的前2.5秒钟内出现“LCP”。 为了确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第75个百分位是一个很好的衡量标准。
哪些元素被考虑
根据“LCP API”中当前指定的内容，“LCP”考虑的元素类型为：
<img>元素
<svg>元素内的<image>元素
<video>元素（使用海报图像）
通过url（）函数加载背景图片的元素（与CSS渐变相反） 包含文本节点或其他内联级文本元素子级的块级元素。
注意，将元素限制在此有限范围内是有意的，以便一开始就保持简单。 随着更多研究的进行，将来可能会添加其他元素（例如<svg>，<video>）
元素的尺寸如何定义
为“LCP”报告的元素的大小通常是用户在视口中可见的大小。 如果元素延伸到视口之外，或者任何元素被裁剪或具有不可见的溢出，则这些部分不会计入元素的大小。
对于已根据其固有大小调整大小的图像元素，报告的大小为可见大小或固有大小，以较小者为准。 例如，缩小到远小于其固有尺寸的图像将仅报告其显示尺寸，而拉伸或扩展为较大尺寸的图像将仅报告其固有尺寸。
对于文本元素，仅考虑其文本节点的大小（包含所有文本节点的最小矩形）。
对于所有元素，不考虑他们的任何margin，padding，border。
什么时候采集？
网页通常是分阶段加载的，因此，页面上最大的元素可能会发生变化。
为了处理这种潜在的更改，浏览器会在绘制第一帧后立即调度一个类型为maximum-contentful-paint的PerformanceEntry，以标识最大的内容元素。 但是，在渲染后续帧之后，只要有最大内容的元素发生变化，它就会调度另一个PerformanceEntry。
例如，在具有文本和英雄图像的页面上，浏览器可能最初只是渲染文本-此时，浏览器将调度一个内容最大的绘画条目，其元素属性可能引用<p>或<h1>。 稍后，一旦英雄图像完成加载，便会分派第二个内容larget-contentful-paint条目，并且其element属性将引用<img>。
重要的是要注意，一个元素一旦呈现并对用户可见，就只能被认为是最大的内容元素。 尚未加载的图像不视为“已渲染”。 在字体阻止期间，文本节点也不使用Web字体。 在这种情况下，较小的元素可能会报告为最大的内容元素，但是较大的元素一旦完成渲染，就会通过另一个PerformanceEntry对象进行报告。
除了延迟加载图像和字体外，页面可能会在新内容可用时向DOM添加新元素。 如果这些新元素中的任何一个大于先前的最大内容元素，那么还将报告新的PerformanceEntry。
如果页面从DOM中删除了一个元素，则不再考虑该元素。 同样，如果元素的关联图像资源发生更改（例如，通过JavaScript更改img.src），则该元素将停止考虑，直到加载新图像为止。
一旦用户与页面进行交互（通过轻击，滚动或按键），浏览器将停止报告新条目，因为用户交互通常会更改用户可见的内容（滚动时尤为如此）。
出于分析目的，您应该仅向您的分析服务报告最近调度的PerformanceEntry。
Load time vs. render time
出于安全原因，对于缺少Timing-Allow-Origin标头的跨域图像，不会公开图像的渲染时间戳。 而是只公开其加载时间（因为已经通过许多其他Web API公开了加载时间）。
下面的用法示例显示了如何处理渲染时间不可用的元素。 但是，在可能的情况下，始终建议您设置Timing-Allow-Origin标头，这样您的指标将更加准确
