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

你已经构建了一个快速的网站，但用户仍然抱怨速度慢，而且你的搜索排名也不尽如人意。问题出在哪？你没有衡量正确的指标。Core Web Vitals（CWV）是 Google 用于衡量真实用户体验的指标：最大内容绘制（LCP）、交互到下一次绘制（INP）和累积布局偏移（CLS）。如果你忽视它们，就会在性能和 SEO 上错失良机。

本指南将向你展示如何准确衡量 CWV 并修复最常见的问题。没有废话，只有可操作的步骤。

什么是 Core Web Vitals？

Core Web Vitals 是三个具体的指标，用于量化用户对加载、交互性和视觉稳定性的感知：

• LCP 衡量加载性能。它标记最大的内容元素（图像、视频、文本块）何时变为可见。目标值 ≤ 2.5 秒。
• INP 衡量响应能力。它记录所有交互（点击、轻触、按键）的延迟，并报告一个高百分位值。目标值 ≤ 200 毫秒。
• CLS 衡量视觉稳定性。它计算意外的布局偏移。目标值 ≤ 0.1。

这些阈值基于 Chrome 用户体验报告（CrUX）中的真实用户数据。达到这些阈值可以提高用户满意度，并可能提升搜索排名。

如何衡量 Core Web Vitals

你需要实验室数据和现场数据。实验室工具模拟条件；现场数据反映真实用户。

实验室工具

• Lighthouse（在 Chrome DevTools 或 CI 中）提供带有诊断信息的快照。
• PageSpeed Insights 结合了某个 URL 的实验室和现场数据。
• Web Vitals 扩展程序 在你浏览时在 Chrome 控制台中记录 CWV。

现场工具

• Chrome UX 报告（CrUX） 显示数百万网站的真实用户汇总数据。
• web-vitals JavaScript 库 允许你从自己的用户那里收集 CWV 并发送到分析平台。
• Search Console 根据 CrUX 报告你网站的 CWV 状态。

从现场数据开始，找出有问题的页面，然后使用实验室工具进行调试。

改善 LCP

LCP 通常是最容易通过一些有针对性的修复来改善的。

1. 优化图片。 使用现代格式（WebP、AVIF），在无明显质量损失的情况下压缩，并设置明确的宽度/高度。像 Image Compressor 这样的工具可以帮助减小文件大小。
2. 预加载 LCP 图片。 在 head 中添加 <link rel="preload" as="image" href="#">。
3. 消除渲染阻塞资源。 内联关键 CSS，延迟非关键 CSS/JS，并避免在 head 中使用同步脚本。
4. 使用 CDN。 从靠近用户的位置提供资源，以减少延迟。
5. 启用文本压缩。 对 HTML、CSS、JS 使用 Brotli 或 gzip。

预加载 LCP 图片的示例：

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

改善 INP

INP 衡量你的页面响应用户输入的速度。长任务会阻塞主线程并延迟交互。

1. 拆分长任务。 使用 setTimeout 或 requestIdleCallback 让出主线程。
2. 优化事件处理程序。 对滚动和调整大小等高频事件进行防抖或节流。
3. 减少 JavaScript。 代码分割、摇树优化，并延迟加载非关键脚本。
4. 使用 Web Worker 进行繁重计算。
5. 避免过大的 DOM 尺寸。 如果可能，将 DOM 保持在 1500 个节点以下。

让出主线程的示例：

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

改善 CLS

当元素意外改变位置时，就会发生布局偏移。常见原因：没有尺寸的图片、广告、嵌入内容和动态注入的内容。

1. 始终为图片和视频设置宽度和高度。 这可以让浏览器预留空间。
2. 为广告和嵌入内容预留空间。 使用 CSS aspect-ratio 或固定容器。
3. 避免在现有内容上方插入内容，除非是由用户交互触发的。
4. 使用 font-display: swap 并预加载字体，以避免不可见文本偏移。
5. 小心使用动画。 使用 transform 和 opacity，而不是会触发布局的属性。

监控与持续改进

性能不是一次性的修复。设置监控以捕捉回归。

• 使用 web-vitals 库将 CWV 发送到你的分析平台：

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。
• 每月查看 CrUX 数据以跟踪趋势。

Core Web Vitals 对比

FAQ

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

LCP：良好 ≤ 2.5s，需要改进 ≤ 4.0s，差 > 4.0s。INP：良好 ≤ 200ms，需要改进 ≤ 500ms，差 > 500ms。CLS：良好 ≤ 0.1，需要改进 ≤ 0.25，差 > 0.25。

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

通过分析平台持续监控现场数据。每月查看 CrUX 和 Search Console。在每次重大代码更改时运行实验室测试（Lighthouse）。

没有开发人员，我能改善 Core Web Vitals 吗？

一些修复，如压缩图片或启用缓存，可以通过插件或托管设置完成。但更深入的优化（代码分割、减少 JS）通常需要开发人员参与。

准备好优化你的图片以获得更好的 LCP 了吗？试试我们免费的 Image Compressor，在不损失质量的情况下减小文件大小。