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

你构建了一个现代 Web 应用，但用户抱怨它感觉起来很慢。搜索排名在下滑，而你却不知道原因。罪魁祸首可能是糟糕的 Core Web Vitals——Google 用于评估用户体验的指标。在本指南中，你将了解它们是什么、如何测量，以及最重要的是，如何通过可操作的步骤来改善它们。

什么是 Core Web Vitals？

Core Web Vitals 是 Google 用来评估网页用户体验的一组具体指标。它们关注加载、交互性和视觉稳定性：

• Largest Contentful Paint (LCP)：衡量加载性能。最大的内容元素（例如主视觉图、标题）变为可见所需的时间。良好：≤ 2.5 秒。
• First Input Delay (FID)：衡量交互性。从用户首次交互（例如点击按钮）到浏览器能够响应的时间。良好：≤ 100 毫秒。
• Cumulative Layout Shift (CLS)：衡量视觉稳定性。量化加载过程中意外的布局偏移。良好：≤ 0.1。

这些指标是 Google 页面体验信号的一部分，可能会影响搜索排名。但更重要的是，它们反映了真实用户的满意度。

如何测量 Core Web Vitals

你需要实验室数据和现场数据才能获得完整情况。实验室数据（合成）有助于调试问题，而现场数据（真实用户监控）显示实际性能。

实验室工具

• Lighthouse：内置于 Chrome DevTools。运行审计以获取分数和优化机会。
• PageSpeed Insights：结合某个 URL 的实验室数据和现场数据。
• WebPageTest：使用自定义位置和设备进行高级测试。

现场工具

• Chrome User Experience Report (CrUX)：真实用户指标的公开数据集。可通过 PageSpeed Insights 或 BigQuery 访问。
• web-vitals JavaScript 库：添加到你的网站以收集真实用户指标并发送到你的分析平台。
• Search Console：Core Web Vitals 报告基于 CrUX 数据显示分组性能。

以下是如何使用 web-vitals 库记录指标：

import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

改善 LCP

LCP 通常是最具挑战性的指标。重点关注以下方面：

1. 优化图片：压缩图片，使用 WebP 或 AVIF 等现代格式，并通过 srcset 提供响应式图片。对屏幕外图片进行懒加载。
2. 预加载关键资源：对主视觉图、字体和关键 CSS 使用 <link rel="preload">。
3. 减少服务器响应时间：使用 CDN、启用缓存并优化后端代码。
4. 消除阻塞渲染的资源：内联关键 CSS，延迟非关键 JS，并避免大型 CSS 文件。
5. 使用 CDN：从更接近用户的边缘位置提供资源。

改善 FID

FID 关乎响应性。长任务会阻塞主线程，延迟交互性。

1. 拆分长任务：使用 setTimeout 或 requestIdleCallback 让出主线程。
2. 优化 JavaScript：进行代码分割、tree-shaking，并延迟非关键脚本。
3. 使用 Web Worker：将繁重计算移出主线程。
4. 减少第三方影响：审计并限制第三方脚本。

改善 CLS

CLS 是由加载过程中元素偏移引起的。通过以下方式防止它：

1. 始终为图片和视频包含 width 和 height 属性。这会预留空间。
2. 为广告和嵌入内容预留空间：使用 CSS aspect-ratio 或固定容器。
3. 避免在现有内容上方插入内容：除非是响应用户交互。
4. 使用 CSS transforms 进行动画：而不是会触发布局的属性。
5. 预加载字体：使用 font-display: swap 以避免不可见文本和布局偏移。

Core Web Vitals 指标对比

改善 Core Web Vitals 的实用工作流

遵循以下分步流程：

1. 测量：使用 PageSpeed Insights 获取实验室数据和现场数据的基线。
2. 识别问题：查看 Lighthouse 中的优化机会和诊断信息。
3. 确定优先级：先关注得分最差的指标。
4. 实施修复：应用上面列出的优化措施。
5. 测试：部署后重新运行 Lighthouse 并检查现场数据。
6. 监控：使用 web-vitals 库设置真实用户监控并长期跟踪。

常见问题

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

对于 LCP，良好为 ≤ 2.5s，需要改进为 ≤ 4s，较差为 > 4s。对于 FID，良好为 ≤ 100ms，需要改进为 ≤ 300ms，较差为 > 300ms。对于 CLS，良好为 ≤ 0.1，需要改进为 ≤ 0.25，较差为 > 0.25。

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

持续监控现场数据，并在重大更改后运行实验室测试。Google 每月更新 CrUX 数据，因此请定期检查 Search Console。

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

一些修复（如图片压缩）可以使用工具完成，但许多需要更改代码。如果你使用 WordPress 等 CMS，可以考虑使用性能优化插件。

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