Core Web Vitals：衡量并提升网页性能
你已经构建了一个快速、现代的网站，但用户仍然抱怨速度慢，而且你的 SEO 排名也在下滑。罪魁祸首可能是 Core Web Vitals (CWV) —— 谷歌用于衡量用户体验的指标。在本指南中，你将学习如何通过实用、可操作的步骤来衡量并提升 LCP、INP 和 CLS。
什么是 Core Web Vitals？
Core Web Vitals 是三个量化真实用户体验的指标：
- 最大内容绘制 (LCP)： 主要内容加载的速度。目标：≤ 2.5 秒。
- 交互到下一次绘制 (INP)： 页面响应用户输入的速度。目标：≤ 200 毫秒。
- 累积布局偏移 (CLS)： 布局意外偏移的程度。目标：≤ 0.1。
这些指标是谷歌页面体验信号的一部分，直接影响 SEO 和用户满意度。
如何衡量 Core Web Vitals
衡量分为两类：字段数据（真实用户监控）和实验室数据（合成测试）。两者都很有价值。
字段工具（真实用户数据）
- Chrome 用户体验报告 (CrUX)： 真实用户指标的公开数据集。可通过 PageSpeed Insights 或 CrUX API 访问。
- Google Search Console： Core Web Vitals 报告显示你网站的组级性能。
- web-vitals 库： 一个小型 JavaScript 库，用于在你自己的分析中捕获指标。
实验室工具（合成测试）
- Lighthouse： 内置于 Chrome DevTools，可审核性能并提供改进机会。
- PageSpeed Insights： 结合实验室和字段数据，针对单个 URL。
- WebPageTest： 具有自定义网络条件和设备模拟的高级测试。
使用字段数据了解实际用户体验，使用实验室数据进行调试和迭代。
提升 LCP：让主要内容加载更快
LCP 通常是最具影响力的指标。以下是优化方法：
- 优化图像： 压缩图像，使用现代格式（WebP、AVIF），并通过
srcset提供响应式尺寸。像 Image Compressor 这样的工具可以帮助减少文件大小而不产生可见的质量损失。 - 预加载关键资源： 对英雄图像、字体和关键 CSS 使用
<link rel="preload">。 - 减少服务器响应时间： 使用 CDN，启用缓存，并优化后端查询。
- 消除渲染阻塞资源： 内联关键 CSS，延迟非关键 JavaScript，并异步加载 CSS。
- 使用内容分发网络 (CDN)： 从靠近用户的位置提供资源。
提升 INP：让交互感觉即时
INP 衡量从用户输入（点击、轻触、按键）到下一次视觉更新的时间。要改善它：
- 分解长任务： 使用
setTimeout或requestIdleCallback让出主线程。 - 优化事件处理程序： 对滚动和调整大小等快速触发的事件进行防抖或节流。
- 减少 JavaScript 执行时间： 代码分割、摇树优化，并延迟加载非关键脚本。
- 使用 Web Worker： 将繁重计算转移到后台线程。
- 最小化第三方脚本： 审核并移除不必要的分析、广告或小部件。
提升 CLS：保持布局稳定
CLS 在元素意外偏移时发生。通过以下方式防止：
- 始终为图像和视频设置宽度和高度： 这可以预留空间并防止重排。
- 为广告和嵌入内容预留空间： 使用 CSS
aspect-ratio或固定尺寸容器。 - 避免在现有内容上方插入内容： 除非是响应用户交互。
- 使用
font-display: swap： 确保字体加载期间文本保持可见，但要注意它可能导致轻微偏移；对于关键文本，考虑使用font-display: optional。 - 预加载字体： 减少因字体延迟加载导致布局偏移的可能性。
Core Web Vitals 指标对比
| 指标 | 衡量内容 | 良好目标 | 得分差的常见原因 |
|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5 秒 | 服务器慢、渲染阻塞资源、大图像 |
| INP | 响应性 | ≤ 200 毫秒 | 长任务、繁重 JavaScript、低效事件处理程序 |
| CLS | 视觉稳定性 | ≤ 0.1 | 无尺寸图像、动态内容注入、Web 字体 |
持续改进的工具和工作流程
优化 CWV 不是一次性任务。将这些实践集成到你的工作流程中：
- 设置真实用户监控： 使用
web-vitals库将指标发送到你的分析平台。 - 在 CI 中运行 Lighthouse： 使用 Lighthouse CI 在部署前捕获回归。
- 使用 Search Console 监控： 定期检查 Core Web Vitals 报告。
- 在真实设备上测试： 模拟器很有用，但真实设备能揭示真实性能。
- 迭代和衡量： 一次进行一项更改并衡量其影响。
请记住，改善 Core Web Vitals 通常涉及优化资源。对于图像，考虑在上传前使用 Image Compressor 来减小文件大小。
常见问题
什么是 Core Web Vitals，为什么它们很重要？
Core Web Vitals 是三个指标（LCP、INP、CLS），用于衡量加载、交互性和视觉稳定性。它们很重要，因为它们反映了真实用户体验，并被谷歌用作排名信号。
我应该多久衡量一次 Core Web Vitals？
持续进行。设置真实用户监控以获取持续数据，并在开发和发布前运行实验室测试（例如 Lighthouse）以捕获回归。
没有开发人员，我能改善 Core Web Vitals 吗？
一些改进，如压缩图像或通过插件启用缓存，可以由非开发人员完成。但是，更深入的优化（例如减少 JavaScript、优化关键渲染路径）通常需要开发人员参与。
准备好优化你的图像以获得更好的 LCP 了吗？试试我们的免费 Image Compressor，在不损失质量的情况下减小文件大小。