Core Web Vitals是什么、怎么优化

Core Web Vitals 是 Google 推出的网页体验核心指标，影响搜索排名。本文讲清三个指标（LCP、INP、CLS）的含义、目标值、优化方法和工具。

很多企业做 SEO 时只关注关键词、内容，却忽视了网页体验指标。Google 用 Core Web Vitals 衡量网页体验，直接影响搜索排名——加载慢、卡顿的网页，内容再好也排不上去。 这篇文章讲清 Core Web Vitals 是什么、怎么测、怎么优化。

Core Web Vitals 是什么

Core Web Vitals 是 Google 推出的一组真实用户体验核心指标，从加载、交互、视觉稳定三个维度衡量网页体验：

指标	全称	含义	良好	需改进	差
LCP	Largest Contentful Paint	最大内容绘制时间（加载）	<2.5s	2.5-4s	>4s
INP	Interaction to Next Paint	交互到下一次绘制延迟（响应）	<200ms	200-500ms	>500ms
CLS	Cumulative Layout Shift	累积布局偏移（视觉稳定）	<0.1	0.1-0.25	>0.25

LCP（加载体验）

页面主要内容（首屏最大的图片、文字块、视频海报）加载完成的时间。访客感知到"页面主要内容已经出来了"的时刻。

INP（交互响应）

访客点击、输入、键盘操作后，到页面视觉响应的延迟。INP 取所有交互的"最差值"（接近），反映整个页面生命周期的响应性。

INP 在 2024 年 3 月正式取代了 FID（First Input Delay），更全面地衡量交互体验。

CLS（视觉稳定）

页面加载过程中元素位置移动的总和。布局抖动让访客点错按钮、看错内容，体验差。

为什么 Core Web Vitals 重要

1. 影响搜索排名

Google 明确把 Core Web Vitals 作为排名因素之一。同等条件下，体验好的页面排名更高。

2. 影响用户体验和转化

加载慢 → 访客跳出。
交互卡 → 访客不耐烦。
布局抖 → 访客误操作。

3. 影响广告质量得分（投 Google Ads）

广告落地页体验差，质量得分低，广告费更高、效果更差。

怎么测 Core Web Vitals

实验室数据（Lab Data）工具

Lighthouse：Chrome DevTools 内置，单次测试。
PageSpeed Insights：Google 在线工具，输入 URL 即测。
WebPageTest：更详细的测试报告。

实验室数据是受控环境测的，方便定位问题，但不等于真实用户数据。

真实用户数据（Field Data）工具

CrUX（Chrome UX Report）：Google 收集的 Chrome 用户实测数据。
Search Console：核心网页指标报告，按月更新。
自建 RUM（Real User Monitoring）：在自己的网站嵌入统计脚本收集真实数据。

Google 排名用的是真实用户数据（CrUX），不是实验室数据。

LCP 优化

LCP 慢通常是首屏加载慢，原因和对策：

1. 服务器响应慢（TTFB 高）

升级服务器配置。
用 CDN 加速。
启用页面缓存。

2. 首屏大图加载慢

图片压缩、转 WebP/AVIF。
图片懒加载（首屏图除外）。
用响应式图片（srcset）。
重要图片 preload。

3. 渲染阻塞资源

CSS 关键路径精简。
JavaScript 异步加载（defer、async）。
减少第三方脚本（统计、广告、客服）。

4. 客户端渲染（CSR）慢

用 SSR（服务端渲染）或 SSG（静态生成），首屏 HTML 直接返回。
我们用 Nuxt/Vue 做 SSR/SSG，LCP 天然友好。

INP 优化

INP 慢通常是 JavaScript 主线程被占用，原因和对策：

1. JavaScript 执行时间长

拆分长任务（用 setTimeout、requestIdleCallback）。
代码分割，按需加载。
删除无用依赖。

2. 第三方脚本拖累

限制第三方脚本数量。
延迟加载非关键脚本。
用 Partytown 等方案隔离第三方脚本。

3. 重渲染和重布局

避免在交互回调中触发大量 DOM 操作。
用 transform、opacity 做动画（不触发重布局）。
虚拟列表（长列表场景）。

4. 输入响应延迟

表单输入做防抖但要响应快。
优化事件监听器数量。

CLS 优化

CLS 高通常是元素位置在加载中变化，原因和对策：

1. 图片、视频缺尺寸属性

所有 img、video 标签设置 width、height。
字体加载前预留位置。

2. 动态插入内容

广告、弹窗、客服组件预留位置。
不要在已加载内容上方插入新内容。

3. 字体闪烁（FOUT/FOIT）

用 font-display: swap。
字体预加载。
用系统字体作为后备。

4. 异步加载的元素

给容器预留高度。
骨架屏占位。

优化优先级

如果三个指标都差，先优化哪个：

LCP（最重要）：首屏加载是访客第一印象，最影响跳出率。
CLS（容易修）：加 width/height、预留位置，改动小见效快。
INP（最难）：需要重构 JavaScript，工作量大。

成本参考

优化范围	工作量	成本区间
基础优化（图片、CLS、缓存）	1-3 天	几千到 1 万
中度优化（含 SSR/SSG 重构）	1-2 周	1 万到 3 万
深度优化（含架构调整）	2-4 周	3 万以上

常见误区

只看 Lighthouse 分数：实验室数据不等于真实排名数据。
只优化首页：所有页面都要达标，不然整体评分低。
优化后没等数据更新：CrUX 按月更新，等下一轮才看到效果。
忽视移动端：移动端数据占主流，要优先优化移动端体验。
加一堆第三方脚本：统计、客服、广告脚本拖累性能。
不持续监控：上线后性能会随内容增加退化，要持续关注。

怎么开始

用 PageSpeed Insights 测试官网所有重要页面。
在 Search Console 查看 Core Web Vitals 报告。
列出每个页面不达标的指标和原因。
按 LCP → CLS → INP 优先级优化。
上线后用 RUM 或 CrUX 持续监控。
每月复查，保持指标稳定。

广州市汉诺雷斯（HNREIS）做官网用 Nuxt/Vue 的 SSR/SSG，Core Web Vitals 天然友好，并提供性能优化服务。把你的官网性能情况告诉我们，我们给出诊断和优化方案。