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

用户期望快速、流畅的体验。Google 的 Core Web Vitals (CWV) 量化了这种体验：最大内容绘制 (LCP)、首次输入延迟 (FID) 和累积布局偏移 (CLS)。评分不佳会影响 SEO 和转化率。本指南将展示如何通过可操作的步骤测量并改善每个指标。

什么是 Core Web Vitals？

Core Web Vitals 是 Google 用作排名信号的三个以用户为中心的指标：

• LCP：最大的内容元素（图像、文本块）变为可见所需的时间。良好：≤2.5 秒。
• FID：从首次用户交互（点击、轻触）到浏览器响应的时间。良好：≤100 毫秒。
• CLS：视觉稳定性——页面布局意外偏移的程度。良好：≤0.1。

这些指标反映了真实世界的用户体验，而不仅仅是实验室条件。改善它们能让你的网站感觉更快、更稳定。

如何测量 Core Web Vitals

你需要实验室数据和现场数据。实验室工具有助于调试；现场数据（真实用户监控）显示实际性能。

实验室工具

• Lighthouse（在 Chrome DevTools 中）：运行性能、可访问性和 SEO 审计。它会报告 LCP、CLS 和 TBT（FID 的代理指标）。
• WebPageTest：使用胶片条和水fall 图进行高级测试。
• Chrome DevTools 性能面板：记录并分析运行时性能。

现场工具

• Chrome 用户体验报告 (CrUX)：数百万网站的真实用户指标公开数据集。
• Google Search Console：Core Web Vitals 报告显示需要关注的 URL 组。
• web-vitals JavaScript 库：收集真实用户指标并发送到你的分析平台。

使用现场数据识别问题页面，然后使用实验室工具诊断并修复。

改善最大内容绘制 (LCP)

LCP 通常是主图或主标题。要加速它：

1. 优化图像：压缩、使用现代格式（WebP、AVIF）并提供响应式尺寸。像 Image Compressor 这样的工具可以帮助减少文件大小而不损失质量。
2. 预加载关键资源：对主图、字体和关键 CSS 使用 <link rel="preload">。
3. 减少服务器响应时间：使用缓存、CDN 并优化后端查询。
4. 消除渲染阻塞资源：延迟非关键 JS 和 CSS，内联关键 CSS。
5. 使用 CDN：从靠近用户的位置提供资源。

示例：预加载你的 LCP 图像：

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

改善首次输入延迟 (FID)

FID 衡量响应能力。长时间延迟意味着主线程繁忙。要改善：

• 分解长任务：使用 setTimeout 或 requestIdleCallback 让出主线程。
• 优化 JavaScript：代码分割、tree-shaking 并延迟非关键脚本。
• 减少第三方影响：异步加载分析代码和广告，或在交互后加载。
• 使用 Web Worker 进行繁重计算。

还要考虑 Interaction to Next Paint (INP)，它将在 2024 年 3 月取代 FID。INP 衡量整个页面生命周期内的整体响应能力。同样的优化措施适用。

改善累积布局偏移 (CLS)

CLS 发生在元素意外移动时。常见原因：没有尺寸的图像、广告、字体和动态内容。修复方法：

• 始终为图像和视频设置宽度和高度，或使用 CSS aspect-ratio。
• 为广告和嵌入内容预留空间：使用固定尺寸的占位元素。
• 避免在现有内容上方插入内容，除非是响应用户交互。
• 使用 font-display: swap 并预加载字体，以避免不可见文本 (FOIT) 和布局偏移。
• 使用 transform 进行动画，而不是触发布局的属性。

示例：为响应式图像设置宽高比：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

工具与工作流程

将性能集成到你的开发工作流程中：

1. 在 CI 中运行 Lighthouse 以捕获回归。
2. 使用 web-vitals 库将现场数据发送到你的分析平台。
3. 监控 CrUX 和 Search Console 以了解真实用户趋势。
4. 按影响优先修复：通常 LCP 和 CLS 收益最大。

如需快速优化图像，试试我们的 Image Compressor 来减小 LCP 关键图像。

FAQ

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

LCP：良好 ≤2.5 秒，需要改进 ≤4 秒，差 >4 秒。FID：良好 ≤100 毫秒，需要改进 ≤300 毫秒，差 >300 毫秒。CLS：良好 ≤0.1，需要改进 ≤0.25，差 >0.25。

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

通过 RUM 持续监控现场数据。在每次重大代码更改时运行实验室审计，并至少每月一次以捕获回归。

改善 Core Web Vitals 真的会影响 SEO 吗？

是的，Google 将页面体验（包括 CWV）作为排名信号。虽然内容仍然是首要的，但良好的 CWV 可以给你带来优势并提高用户满意度。