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

什么是 Core Web Vitals？

Core Web Vitals 是一组反映用户体验的真实世界指标。它们是 Google 页面体验信号的一部分，并用于排名。每个指标都有一个“良好”阈值：

LCP：应 ≤ 2.5 秒。
INP：应 ≤ 200 毫秒。
CLS：应 ≤ 0.1。

这些阈值是在页面加载的第 75 百分位测量的，意味着 75% 的访问应达到目标。

如何测量 Core Web Vitals

你需要实验室数据和现场数据。实验室数据有助于调试；现场数据展示真实用户体验。

现场数据（真实用户）

Chrome 用户体验报告 (CrUX)：为你的源提供聚合的真实用户数据。可通过 PageSpeed Insights 或 CrUX 仪表板访问。
web-vitals JavaScript 库：将此轻量级脚本添加到你的网站，以将指标发送到你的分析工具。

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);

实验室数据（合成）

Lighthouse：内置于 Chrome DevTools，可审计性能并给出评分。
WebPageTest：用于通过网络节流进行更深入的分析。

使用实验室数据快速迭代，但始终用现场数据验证。

提升最大内容绘制 (LCP)

LCP 衡量最大的内容元素（通常是主图或标题）何时变为可见。要提升它：

优化图片：压缩图片，使用 WebP 或 AVIF 等现代格式，并通过 srcset 提供响应式尺寸。
预加载关键资源：为 LCP 图片和关键字体使用 <link rel="preload">。
消除渲染阻塞资源：延迟非关键 CSS 和 JavaScript。内联关键 CSS。
使用 CDN：从靠近用户的位置提供资源。
启用文本压缩：对基于文本的资源使用 Brotli 或 gzip。

对于图片压缩，你可以使用像 Image Compressor 这样的工具来快速减小文件大小而不损失质量。

提升交互到下一次绘制 (INP)

INP 衡量你的页面对用户交互的响应性。高 INP 意味着浏览器繁忙，无法快速响应。要提升它：

拆分长任务：使用 setTimeout 或 requestIdleCallback 将 JavaScript 工作分成更小的块。
优化事件处理器：对昂贵的处理器进行防抖或节流。避免布局抖动。
减少 JavaScript：移除未使用的代码，进行代码分割，并延迟非关键脚本。
使用 Web Worker：将繁重计算卸载到工作线程。

此外，确保你没有用第三方脚本阻塞主线程。定期审计它们。

提升累积布局偏移 (CLS)

CLS 衡量意外的布局偏移。要使其保持低水平：

设置尺寸属性：始终在图片和视频上包含 width 和 height。
为动态内容预留空间：为广告和嵌入内容使用 CSS aspect-ratio 或占位符。
避免在现有内容上方插入内容：除非是响应用户交互。
使用 transform 动画：优先使用 transform 和 opacity 进行动画，而不是触发布局的属性。

工具和工作流程

以下是一个持续监控和提升 CWV 的简单工作流程：

步骤	操作	工具
1	基线审计	PageSpeed Insights, Lighthouse
2	识别问题	Chrome DevTools 性能面板
3	应用修复	代码更改、图片优化
4	监控现场数据	web-vitals + 分析工具, CrUX

请记住，改进应随时间用真实用户数据验证。

常见问题

Core Web Vitals 的当前阈值是什么？

LCP ≤ 2.5 秒，INP ≤ 200 毫秒，CLS ≤ 0.1，在页面加载的第 75 百分位测量。

我应该多久检查一次 Core Web Vitals？

持续监控现场数据，并在重大更改后运行实验室审计。每月审查是一个好习惯。

我可以在不重新设计网站的情况下提升 Core Web Vitals 吗？

可以。许多改进，如图片优化、延迟脚本和设置尺寸属性，只需最少的代码更改即可完成。