Core Web Vitals：测量并提升网页性能

Web2026-11-09TryQuickToolBox

你构建了一个现代 Web 应用，但用户抱怨它很慢。搜索排名也可能受到影响。Core Web Vitals（CWV）是 Google 用于衡量用户体验的指标：最大内容绘制（LCP）、交互到下一次绘制（INP）和累积布局偏移（CLS）。本指南向你展示如何准确测量并有效改善它们。

什么是 Core Web Vitals？

Core Web Vitals 是三个量化用户体验关键方面的指标：

LCP 衡量加载性能。它标记最大的内容元素（图片、文本块、视频）何时变为可见。目标为 ≤2.5 秒。
INP 衡量响应性。它捕获所有交互（点击、轻触、按键）的延迟，并报告最差（或接近最差）的延迟。目标为 ≤200 毫秒。
CLS 衡量视觉稳定性。它量化加载过程中意外的布局偏移。目标为 ≤0.1。

这些指标既通过现场测量（来自真实用户），也通过实验室测量（在受控环境中）。两者都很重要。

如何测量 Core Web Vitals

你需要现场数据和实验室数据来诊断问题。

现场数据（真实用户监控）

现场数据反映跨设备和网络的真实用户体验。使用以下来源：

Chrome 用户体验报告（CrUX）：针对数百万站点的真实用户指标的公共数据集。通过 PageSpeed Insights 或 CrUX API 访问。
Google Search Console：Core Web Vitals 报告显示基于 CrUX 数据需要关注的 URL 组。
Web Vitals JavaScript 库：将 web-vitals 库添加到你的站点，并将测量结果发送到你的分析端点。

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

实验室数据（合成测试）

实验室工具在受控环境中模拟加载，非常适合调试和 CI 集成。

Lighthouse：内置于 Chrome DevTools，可作为 CLI 使用，并集成到 PageSpeed Insights 中。它报告实验室指标和优化机会。
WebPageTest：使用自定义网络条件和胶片条进行高级测试。
Chrome DevTools 性能面板：记录并分析运行时性能，包括影响 INP 的长任务。

最佳实践：使用实验室数据确定修复方案，并使用现场数据验证影响。

改善最大内容绘制（LCP）

LCP 通常由主视觉图片或大文本块主导。优化这些：

优化 LCP 资源：压缩图片（使用 WebP/AVIF），通过 srcset 提供响应式尺寸，如果 LCP 图片关键则预加载它。
消除渲染阻塞资源：内联关键 CSS，延迟非关键 CSS 和 JavaScript。
改善服务器响应时间（TTFB）：使用 CDN，启用缓存，并优化后端查询。
减少客户端渲染：对于 SPA，考虑对初始视图使用服务器端渲染（SSR）或静态生成。

示例：预加载 LCP 图片：

<link rel="preload" as="image" href="/hero.avif" imagesrcset="/hero-480.avif 480w, /hero-800.avif 800w" imagesizes="(max-width: 600px) 480px, 800px">

改善交互到下一次绘制（INP）

INP 衡量用户交互与下一次绘制之间的延迟。长任务和繁重的 JavaScript 是常见原因。

拆分长任务：使用 setTimeout、requestIdleCallback 或 scheduler API 让出主线程。
优化事件处理程序：对昂贵的处理程序进行防抖或节流；避免布局抖动。
减少 JavaScript 执行时间：代码分割、tree-shaking，并延迟非关键脚本。
对 CPU 密集型工作使用 Web Worker。

示例：让出主线程：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... 做一些工作
  await yieldToMain();
  // ... 继续
}

改善累积布局偏移（CLS）

CLS 发生在元素意外偏移时。通过以下方式防止它：

始终在图片和视频上包含宽度和高度属性，或使用 CSS aspect-ratio。
为动态内容（广告、嵌入、iframe）预留空间，使用 min-height 或占位符。
避免在现有内容上方插入内容，除非由用户交互触发。
使用 font-display: optional 或预加载字体 以避免 FOIT/FOUT 偏移。

示例：为广告预留空间：

<div>
  <!-- 广告在此加载 -->
</div>

持续改进的工具和工作流程

性能不是一次性修复。将测量集成到你的工作流程中：

设置预算：使用 Lighthouse CI 在拉取请求中强制执行阈值。
监控现场数据：使用 CrUX 或你自己的 RUM 设置仪表板。
优先修复：专注于与“良好”阈值差距最大的指标。
在真实设备上测试：模拟中端移动设备以捕捉问题。

如需快速检查，请通过 PageSpeed Insights 运行你的页面；它结合了实验室和现场数据。

常见问题

Core Web Vitals 的当前阈值是多少？

LCP：良好 ≤2.5 秒，需要改进 ≤4 秒，差 >4 秒。INP：良好 ≤200 毫秒，需要改进 ≤500 毫秒，差 >500 毫秒。CLS：良好 ≤0.1，需要改进 ≤0.25，差 >0.25。

CrUX 数据多久更新一次？

CrUX 数据每天更新，但数据集反映滚动 28 天窗口。Search Console 定期更新。

我可以在不改变设计的情况下改善 Core Web Vitals 吗？

可以。许多改进是技术性的：优化图片、延迟脚本、为动态内容预留空间以及减少主线程工作。