LCP 衡量什么，如何优化？

LCP Values

概念：最大内容绘制（Largest Contentful Paint）指的是加载页面最大视觉部分所需的时间。这个时间对应的是最大资源或文本块呈现在用户可见视口区域时的时间点。最大资源一般是指图片资源，如果可视区内没有图片，LCP 记录的就是最后一次显示内容的区域，比如文本块区域。也就是“准备好”给用户使用
特点：
- LCP 指标记录的时间一定是在 FCP 的衡量与优化时刻或之后
- LCP 标记的 DOM 元素可能是文本或图片
- LCP 元素内容必须在视口可见。如果在加载过程中被移出视口，或者尺寸大小超出视口，就不符合 LCP 标记条件了。
- LCP 标记的是视口内最大的内容块，即使最后加载完成的是图片，如果图片尺寸小于文本块，那么 LCP 标记的仍然是文本块。
LCP 元素类型：
- 图片元素。<img> 是 LCP 中最常见的元素，也最常影响范围最大的元素。另外还包括 SVG 中的 <image> 元素。
- <video> 视频元素。浏览器会根据 <video> 元素定义的 poster 属性值或第一帧视频画面作为最大内容。
- 使用 CSS 的 url() 函数的图片背景样式元素。
- 包含文本节点的块级元素。

如何优化：

使用 <link> 元素把一些长图，大图预加载

LCP 标记的是视口内最大的内容块，即使最后加载完成的是图片，如果图片尺寸小于文本块，那么 LCP 标记的仍然是文本块。

Excalidraw Data

Text Elements

LCP

LCP｜视口内最大内容呈现

最大可见内容

≤ 2.5s

2.5–4.0s

4.0s