最大内容渲染（LCP）是一项稳定且重要的Core Web Vitals指标，用于衡量用户感知的加载速度，因为它表示网页加载过程中文本或图片等主要内容可能已经加载完成的时间点。较短的LCP时间能够增强用户对网页有效性的信心。
什么是LCP
LCP（Largest Contentful Paint）指的是可见视口中最大图片、文本块或视频的渲染时间（相对于用户首次导航至网页的时间）。
注意：LCP包含前一页面的所有卸载时间、连接设置时间、重定向时间以及首字节时间（TTFB）。在实际测量过程中，这可能导致测量结果与理论预期结果之间存在差异。
哪些元素会被考虑？
根据Largest Contentful Paint API当前所定义的标准，需考虑最大内容渲染时间的元素类型包括：
<img>元素（第一帧呈现时间适用于GIF或动画PNG等动画内容）<svg>元素中的<image>元素<video>元素（使用海报图片加载时间或视频的第一帧呈现时间，以时间较短者为准）包含文本节点或其他内嵌级文本元素子元素的块级元素。
对于这些被考虑的元素，LCP测量值应排除用户可能视为“无内容”的某些元素。对于基于Chromium的浏览器，这些元素包括：
不透明度为0且对用户不可见的元素
覆盖整个视口的元素，可能被视为背景而非内容
占位图片或其他熵值较低的图片，可能无法反映网页的真实内容
LCP得分参考值
为了提供良好的用户体验，网站应尽量将LCP值控制在2.5秒或更短的时间内。具体而言，LCP值小于2.5秒被视为优秀，而大于4.0秒则被认为是糟糕的表现。为有效评估大多数用户是否能够达到该目标，一个合适的衡量阈值是网页加载时间的第75个百分位数。
如何获取LCP
在JavaScript中，我们使用Largest Contentful Paint API来获取LCP。以下示例展示了如何创建一个 PerformanceObserver，用于监听largest-contentful-paint条目并将其记录到控制台。
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});在上述示例中，每个记录的largest-contentful-paint条目都代表当前的LCP候选项。一般来言，最后发出的条目的startTime值即为LCP值，但也存在例外情况，并非所有largest-contentful-paint条目都适用于衡量LCP。 指标与API之间的差异列出了API上报的内容与指标计算方式之间的差异。这些情况均已在插件实现中充分考虑。
注意：在某些情况下（例如跨源iframe），无法在JavaScript中获取LCP。如需了解详情，请参阅web-vitals库的限制部分。
何时上报LCP？
网页通常会分阶段加载，因此，网页上最大的元素可能会随之变化。浏览器在绘制过程中会不断更新Largest Contentful Element。一旦用户与网页进行互动（例如点击、滚动、按键操作或更改页面可见性），浏览器将停止记录新条目，并将当前的最大内容元素上报为LCP。这是因为用户互动通常会改变用户可见的内容。
注意：由于用户可以在后台标签页中打开网页，因此在用户将焦点移至该标签页之前，浏览器可能不会记录largest-contentful-paint条目，而该时间点可能显著晚于用户首次加载该标签页的时间。如果网页是在后台加载的，则LCP指标将不会被报告，因为它无法真实反映用户感知的加载时间。