Core Web Vitals 三项指标各自对应一类问题：LCP 是首屏资源太重，CLS 是元素加载时乱跳，INP 是脚本阻塞交互。先修 LCP，因为它的影响最大也最好修。
LCP：首屏主内容出现时间
目标 2.5 秒以内。四步修：
- 首屏大图按显示尺寸导出、转 WebP
- 首屏图预加载（
fetchpriority="high"） - 首屏 CSS 内联，其余延后
- 服务器放到目标市场
第三、四条常被忽略，但对国内访问海外站的场景影响很大。
CLS：布局偏移
目标 0.1 以内。修法很机械：
- 给图片写死宽高或 aspect-ratio
- 广告位、嵌入内容预留固定高度
- 字体加载用
font-display: swap并选相近的回退字体
INP：交互响应
目标 200 毫秒以内。修法：
- 减少第三方脚本（统计、客服、热图）
- 长任务拆分
- 事件处理里避免同步计算
第三方脚本是最常见的元凶，一个客服插件能拖慢几百毫秒。
修复顺序
- 先测移动端（通常是瓶颈）
- 先修 LCP（收益最大）
- 再修 CLS（成本最低）
- 最后看 INP（需要改代码）
常见误修
- 追求满分，忽略真实用户数据
- 只在本地测，不测目标市场
- 为了分数把内容拆成多页
图片与首屏的具体做法见图片优化。
修复前后数字
| 指标 | 改前 | 改后 | 主要动作 |
|---|---|---|---|
| LCP | 4.4 s | 2.1 s | 首图转 WebP + 预加载 |
| CLS | 0.28 | 0.04 | 图片写死宽高 |
| INP | 380 ms | 160 ms | 去掉一个客服插件 |
三项里最省力的是 CLS，改法机械；最费时的是 INP，要动第三方脚本。
什么时候停手
三项都进入「良好」区间后，继续优化的收益很低。判断标准：
- LCP < 2.5 秒
- CLS < 0.1
- INP < 200 毫秒
三条达标就停，把精力放回内容。追求满分而拆页面、删功能，得不偿失。