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

你已经构建了一个快速的网站，但用户仍然抱怨加载缓慢或交互卡顿。又或者你的 SEO 排名下降了，你怀疑是页面体验在作祟。Core Web Vitals 是 Google 用来量化用户体验的指标，它们直接影响搜索排名。本指南将带你通过实用、可操作的步骤来测量并改善它们。

什么是 Core Web Vitals？

Core Web Vitals 是 Google 用来评估网页用户体验的一组三项指标：

• Largest Contentful Paint (LCP)：衡量加载性能。它标记了最大的内容元素（例如图片、视频或文本块）变为可见的时间。良好的 LCP 为 2.5 秒或更短。
• First Input Delay (FID)：衡量交互性。它记录从用户首次与你的页面交互（例如点击链接）到浏览器能够响应的时间。良好的 FID 为 100 毫秒或更短。
• Cumulative Layout Shift (CLS)：衡量视觉稳定性。它量化页面加载过程中意外的布局偏移。良好的 CLS 为 0.1 或更小。

这些指标是 Google 页面体验信号的一部分，因此优化它们可以同时提升用户满意度和搜索排名。

如何测量 Core Web Vitals

在改善之前，你需要先测量。主要有两类工具：实验室工具（合成测试）和现场工具（真实用户监控）。

实验室工具

实验室工具在受控环境中模拟页面加载。它们非常适合在部署前进行调试和测试更改。

• Lighthouse：内置于 Chrome DevTools，可审核性能、可访问性和 SEO。它提供评分和具体的改进机会。
• WebPageTest：允许你从多个位置和设备进行测试，并提供高级指标和胶片视图。

现场工具

现场工具从真实用户收集数据，让你真实了解不同设备和网络下的性能表现。

• Chrome User Experience Report (CrUX)：来自 Chrome 的真实用户指标公开数据集。你可以在 PageSpeed Insights 或 BigQuery 中查看 CrUX 数据。
• Google Search Console：提供 Core Web Vitals 报告，显示你的页面基于 CrUX 数据的表现。
• Web Vitals JavaScript 库：你可以对你的网站进行埋点，将 Core Web Vitals 数据发送到你的分析平台。

首先在 Search Console 或 PageSpeed Insights 中检查你网站的 Core Web Vitals。然后使用 Lighthouse 调试特定页面。

改善 Largest Contentful Paint (LCP)

LCP 通常是最具优化影响的指标。以下是改善方法：

1. 优化图片

• 在不损失质量的情况下压缩图片。使用 Image Compressor 等工具减小文件大小。
• 使用 WebP 或 AVIF 等现代格式，它们比 JPEG 或 PNG 提供更好的压缩率。
• 使用 srcset 和 sizes 属性实现响应式图片，以提供尺寸合适的图片。
• 对首屏以下的图片进行懒加载，但避免对 LCP 图片进行懒加载。

2. 消除阻塞渲染的资源

• 压缩 CSS 和 JavaScript。
• 使用 defer 或 async 属性延迟非关键 JavaScript。
• 内联关键 CSS，异步加载其余部分。

3. 改善服务器响应时间

• 使用内容分发网络 (CDN) 从更靠近用户的位置提供资源。
• 为静态资源和 API 响应启用缓存。
• 优化数据库查询和服务器端代码。

4. 预加载重要资源

对字体、关键图片或较晚才被发现的关键脚本等资源使用 <link rel="preload">。

改善 First Input Delay (FID)

FID 衡量响应性。FID 高意味着主线程繁忙，无法及时响应用户输入。

1. 拆分长任务

长 JavaScript 任务会阻塞主线程。使用 setTimeout 或 requestIdleCallback 将它们拆分为更小的任务。

2. 优化 JavaScript 执行

• 移除未使用的 JavaScript（tree shaking）。
• 对打包文件进行代码拆分，以便初始只加载必要的代码。
• 使用 web workers 进行繁重计算。

3. 避免大型第三方脚本

分析或广告等第三方脚本可能阻塞主线程。异步加载它们，并考虑使用标签管理器来控制它们的触发时机。

4. 减少 JavaScript 启动时间

尽量减少页面加载时需要解析和执行的 JavaScript 数量。服务器端渲染或静态站点生成可以提供帮助。

改善 Cumulative Layout Shift (CLS)

CLS 衡量视觉稳定性。当元素意外改变位置时，就会发生布局偏移。

1. 始终为媒体包含尺寸属性

对于图片和视频，设置 width 和 height 属性，或使用 CSS aspect-ratio 来预留空间。

2. 为广告和嵌入内容预留空间

如果你有广告或 iframe 等动态内容，请使用占位符或固定尺寸为其预留空间。

3. 避免在现有内容上方插入内容

动态注入的内容（例如横幅、通知）会将现有内容向下推，从而导致偏移。使用覆盖层或预留空间。

4. 使用 font-display swap

自定义字体可能导致 FOIT（不可见文本闪烁）或 FOUT（无样式文本闪烁）。使用 font-display: swap 立即显示回退文本。

Core Web Vitals 指标对比

实际示例：为 LCP 优化图片

假设你的 LCP 元素是一张首屏主图。以下是优化方法：

<!-- Before: Unoptimized -->
<img src="#" alt="Hero">

<!-- After: Optimized -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">

使用 Image Compressor 将图片转换并压缩为 WebP。设置 fetchpriority="high" 告诉浏览器尽早加载它。指定尺寸以防止布局偏移。

随时间监控 Core Web Vitals

优化不是一次性任务。设置持续监控：

• 使用 web-vitals 库将指标发送到你的分析平台。
• 在 Search Console 中设置告警以监控回退。
• 在 CI/CD 流水线中定期使用 Lighthouse 进行审核。

常见问题

什么是 Core Web Vitals，它们为什么重要？

Core Web Vitals 是三项指标（LCP、FID、CLS），分别衡量加载、交互性和视觉稳定性。它们之所以重要，是因为它们反映了真实用户体验，并被 Google 用作排名信号。

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

在重大部署后检查，并通过现场数据持续监控。Search Console 提供月度报告，但你可以使用 web-vitals 库进行实时跟踪。

我可以在没有开发人员的情况下改善 Core Web Vitals 吗？

一些改进，例如压缩图片或使用 CDN，可以通过插件或工具完成。然而，更深入的优化通常需要更改代码。从图片压缩和缓存开始。

准备好改善你的 LCP 了吗？使用我们免费的 Image Compressor 压缩你的图片，在不损失质量的情况下减小文件大小。