Core Web Vitals：衡量并提升网页性能
用户期望快速、流畅的体验。如果网站感觉缓慢，他们就会离开——搜索引擎也会注意到。Core Web Vitals 是量化真实用户体验的指标：加载速度、交互性和视觉稳定性。本指南展示如何衡量它们并进行实际改进。
什么是 Core Web Vitals？
Core Web Vitals 是 Google 定义的一组三个指标，用于捕捉用户体验的关键方面：
- Largest Contentful Paint (LCP)：衡量加载性能。它标记最大内容元素（通常是主图或标题）变为可见的时间。目标 LCP 低于 2.5 秒。
- Interaction to Next Paint (INP)：衡量响应性。它记录从用户交互（点击、轻触、按键）到下一次视觉更新的时间。目标 INP 低于 200 毫秒。
- Cumulative Layout Shift (CLS)：衡量视觉稳定性。它量化加载过程中的意外布局偏移。目标 CLS 低于 0.1。
这些阈值基于真实用户的现场数据（第 75 百分位）。实验室数据有助于诊断问题，但现场数据反映实际体验。
如何衡量 Core Web Vitals
你需要现场数据和实验室数据。现场数据展示真实用户性能；实验室数据让你调试和测试更改。
现场数据工具
- Chrome UX Report (CrUX)：数百万网站的聚合真实用户数据。通过 PageSpeed Insights、Search Console 或 CrUX API 访问。
- web-vitals JavaScript 库：通过将指标发送到分析端点来收集自己的现场数据。
实验室数据工具
- Lighthouse：内置于 Chrome DevTools，运行审计并提供改进机会。
- WebPageTest：高级测试，具有网络节流和胶片条。
- Chrome DevTools 性能面板：深入分析运行时性能。
从 PageSpeed Insights 开始：它显示 URL 的现场和实验室数据。然后本地使用 Lighthouse 进行迭代。
改善 LCP
LCP 通常是最有影响力需要修复的指标。最大元素通常是图像或文本块。优化这些区域：
- 优化 LCP 图像：压缩它，提供 WebP 或 AVIF 等现代格式，并设置显式尺寸。
- 预加载 LCP 资源：对首屏使用的图像或字体使用
<link rel="preload">。 - 消除渲染阻塞资源：内联关键 CSS，延迟非关键 CSS 和 JavaScript。
- 使用 CDN：从靠近用户的位置提供资源。
- 减少服务器响应时间：优化后端，使用缓存，并考虑边缘渲染。
示例：预加载主图：
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">改善 INP
INP 衡量响应性。长任务阻塞主线程并延迟视觉反馈。常见修复：
- 分解长任务：使用
setTimeout或scheduler.yield()让出主线程。 - 优化事件处理程序：对快速事件进行防抖或节流，避免繁重的同步工作。
- 减少 JavaScript：代码分割、tree-shaking，并延迟非关键脚本。
- 使用 Web Worker 处理 CPU 密集型任务。
- 避免大型 DOM 更新：批量 DOM 更改并使用 requestAnimationFrame。
使用 web-vitals 库测量 INP，并在性能面板中识别慢交互。
改善 CLS
当元素意外改变位置时会发生布局偏移。通过以下方式防止它们：
- 在图像和视频上设置尺寸属性（宽度和高度）。
- 使用 CSS
aspect-ratio或固定容器为广告和嵌入内容预留空间。 - 避免在现有内容上方插入内容，除非响应用户交互。
- 使用 font-display: swap 并预加载字体以最小化 FOIT/FOUT 偏移。
- 使用 transform 进行动画，而不是触发布局的属性。
快速比较：指标和目标
| 指标 | 衡量内容 | 良好目标 | 常见修复 |
|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5 秒 | 优化图像、预加载、CDN |
| INP | 响应性 | ≤ 200 毫秒 | 分解长任务、减少 JS |
| CLS | 视觉稳定性 | ≤ 0.1 | 设置尺寸、预留空间 |
监控和迭代
性能不是一次性修复。设置持续监控：
- 使用 web-vitals 库将指标发送到分析。
- 使用 Lighthouse CI 在 CI/CD 管道中设置回归警报。
- 定期查看 Search Console 中的现场数据。
记住，改进应通过真实用户数据验证，而不仅仅是实验室分数。
常见问题
什么是 Core Web Vitals，为什么它们重要？
Core Web Vitals 是以用户为中心的性能指标（LCP、INP、CLS），衡量加载、交互性和视觉稳定性。它们重要是因为它们与用户体验相关，并被 Google 用作排名信号。
我应该多久检查一次 Core Web Vitals？
每月检查现场数据，并在重大发布后检查。在开发过程中使用实验室工具及早发现回归。使用真实用户指标进行持续监控是理想的。
我可以在不重建网站的情况下改善 Core Web Vitals 吗？
是的。许多改进——如图像优化、预加载关键资源、延迟脚本和设置元素尺寸——可以逐步应用，而无需完全重新设计。
需要快速压缩图像以获得更好的 LCP？尝试我们的免费 图像压缩器，在不损失质量的情况下减小文件大小。