专业术语 · 概念
Largest Contentful Paint（LCP）：最大内容绘制的候选元素与阈值
依据 web.dev 解释 LCP 衡量的是视口内最大图片、视频或文本块的渲染时间，列出候选元素类型、被排除的情形、2.5 秒与 4.0 秒阈值、四个子部分，并说明首屏大图与滚动显现的影响。
- 缩写
- LCP
- 领域
- web-performance
LCP 是 Largest Contentful Paint 的缩写。web.dev 把它定义为，相对于用户开始导航到页面的时间，视口内最大的图片、文本块或视频的渲染时间。它是“主要内容大概什么时候出现”的代理指标，并不表示整页加载完成。
哪些元素会成为候选
web.dev 列出的候选类型：<img>、SVG 内的 <image>、<video>、通过 url() 加载的背景图，以及含文本节点或行内文本子元素的块级元素。页面同时列出按启发式被排除的情形：
- 不透明度为 0、用户看不到的元素；
- 覆盖整个视口、更像背景而非内容的元素；
- 占位图或信息熵很低的图片。
LCP 的时间包含上一页面的卸载时间、连接建立、重定向及其他 TTFB 延迟，因此服务器与网络同样影响它。
阈值
web.dev 的目标值：LCP 在 2.5 秒或以内为 good，超过 4.0 秒为 poor；衡量标准是页面加载的第 75 百分位，分别按移动与桌面设备统计。本次未读到两者之间区间的命名文字，本文不代为命名。
四个子部分
Optimize LCP 页把 LCP 拆成四段，并给出各段占总时间的目标比例：
| 子部分 | 含义 | 目标比例 |
|---|---|---|
| TTFB | 从开始加载到收到 HTML 首字节 | 约 40% |
| Resource load delay | TTFB 之后到浏览器开始加载 LCP 资源之间的等待，无资源时为零 | 小于 10% |
| Resource load duration | LCP 资源本身的加载时长 | 约 40% |
| Element render delay | 资源完成后到元素完整渲染 | 小于 10% |
该页强调，LCP 时间的绝大部分应花在加载 HTML 与 LCP 资源上。优化建议包括给很可能是 LCP 的图片设置 fetchpriority="high"；不要对 LCP 图片做懒加载，否则总会带来不必要的资源加载延迟；保证 LCP 资源能在初始 HTML 中被预加载扫描器发现，而不是藏在外部 CSS 或 JavaScript 里；减少 <head> 中会阻塞渲染的样式与同步脚本。
与展现形式的关系
首屏的 Hero 与 Banner 通常含最大图片或最大文本块，因而常成为 LCP 候选；具体是哪个元素要以实测为准。Scroll Reveal 让元素以透明度 0 起始，按上面的排除项，透明元素不计入候选，主图与标题若走显现动画，被计入的时间可能被推后，所以首屏主内容不应使用滚动显现。
与相邻概念的边界
LCP 衡量出现速度，CLS 衡量出现后的稳定性。LCP 也不等于加载事件或首次绘制：它只记录视口内最大的那一块内容的渲染时间。
怎样解释变化
LCP 变差时，先按四个子部分定位：慢在服务器响应、资源发现、资源体积还是渲染阻塞。更换首屏大图、加入 cookie 提示条（若其文本块变成最大元素）或调整懒加载策略，都可能让 LCP 元素发生变化，前后对比要先确认元素身份。