一文看懂 Core Web Vitals（LCP、INP、CLS）

一、什么是 Core Web Vitals？

Core Web Vitals（核心网页指标）是 Google 推出的一套衡量网页用户体验的标准。简单说,就是 Google 告诉你：什么样的网页才算是"好网页"。

想象一下，你点开一个网页：

• 页面加载很慢，你盯着白屏等半天 → 这是 加载性能 问题
• 你点击按钮，半天没反应 → 这是 交互性能 问题
• 正在看内容，突然页面跳了一下，你点错了按钮 → 这是 视觉稳定性 问题

Core Web Vitals 就是专门针对这三个问题设计的指标，而且从 2021 年开始，它们已经成为 Google 搜索排名的重要因素。

二、LCP - 页面加载快不快？

2.1 大白话解释

LCP 衡量的是：用户看到"主要内容"需要等多久。

比如你打开一篇新闻：

• 主要内容是文章正文和大图
• 从你点击链接，到文章和图片显示出来的时间，就是 LCP

注意：不是整个页面加载完，而是"最大的那块内容"显示出来的时间。

2.2 评分标准

2.3 什么会影响 LCP？

• 大图片 - 最常见的罪魁祸首，一张没压缩的图片就能拖垮性能
• 视频封面 - 视频的首帧图也很大
• 大段文字 - 虽然少见，但如果首屏是大段文字，也会被计入
• 服务器响应慢 - 后端处理慢，前端再快也没用

2.4 怎么优化？

1. 压缩图片 - 用 WebP 格式，能减少 30-50% 体积
2. 用 CDN - 让图片离用户更近，加载更快
3. 预加载关键资源 - 提前告诉浏览器哪些资源重要
4. 懒加载其他图片 - 首屏外的图片先不加载

<!-- 预加载首屏大图 -->
<link rel="preload" href="hero-image.webp" as="image">

<!-- 首屏外的图片懒加载 -->
<img src="image.jpg" loading="lazy" alt="描述">

三、INP - 点击响应快不快？

3.1 大白话解释

INP 衡量的是：用户点击按钮后，页面要多久才有反应。

比如你在购物网站：

• 点击"加入购物车"按钮
• 从点击到按钮变色、弹出提示的时间，就是 INP

为什么要替换 FID？因为 FID 只测量"第一次交互"，而 INP 测量"所有交互"，更能反映真实体验。

3.2 评分标准

3.3 什么会影响 INP？

• JavaScript 执行时间长 - 主线程被占用，点击事件排不上队
• 第三方脚本 - 广告、统计脚本会抢占资源
• 大量 DOM 操作 - 更新大量元素会很慢
• 没有防抖节流 - 高频触发事件，浏览器处理不过来

3.4 怎么优化？

1. 拆分长任务 - 把耗时操作分片执行
2. 用 Web Worker - 把计算放到后台线程
3. 减少 JavaScript 体积 - 代码分割，按需加载
4. 防抖和节流 - 控制事件触发频率

// 防抖：用户停止操作后才执行
function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 节流：固定时间间隔执行一次
function throttle(fn, delay) {
  let last = 0
  return function(...args) {
    const now = Date.now()
    if (now - last > delay) {
      last = now
      fn.apply(this, args)
    }
  }
}

// 搜索框输入，停止输入500ms后再搜索
searchInput.addEventListener('input', debounce(search, 500))

// 滚动事件，每200ms最多执行一次
window.addEventListener('scroll', throttle(handleScroll, 200))

四、CLS - 页面布局稳不稳？

4.1 大白话解释

CLS 衡量的是：页面加载过程中，内容会不会突然跳动。

最典型的例子：

• 你正在看新闻，准备点击某个链接
• 突然上方广告加载出来了，整个页面往下跳
• 你点到了广告，而不是你想点的链接
• 这就是 CLS 差的表现

4.2 评分标准

注意：CLS 是个累积值，页面存活期间所有的跳动都会累加。

4.3 什么会导致 CLS？

