什么是 Core Web Vitals？
Core Web Vitals 是谷歌2021年正式纳入排名因子的页面用户体验指标体系，由三个核心指标组成：
| 指标 | 全称 | 衡量内容 | 良好标准 |
|---|---|---|---|
| LCP | Largest Contentful Paint | 最大内容绘制（加载速度） | ≤ 2.5秒 |
| INP | Interaction to Next Paint | 下一次绘制交互（响应速度） | ≤ 200毫秒 |
| CLS | Cumulative Layout Shift | 累计布局偏移（视觉稳定性） | ≤ 0.1 |
注意： 2024年3月，INP 正式替代 FID 成为 Core Web Vitals 的交互指标。
如何诊断 Core Web Vitals 问题？
| 工具 | 数据类型 | 使用场景 |
|---|---|---|
| Google Search Console | 真实用户现场数据（28天均值） | 了解整体表现，发现问题URL |
| PageSpeed Insights | 实验室 + 现场数据 | 快速诊断单个页面，获取优化建议 |
| Chrome DevTools | 实验室数据，精确到资源级别 | 定位具体阻塞资源 |
以 Search Console 数据为准（反映真实用户体验），PageSpeed Insights 实验室数据仅供参考。
LCP 优化：加快最大内容绘制
LCP 测量视口中最大可见元素（通常是首屏大图或大文本块）完成渲染的时间。
5 个最常见问题与修复
① 首屏图片未预加载
<img src="hero.jpg" fetchpriority="high" alt="首屏图" />
② 图片格式未优化 → 转为 WebP/AVIF（体积减少 30-50%）
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="首屏图" />
</picture>
③ 关键 CSS 阻塞渲染 → 首屏 CSS 内联，非首屏 CSS 异步加载
④ 服务器响应慢（TTFB > 800ms） → 启用 CDN，开启服务器缓存
⑤ 第三方脚本阻塞主线程 → 为统计/广告脚本添加 defer 或 async
INP 优化：提升交互响应速度
INP 测量用户交互（点击、键盘输入）后到浏览器下次完成视觉更新的时间。
核心优化方向
① 减少主线程阻塞（长任务 > 50ms）
// ❌ 点击事件中做重计算
button.addEventListener('click', () => {
const result = heavyComputation(); // 阻塞主线程
updateUI(result);
});
// ✅ 先更新视觉反馈，再做计算
button.addEventListener('click', () => {
updateUIImmediately();
setTimeout(() => heavyComputation(), 0);
});
② Vue/React 单页应用专项
- 避免在
v-for/Array.map中做复杂计算 - 使用虚拟滚动处理长列表
- 合理使用
computed/useMemo缓存计算结果
CLS 优化：消除布局偏移
CLS 测量页面加载过程中元素发生意外位置变化的累积量。
最常见原因与修复
① 图片/视频未设置尺寸 → 始终设置 width 和 height
<!-- ❌ --> <img src="photo.jpg" alt="图片" />
<!-- ✅ --> <img src="photo.jpg" alt="图片" width="800" height="450" />
② 动态注入广告/横幅 → 预留固定高度容器
③ 自定义字体加载致文字闪跳（FOUT） → CSS 中设置 font-display: swap
④ 动态插入 DOM 元素（弹窗、通知栏） → 使用 position: fixed 避免影响文档流
Core Web Vitals 与 AI 爬虫的关系
Perplexity 爬虫在爬取页面时有时间预算。LCP > 3秒的页面被 Perplexity 引用的概率下降约 40%（2025年测试数据）。优化 Core Web Vitals 同时提升谷歌排名和 AI 引用率。
常见问题 FAQ
Q：Core Web Vitals 是多大权重的排名因子？ A：相对较小。内容相关性和质量仍是最重要的排名因素。CWV 主要在内容质量相近时起决定性作用。
Q：PageSpeed Insights 90+ 分，但 Search Console 显示"需要改进"？ A：PageSpeed Insights 使用模拟环境数据，Search Console 使用真实用户现场数据（28天均值）。差异来自用户的真实网络条件和设备性能，以 Search Console 数据为准。
查看 SGAIndex SEO工具导航 了解页面速度优化工具。