最大内容绘制 (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});

浏览器兼容性说明

指标要求浏览器支持 Largest Contentful Paint API 和 PerformanceObserver，在不兼容的情况下，上报的指标中 isSupport 为false。

如何优化LCP指标

LCP 主要受四个因素影响：

• 缓慢的服务器响应速度

• JavaScript 和 CSS 渲染阻塞

• 资源加载时间

• 客户端渲染

如需深入了解如何改进 LCP，请参阅优化 LCP。有关其他能够改进 LCP 的单个性能技巧的进一步指导，请参阅：

• 使用 PRPL 模式做到即时加载

• 优化关键渲染路径

• 优化CSS

  • 优化：推迟非关键 CSS

  • 优化：缩小CSS

  • Extract critical CSS

  • Optimize CSS background images with media queries

• 优化图像

  • Choose the right image format

  • Choose the correct level of compression

  • Use Imagemin to compress images

  • Replace animated GIFs with video for faster page loads

  • Serve responsive images

  • Serve images with correct dimensions

  • Use WebP images

  • Use image CDNs to optimize images

• 优化网页字体

  • 优化：确保文本在网页字体加载期间保持可见

  • Avoid invisible text during font loading

  • Optimize WebFont loading and rendering

  • Reduce WebFont Size

• 优化JavaScript（针对客户端渲染的网站）

  • 优化：使用 PRPL 模式做到即时加载

  • 缩小 JavaScript 体积

  • 优化：减少 JavaScript 执行时间

  • Reduce JavaScript payloads with code splitting

  • 优化：移除未使用的代码

  • Minify and compress network payloads

  • Serve modern code to modern browsers for faster page loads

  • Publish, ship, and install modern JavaScript for faster applications

  • How CommonJS is making your bundles larger

其他资源

安妮·沙利文 (Annie Sullivan)在performance.now()上发表的演讲：《从 Chrome 的性能监测工具中吸取的教训》(2019)