FCP 和 LCP 有什么区别和关系？各自如何优化？
定义
| 指标 | 含义 | 优秀阈值 |
|---|---|---|
| FCP（First Contentful Paint） | 浏览器首次渲染出任何文本/图片/非空白内容 | < 1.8s |
| LCP（Largest Contentful Paint） | 视口内最大的内容元素（大图/大块文本）渲染完成 | < 2.5s |
关系
- 逻辑上 FCP 一定早于或等于 LCP：最大内容绘制必然建立在「已经有内容绘出」之后。
- FCP 衡量「有没有开始画」，LCP 衡量「主要内容画完没」——后者更贴近用户真实体感。
优化 FCP
- 减少阻塞渲染的资源（关键 CSS 内联、JS 用
defer）。 - 开启压缩、HTTP/2、CDN。
- 预连接关键域名：
<link rel="preconnect">。
优化 LCP
- LCP 元素往往是首屏大图或大标题：图片用现代格式（WebP/AVIF）、设
width/height防抖动、用fetchpriority="high"优先加载。 - 服务端预渲染首屏 HTML（SSR），让用户尽快看到主要内容。
- 避免 LCP 元素被懒加载/动画延迟出现。
测量
import { onFCP, onLCP } from 'web-vitals'
onFCP(console.log)
onLCP(console.log)面试常考陷阱：FCP 出现不等于 LCP 出现；LCP 一定 >= FCP，但二者可能非常接近（当首屏最大元素就是第一个绘制内容时）。