• 图片没设置宽高 - 图片加载前浏览器不知道要预留多大空间
• 动态插入内容 - 广告、通知条突然出现在已有内容上方
• 字体闪烁 - 自定义字体加载后，文字大小变了
• 动画不用 transform - 用 left/top 会触发重排

4.4 怎么优化？

1. 给图片和视频设置尺寸 - 浏览器能提前预留空间
2. 不在已有内容上方插入东西 - 广告放固定位置
3. 预留占位符 - 内容加载前先占个位
4. 用 transform 做动画 - 不会触发重排

<!-- 一定要设置宽高 -->
<img src="image.jpg" width="800" height="600" alt="描述">

<!-- 或者用 aspect-ratio -->
<img src="image.jpg" style="aspect-ratio: 16/9; width: 100%;" alt="描述">

<!-- 字体加载优化 -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* 先用系统字体，加载后再换 */
  }
</style>

五、怎么测量这些指标？

5.1 Chrome DevTools（开发阶段）

按 F12 打开开发者工具，找到 Lighthouse 面板，点击"生成报告"。

• 免费
• 详细的优化建议
• 只能测试本地环境

5.2 PageSpeed Insights（线上测试）

访问 https://pagespeed.web.dev/，输入你的网址。

• 免费
• 同时测试移动端和桌面端
• 提供真实用户数据（如果有的话）

5.3 代码监控（生产环境）

用 Google 的 web-vitals 库实时监控真实用户数据：

// 安装
npm install web-vitals

// 使用
import { onLCP, onINP, onCLS } from 'web-vitals'

onLCP((metric) => {
  console.log('LCP:', metric.value)
  // 发送到你的分析服务器
  sendToAnalytics({
    name: 'LCP',
    value: metric.value,
    url: location.href
  })
})

onINP((metric) => {
  console.log('INP:', metric.value)
  sendToAnalytics({
    name: 'INP',
    value: metric.value,
    url: location.href
  })
})

onCLS((metric) => {
  console.log('CLS:', metric.value)
  sendToAnalytics({
    name: 'CLS',
    value: metric.value,
    url: location.href
  })
})

六、常见问题 Q&A

Q1: 我的网站指标都不错，为什么 Google 排名还是很低？

A: Core Web Vitals 只是排名因素之一。内容质量、外链、关键词匹配等因素同样重要。但如果其他因素相当，性能好的网站会更有优势。

Q2: 本地测试很好，线上就很差，为什么？

A: 可能是：

• 本地网络环境好（如千兆宽带、WiFi 6），但真实用户网络较差（如3G/4G弱网环境）
• 生产环境有额外的广告、统计、监控脚本，增加了页面负担
• CDN 配置有问题，或用户访问的 CDN 节点距离较远
• 服务器在高峰期响应变慢，TTFB（首字节时间）增加

建议用 PageSpeed Insights 测试线上环境，或者查看 Google Search Console 的真实用户数据。

Q3: 单页应用（SPA）怎么测量？

A: SPA 的每次路由切换都算一次新的页面浏览，Core Web Vitals 会重新计算。注意：

• 路由切换也要优化 LCP（比如骨架屏）
• INP 更重要，因为 SPA 交互多
• 注意避免路由切换时的布局跳动

Q4: 移动端和桌面端要分开优化吗？

A: 是的！Google 会分别评估移动端和桌面端。而且：

• 移动端网络更慢，LCP 更难优化
• 移动端 CPU 更弱，INP 更容易超标
• 移动端屏幕小，CLS 影响更大

优先优化移动端，因为 Google 现在是"移动优先索引"。

七、总结：记住这三句话

性能优化不是一次性的工作，而是持续的过程：

1. 建立监控 - 用 web-vitals 库收集真实数据
2. 定期检查 - 每次上线前用 Lighthouse 测试
3. 逐步优化 - 不求一步到位，持续改进
4. 关注用户 - 看真实用户数据，而不是实验室数据

记住：每一毫秒都很重要。对用户而言，速度就是体验；对业务而言，速度就是转化率；对 Google 而言，速度就是排名。

说明：本文的指标标准和优化建议基于 Google 官方文档（web.dev）和 Web 性能最佳实践。具体优化效果因项目而异，建议结合实际情况制定优化方案。