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

Web2026-10-31TryQuickToolBox

你已经构建了一个快速的网站，但用户仍然抱怨速度慢。或者你的 SEO 排名在 Google 更新后下降了。罪魁祸首可能是 Core Web Vitals——Google 衡量用户体验的指标。在本指南中，你将了解它们是什么、如何测量以及改善它们的具体步骤。

什么是 Core Web Vitals？

Core Web Vitals 是三个特定的指标，量化用户体验的关键方面：加载、交互性和视觉稳定性。它们是 Google 页面体验排名信号的一部分。

最大内容绘制 (LCP)： 衡量加载性能。它标记了最大内容元素（图像、视频或文本块）变为可见的时间。目标是将 LCP 控制在 2.5 秒以内。
首次输入延迟 (FID)： 衡量交互性。它记录了从用户首次交互（例如点击链接）到浏览器响应的时间。目标是将 FID 控制在 100 毫秒以内。
累积布局偏移 (CLS)： 衡量视觉稳定性。它量化了页面加载过程中意外的布局偏移。目标是将 CLS 控制在 0.1 以内。

Google 还使用其他指标如首字节时间 (TTFB) 和首次内容绘制 (FCP) 作为诊断指标，但 LCP、FID 和 CLS 是核心的三个。

如何测量 Core Web Vitals

你可以通过两种方式测量这些指标：实验室（合成测试）和现场（真实用户监控）。两者都很有价值。

实验室测量

Lighthouse（内置于 Chrome DevTools）和 WebPageTest 等工具模拟页面加载并提供分数。它们非常适合调试，因为它们提供详细的诊断信息。

// 在 Chrome DevTools 中运行 Lighthouse：打开 DevTools → Lighthouse 标签 → 生成报告。
// 或使用 CLI：
// npm install -g lighthouse
// lighthouse https://example.com --view

现场测量

真实用户指标来自实际访问者。Chrome 用户体验报告 (CrUX) 为公共网站提供匿名数据。你也可以使用 JavaScript API 收集自己的现场数据。

// 示例：使用 web-vitals 库记录指标
import {onLCP, onFID, onCLS} from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

将这些指标发送到你的分析端点，以便随时间跟踪性能。

改善 LCP

LCP 通常是最有影响力的指标。要改善它，请关注最大的元素——通常是主视觉图像或标题。

优化图像： 压缩图像，使用 WebP 或 AVIF 等现代格式，并指定尺寸以避免布局偏移。图像压缩器等工具可以帮助减少文件大小而不损失质量。
预加载关键资源： 对 LCP 图像或字体使用 <link rel="preload">。
减少服务器响应时间： 使用 CDN、启用缓存并优化后端代码。TTFB 是 LCP 的一个组成部分。
消除阻塞渲染的资源： 延迟非关键的 CSS 和 JavaScript。

示例：预加载主视觉图像：

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

改善 FID

FID 衡量响应性。高 FID 意味着当用户尝试交互时主线程繁忙。

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

示例：延迟非关键 JavaScript：

<script src="#" defer></script>

改善 CLS

CLS 关乎视觉稳定性。意外的偏移会烦扰用户并导致误点击。

始终在图像和视频上包含宽度和高度属性。
为广告和嵌入内容预留空间： 使用 CSS aspect-ratio 或固定大小的容器。
避免在现有内容上方插入内容，除非是响应用户交互。
使用 CSS 变换进行动画，而不是触发布局的属性。

示例：为图像预留空间：

<img src="#" width="800" height="600" alt="...">

工具和工作流程

从实验室工具开始识别问题，然后用现场数据验证。以下是一个简单的工作流程：

在 Chrome DevTools 中运行 Lighthouse 获取基线。
修复最有影响的问题（通常是 LCP）。
部署更改并通过 CrUX 或你自己的 RUM 监控现场数据。
迭代：性能优化是持续的过程。

如需快速检查，请使用 PageSpeed Insights 等在线工具，它结合了实验室和现场数据。

常见问题

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

目前，Google 认为 LCP ≤ 2.5 秒、FID ≤ 100 毫秒和 CLS ≤ 0.1 为“良好”。这些阈值可能会变化，因此请查看 Google 的官方文档以获取更新。

Core Web Vitals 会直接影响 SEO 排名吗？

是的，它们是 Google 页面体验信号的一部分。然而，相关性和高质量内容仍然更重要。Core Web Vitals 是其他信号相等时的决胜因素或一个因素。