文档中心

应用性能监控全链路版

请输入

性能指标及计算方式

如何计算 LCP 指标

最大内容绘制 (LCP) 是测量感知加载速度的一个以用户为中心的重要指标，因为该项指标会在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点，迅捷的 LCP 有助于让用户确信页面是有效的。

指标解释

LCP (Largest Contentful Paint )

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

哪些元素在考量范围内？

根据当前最大内容绘制 API中的规定，最大内容绘制考量的元素类型为：

<img>元素

内嵌在<svg>元素内的<image>元素

<video>元素（使用封面图像）

通过url()函数（而非使用CSS 渐变）加载的带有背景图像的元素

包含文本节点或其他行内级文本元素子元素的块级元素。

何时报告最大内容绘制？

Web 页面通常是分阶段加载的，因此，页面上最大的元素可能会发生变化。例如，在一个带有文本和图像的页面上，浏览器最初可能只是呈现文本，而此时浏览器会分派一个 largest-contentful-paint entry。稍后，图像完成加载完成，会分派第二个 largest-contentful-paint entry。

平台如何消费 LCP

站点性能总览

在站点性能总览的 PID 聚合模块中，可以查看页面的整体 LCP 达标率，也可以把 LCP 最差的页面按排名展示。

在站点性能总览的指标总览模块中，可以看到整站的 LCP 情况以及趋势。

页面列表

页面列表的概览表格中，在自定义列中勾选各项体验指标后，即可从页面的角度来观察各项指标。

页面详情

从站点性能总览点击单个 pid 链接，进入页面详情后，也可以观察单个页面的 LCP 情况。

数据探索

数据探索中，在 Views 模块中可查看每次页面访问的 LCP 指标。

数据分析

在数据分析页面中，可以筛选 LCP 维度，任意结合其他指标生成图表进行消费，配置完成后可添加至看板。

监控报警

可以在监控报警模块配置 LCP 指标的报警，web.dev 给出的推荐时间是 2500ms，可以根据您站点的自身特性来适当调整。

指标获取实现细节

创建一个 PerformanceObserver ，使用 Largest Contentful Paint API 监听并上报。具体的结算时机可以参考下文的代码实现

new PerformanceObserver((entryList) => {​
    for (const entry of entryList.getEntries()) {​
        console.log('LCP candidate:', entry.startTime, entry);​
    }})​
.observe({type: 'largest-contentful-paint', buffered: true});​