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

你构建了一个现代 Web 应用，但用户抱怨它感觉很慢。搜索排名在下滑，跳出率在攀升。罪魁祸首可能是糟糕的 Core Web Vitals——Google 用于衡量真实用户体验的指标。在本指南中，你将了解它们是什么、如何准确测量，以及改善每一项的实用步骤。

什么是 Core Web Vitals？

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

• 最大内容绘制 (LCP)：最大的内容元素（图像或文本块）变为可见所需的时间。良好：≤ 2.5 秒。
• 交互到下一次绘制 (INP)：衡量响应性——从用户交互（点击、轻触、按键）到下一次视觉更新的时间。良好：≤ 200 毫秒。
• 累积布局偏移 (CLS)：量化意外的布局偏移。良好：≤ 0.1。

这些指标是 Google 页面体验信号的一部分，直接影响 SEO 和用户满意度。

如何测量 Core Web Vitals

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

实验室工具

• Chrome DevTools 中的 Lighthouse：运行审计以获取 LCP、CLS 和 TBT（INP 的代理指标）。
• WebPageTest：使用胶片条和水fall图进行高级测试。
• PageSpeed Insights：结合实验室和现场数据。

现场工具

• Chrome UX Report (CrUX)：真实用户指标的公共数据集。
• web-vitals 库：将指标发送到你的分析平台。

示例：使用 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);

改善 LCP

LCP 通常是最有影响力需要修复的指标。常见原因：服务器响应慢、渲染阻塞资源和未优化的图像。

1. 优化图像：压缩、使用现代格式（WebP/AVIF）并设置尺寸。如需快速压缩，试试我们的 图像压缩器。
2. 预加载关键资源：对首屏图像和字体使用 <link rel="preload">。
3. 减少服务器响应时间：使用缓存、CDN 并优化后端查询。
4. 消除渲染阻塞资源：内联关键 CSS，延迟非关键 JS。

示例：预加载 LCP 图像：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

改善 INP

INP 衡量响应性。长任务阻塞主线程并延迟视觉反馈。

1. 拆分长任务：使用 setTimeout 或 scheduler.yield 让出主线程。
2. 优化事件处理程序：适当使用防抖和节流；避免繁重的同步工作。
3. 减少 JavaScript：代码分割、摇树优化，并延迟非关键脚本。
4. 对 CPU 密集型任务使用 Web Worker。

示例：使用 scheduler.yield 让出（在支持的情况下）：

async function handleClick() {
  // 做一些工作
  await scheduler.yield();
  // 让出后继续
}

改善 CLS

CLS 关乎视觉稳定性。当元素意外改变位置时会发生布局偏移。

1. 为图像和视频设置尺寸属性（宽度/高度）。
2. 为广告和嵌入内容预留空间：使用 CSS aspect-ratio 或固定尺寸。
3. 避免在现有内容上方插入内容，除非由用户交互触发。
4. 使用 transform 动画，而不是会触发布局的属性。

示例：使用 aspect-ratio 预留空间：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Core Web Vitals 对比

工具与工作流程

将性能监控集成到你的 CI/CD 管道中。使用 Lighthouse CI 捕获回归。对于现场数据，使用 web-vitals 和分析平台设置仪表板。

优化图像时，你可以在上传到网站之前使用我们的 图像压缩器 快速压缩它们。

常见问题

什么是 Core Web Vitals？

Core Web Vitals 是三个指标——LCP、INP 和 CLS——Google 用它们来衡量网页上的用户体验。

我应该多久测量一次 Core Web Vitals？

在现场通过分析持续测量，并在每次部署时使用 Lighthouse CI 在实验室中测量以捕获回归。

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

可以。许多改进，如图像优化、预加载和设置尺寸，都可以逐步完成，无需全面重新设计。

首先使用 Lighthouse 测量你当前的分数，然后处理影响最大的指标。小而持续的优化会带来用户体验和 SEO 的显著提升。