性能指标的坑-LCP到底是那个时间

LCP（Largest Contentful Paint，最大内容绘制）是衡量网页前端性能的重要指标之一，它属于Core Web Vitals中的一个关键指标，用于评估用户加载页面时的体验感受。

LCP的定义

LCP指的是页面视口内最大的内容元素（通常是图片、视频或块级文本）的渲染完成时间，从用户发起加载页面到该元素完全显示在屏幕上的时间。

几点关键点

  1. “最大内容元素”是什么？
    最大内容元素是指占据视口内最大面积的内容块，例如：
    ○ 一张图片（<img>、背景图等）
    ○ 一个视频帧
    ○ 一个块级的文字段落（<p>、<h1>等）
    浏览器会根据面积大小动态决定哪个元素是“最大”。

  2. LCP测量的范围是什么？
    LCP不关心整个页面，而仅限于首次视口的内容，用户滚动后加载的内容不计入。

  3. LCP的本质是哪个时间点？
    是最大内容元素在屏幕上完成绘制的时间点，而不是绘制多个屏或所有内容的时间。