Core Web Vitals 三指标详解：LCP、INP、CLS 定义与阈值

引言：排名没变但流量掉了

2021 年起 Google 把 Core Web Vitals（CWV）纳入排名信号，但很多站长只盯着关键词，忽略了”加载体验”。当用户在手机上打开你的文章，首屏图半天不显、点按钮没反应、文字突然跳动，跳出率升高，间接拖累 SEO。CWV 就是把这三种糟糕体验量化成三个指标。

原理分析：三个指标分别管什么

• LCP（Largest Contentful Paint）最大内容绘制：测”主要内容什么时候画出来”，一般是首屏大图或标题块。合格线 ≤2.5 秒，需 ≤2.5s 的 URL 占比 ≥75%。
• INP（Interaction to Next Paint）交互到下次绘制：2024 年取代 FID，测”用户点击/触摸后到画面响应”的延迟，反映整页交互流畅度。合格线 ≤200 毫秒。
• CLS（Cumulative Layout Shift）累积布局偏移：测”页面元素有没有乱跳”，分数越低越好，合格线 ≤0.1。

保姆级实操

在 Google Search Console 左侧”体验”→”核心网页指标”查看你站点的移动/桌面达标比例；更细的数据去 PageSpeed Insights 输入 URL，或 CrUX 看真实用户。

# 用 Lighthouse CI 在本地批量测一组 URL 的 CWV
npx lighthouse https://mimangfei.com/sample-post/ --only-categories=performance --output=json | \
  python -c "import sys,json;d=json.load(sys.stdin);a=d['audits'];print('LCP',a['largest-contentful-paint']['displayValue']);print('CLS',a['cumulative-layout-shift']['displayValue']);print('TBT',a['total-blocking-time']['displayValue'])"

INP 在 Lighthouse 实验室里没有直接值（它是字段指标），要用 CrUX 或 web-vitals JS 库采集。

常见踩坑

1. 把 TBT 当成 INP，TBT 只是实验室近似，真实 INP 看 CrUX。
2. 只看桌面不看移动，移动端达标率往往低 20–30%。
3. 案例：某博客 LCP 3.8 秒，查 PSI 发现首屏英雄图 1.2MB 且没设 width/height，浏览器不知道占位导致同时拖慢 LCP 和 CLS。压缩并加尺寸属性后 LCP 降到 1.9 秒。
4. 认为 75% 达标是指单页，实际是”全站合格 URL 占比 ≥75%”。
5. 关了缓存去测，结果不能代表真实用户。

总结

判断标准：LCP≤2.5s、INP≤200ms、CLS≤0.1 且全站 ≥75% URL 达标，才算通过。行动清单：GSC 看达标比例 → PSI/CrUX 定位落后 URL → 按指标分别优化。下一步按LCP 优化的实操清单、INP 优化思路、CLS 布局偏移修复逐条处理。