外观
Core Web Vitals 是哪几个？
现在的三项核心指标是 LCP、INP、CLS。它们分别看最大内容什么时候出现、点了之后多久能响应、页面会不会自己乱跳。常用的「良好」界限是 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。
原理
**LCP（最大内容绘制）**记录视口里最大的图片、视频或文本块第一次画出来的时间。优化手段是让这一个元素更早到达：不要懒加载它、给图片明确尺寸和优先级、减少它前面的阻塞脚本和 CSS、把 TTFB 降下来。
**INP（交互到下一次绘制）**看用户点击、按键或点按之后，到浏览器画出下一帧的延迟，并取页面生命周期里较差的那些交互。优化手段是拆开主线程长任务、少在事件处理里做同步布局、把不紧急的更新放进 startTransition 或空闲时间。FID 是更早的交互指标，现在核心三项里用的是 INP。
**CLS（累计布局偏移）**把意外的布局移动按影响面积和距离加总。预留图片和广告的尺寸、字体加载时用 size-adjust 或避免晚到的字把整段文字撑开、不要在已有内容上方插入横幅。用户自己点开的展开不算意外偏移。
辅助指标：FCP 是第一次有内容画出来，TTFB 是第一个字节到达的时间。LCP 差但 TTFB 就很长时，先查服务器和网络，而不是先改组件。
实验室数据（Lighthouse）是一台受控机器上的一次运行。现场数据（CrUX、RUM）才是真实用户。两边不一致时，以现场数据判断体验，用实验室数据找原因。
追问
指标差，第一步做什么？
先对上指标和现象。LCP 元素是哪一个，在性能面板里能点出来。INP 对应哪一次点击，看那一段的长任务。CLS 看是哪一块在动。不要同时改十件事。见 性能排查。
SPA 的路由切换算 LCP 吗？
LCP 统计的是这次页面加载。客户端路由跳转不会开始一次新的 LCP，但 INP 和 CLS 仍然覆盖之后的交互。路由切换慢要单独测。
易错点
- 把 FID 还说成当前的核心交互指标。现在要讲的是 INP。
- LCP 元素被
loading="lazy"推迟，是常见的回归。 - 只报一个 Lighthouse 分数，不说是哪一项、在什么设备上。