Core Web Vitals 核心网页指标优化完整实操
Core Web Vitals 是什么
Core Web Vitals（核心网页指标，简称 CWV）是谷歌用来衡量页面体验的三项指标：加载速度、交互响应、视觉稳定性。它们是“页面体验”排名信号的一部分，直接影响用户体验（来源见文末）。
三项指标与达标线
| 指标 | 测什么 | 良好阈值 |
|---|---|---|
| LCP 最大内容绘制 | 主内容加载多快（看得到内容） | ≤ 2.5 秒 |
| INP 交互到下次绘制 | 点按后响应多快（替代旧 FID） | ≤ 200 毫秒 |
| CLS 累积布局偏移 | 加载中内容跳动多严重 | ≤ 0.1 |
说明：谷歌 2024 年 3 月起用 INP 取代 FID，更真实地反映交互卡顿，因为它统计整段会话而非单次交互。
逐项优化怎么做
| 指标 | 常见拖后腿原因 | 优化手段 |
|---|---|---|
| LCP | 大图、慢服务器、阻塞资源 | 图片转 WebP/压缩/定尺寸、首屏图预加载、CDN、缓存、减少阻塞 JS/CSS |
| INP | JS 主线程长任务 | 减少/拆分 JS、延迟非关键脚本、把长任务切小 |
| CLS | 图片/广告/字体无预留空间 | 给图片与视频定宽高、为嵌入内容留位、字体用 font-display:swap |
怎么测
- GSC 的 Core Web Vitals：看全站按“良好/需改进/较差”分组；
- PageSpeed Insights / Lighthouse：给单页逐项打分、点出具体问题；
- Chrome 用户数据（CrUX）：基于真实用户的字段数据，比实验室数据更可信。
常见误区
- 只在本地测，忽略真实用户设备（中低端手机）的差异；
- 首屏塞大 Banner 和自动播放视频，LCP 爆表；
- 为省事所有图片懒加载，首屏主图也被延迟；
- 只盯分数，不盯真实体验。
来源：https://web.dev/vitals/
来源：https://developers.google.com/search/docs/appearance/page-experience