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

你的网站能加载，但用户仍然跳出。加载缓慢、意外的布局偏移和无响应的交互会让访客感到沮丧，并损害你的搜索排名。Core Web Vitals（CWV）是 Google 衡量用户体验的指标，直接影响 SEO。本指南向你展示如何通过可操作的步骤来测量并改善它们。

什么是 Core Web Vitals？

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

• 最大内容绘制 (LCP)： 测量加载性能。最大的内容元素（图片、文本块、视频）变为可见所需的时间。良好：≤ 2.5秒。
• 首次输入延迟 (FID)： 测量交互性。从用户首次交互（点击、轻触、按键）到浏览器响应的时间。良好：≤ 100毫秒。
• 累积布局偏移 (CLS)： 测量视觉稳定性。量化页面加载过程中意外的布局偏移。良好：≤ 0.1。

这些指标是 Google 页面体验信号的一部分，影响搜索排名。它们也反映真实的用户体验，因此改善它们既有利于 SEO，也有利于用户满意度。

如何测量 Core Web Vitals

你需要现场数据（真实用户测量）和实验室数据（合成测试）。两者结合使用以获得完整视图。

现场数据工具

• Chrome 用户体验报告 (CrUX)： 真实用户指标的公开数据集。可通过 PageSpeed Insights、Search Console 或 BigQuery 访问。
• PageSpeed Insights： 显示 URL 的现场数据（如果有）和实验室数据。
• Search Console Core Web Vitals 报告： 按状态（差、需要改进、良好）对 URL 进行分组。
• web-vitals JavaScript 库： 使用 import {onLCP, onFID, onCLS} from 'web-vitals'; 收集你自己的现场数据，并发送到你的分析端点。

实验室数据工具

• Lighthouse： 内置于 Chrome DevTools。运行性能、可访问性和 SEO 审计。提供实验室指标和改进机会。
• WebPageTest： 使用自定义网络条件和瀑布图进行高级测试。
• Chrome DevTools 性能面板： 记录运行时性能以识别长任务和渲染问题。

改善最大内容绘制 (LCP)

LCP 通常是最具影响力的指标。优化关键渲染路径和最大元素。

1. 优化最大元素

• 如果 LCP 是图片：压缩它，使用现代格式（WebP、AVIF），并设置 width 和 height 属性以避免布局偏移。
• 预加载 LCP 图片：<link rel="preload" as="image" href="#">。
• 使用带有 srcset 和 sizes 的响应式图片。
• 如果 LCP 是文本：确保字体快速加载。使用 font-display: swap 并预加载关键字体。

2. 消除阻塞渲染的资源

• 内联关键 CSS，延迟非关键 CSS。
• 延迟或异步加载 JavaScript：<script src="#" defer></script>。
• 压缩 CSS 和 JavaScript。

3. 改善服务器响应时间

• 使用 CDN 从更靠近用户的位置提供资源。
• 启用缓存（HTTP 缓存头、Service Worker）。
• 优化后端性能（数据库查询、服务器端缓存）。

4. 减少负载大小

• 压缩图片并对首屏以下的图片使用懒加载。
• 移除未使用的 JavaScript 和 CSS。
• 使用代码分割仅加载必要的代码。

改善首次输入延迟 (FID)

FID 测量响应性。长 JavaScript 任务阻塞主线程，延迟交互处理。

1. 分解长任务

使用 setTimeout 或 requestIdleCallback 让出主线程。或在支持的情况下使用 scheduler.yield()。

// 示例：在一段工作后让出主线程
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    // 处理项目
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

2. 优化事件处理器

• 对高频事件（滚动、调整大小、输入）进行防抖或节流。
• 对触摸和滚轮事件使用被动事件监听器：element.addEventListener('touchstart', handler, {passive: true});。
• 避免在事件处理器中执行繁重工作；转移到 Web Worker。

3. 减少 JavaScript 执行时间

• 代码分割并懒加载非关键 JavaScript。
• 移除未使用的依赖。
• 使用 tree-shaking 和压缩。

改善累积布局偏移 (CLS)

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

1. 始终包含尺寸属性

对于图片和视频，设置 width 和 height（或使用 aspect-ratio CSS），以便浏览器预留空间。

2. 为动态内容预留空间

• 对于广告、嵌入内容或动态内容，使用固定尺寸的占位符。
• 除非响应用户交互，否则避免在现有内容上方插入内容。

3. 使用变换动画

动画优先使用 CSS transform 和 opacity；它们不会触发布局偏移。

4. 谨慎加载字体

使用 font-display: optional 或 swap 以避免不可见文本和布局偏移。预加载关键字体。

持续改进的工具和工作流程

性能是持续的工作。将测量集成到你的开发流程中。

• 在流水线中使用 Lighthouse CI 捕获回归。
• 通过 web-vitals 和分析工具监控现场数据。
• 设置性能预算并在违规时告警。

如需快速检查，使用 TryQuickToolBox 的 Nginx 日志分析器 发现可能影响 LCP 的慢服务器响应。

常见问题

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

LCP：良好 ≤ 2.5秒，需要改进 ≤ 4秒，差 > 4秒。FID：良好 ≤ 100毫秒，需要改进 ≤ 300毫秒，差 > 300毫秒。CLS：良好 ≤ 0.1，需要改进 ≤ 0.25，差 > 0.25。这些是在页面加载的第75百分位数上评估的。

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

通过分析工具和 Search Console 持续监控现场数据。在每次重大代码更改时运行实验室测试，并至少每月进行基线检查。

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

是的，Google 将页面体验信号（包括 Core Web Vitals）作为排名因素。虽然内容仍然是首要的，但良好的 CWV 可以给你优势，尤其是在竞争激烈的领域。

准备好优化了吗？首先使用 PageSpeed Insights 测量你当前的分数，然后解决最大的机会。如需快速服务器端检查，试试我们的 Nginx 日志分析器 来识别可能损害你 LCP 的慢后端响应。