Core Web Vitals：测量并提升网页性能
你的用户没有耐心。如果页面加载时间过长，或者在他们试图阅读时内容跳动，他们就会离开。Google 深知这一点，其排名算法使用 Core Web Vitals 来衡量真实用户体验。但除了 SEO，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 以内。
这些阈值基于真实用户的现场数据，而非实验室测试。这就是为什么正确测量至关重要。
如何测量 Core Web Vitals
你需要实验室数据和现场数据。实验室工具帮助你调试；现场数据反映真实用户体验。
现场工具（真实用户监控）
- Chrome User Experience Report (CrUX)：Google 的真实用户指标公开数据集。可在 PageSpeed Insights 或 Search Console 中查看。
- PageSpeed Insights：显示某个 URL 的实验室（Lighthouse）和现场（CrUX）数据。
- Search Console Core Web Vitals 报告：按状态和指标对 URL 进行分组。
- Web Vitals JavaScript 库：通过
web-vitals库收集你自己的现场数据并发送到你的分析平台。
实验室工具（合成测试）
- Lighthouse：内置于 Chrome DevTools。提供实验室指标和优化机会。
- WebPageTest：提供胶片带和水瀑布图等高级测试。
- Chrome DevTools Performance 面板：深入分析运行时性能。
从 PageSpeed Insights 开始获取快速概览，然后使用 DevTools 调试具体问题。
提升 LCP：让主要内容加载更快
LCP 通常是最具影响力的修复指标。LCP 不佳的常见原因包括服务器响应慢、渲染阻塞资源以及未优化的图片。
- 优化图片：压缩图片，使用 WebP 或 AVIF 等现代格式，并通过
srcset提供响应式图片。像 Image Compressor 这样的工具可以帮助减小文件大小而不造成可见的质量损失。 - 预加载 LCP 图片：为英雄图片添加
<link rel="preload">，让它更早开始加载。 - 减少服务器响应时间：使用 CDN、启用缓存并优化后端查询。对于 Nginx，考虑使用 fastcgi_cache 或 proxy_cache。
- 消除渲染阻塞资源：内联关键 CSS，延迟非关键 CSS 和 JavaScript。
- 使用内容分发网络（CDN）：从更靠近用户的位置提供资源。
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Responsive images -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">
提升 INP：让交互感觉即时
INP 于 2024 年 3 月取代了 First Input Delay (FID)。它衡量交互的完整持续时间，而不仅仅是处理前的延迟。要提升 INP，你需要减少 JavaScript 执行时间并避免长任务。
- 拆分长任务：使用
setTimeout或requestIdleCallback让出主线程。 - 优化事件处理器：对昂贵的处理器进行防抖或节流，并避免布局抖动。
- 减小 JavaScript 包体积：代码分割、tree-shaking，并懒加载非关键脚本。
- 使用 Web Workers：将繁重计算移出主线程。
- 最小化第三方脚本：它们经常阻塞主线程。异步加载或延迟加载它们。
使用 DevTools 中的 Performance 面板记录交互并识别长任务。
提升 CLS：保持布局稳定
CLS 发生在元素意外移动时。常见罪魁祸首是没有尺寸的图片、广告、嵌入内容和动态注入的内容。
- 始终为图片和视频设置 width 和 height 属性：这允许浏览器预留空间。
- 为广告和嵌入内容预留空间：使用 CSS
aspect-ratio或固定尺寸容器。 - 避免在现有内容上方插入内容：如果必须这样做，请在用户交互时进行。
- 谨慎使用
font-display: swap：如果字体度量不同，swap 可能导致布局偏移。考虑使用font-display: optional或预加载字体。 - 动画坚持使用 CSS transforms：它们不会触发布局偏移。
<!-- Reserve space with aspect-ratio -->
<img src="#" width="800" height="600" alt="...">
Core Web Vitals 指标对比
| 指标 | 衡量内容 | 良好阈值 | 常见修复 |
|---|---|---|---|
| LCP | 加载性能 | < 2.5秒 | 优化图片、预加载、CDN |
| INP | 响应性 | < 200毫秒 | 拆分长任务、减少 JS |
| CLS | 视觉稳定性 | < 0.1 | 设置尺寸、预留空间 |
监控与持续改进
提升 Core Web Vitals 不是一次性任务。部署修复后，监控现场数据以确保不会出现回归。在 RUM 工具中设置警报，当指标超过阈值时触发。定期在 CI 中运行 Lighthouse，以在生产环境之前捕获性能回归。
记住，性能是一种功能。通过优先考虑 Core Web Vitals，你提供更好的体验，让用户保持参与并提升搜索排名。
常见问题
Core Web Vitals 当前的阈值是什么？
对于 LCP，良好是低于 2.5 秒，需要改进是 2.5–4.0 秒，差是超过 4.0 秒。对于 INP，良好是低于 200 毫秒，需要改进是 200–500 毫秒，差是超过 500 毫秒。对于 CLS，良好是低于 0.1，需要改进是 0.1–0.25，差是超过 0.25。
我应该多久测量一次 Core Web Vitals？
CrUX 中的现场数据每天更新，但它是 28 天滚动平均值。你应该持续监控，并在每次重大代码更改后运行实验室测试。在 CI/CD 管道中设置自动化 Lighthouse 运行，以尽早捕获回归。
没有开发人员我能提升 Core Web Vitals 吗？
一些修复，如压缩图片或启用缓存，可以通过插件或托管设置完成。然而，更深入的优化，如代码分割或消除渲染阻塞资源，通常需要开发人员参与。根据你的现场数据，优先处理影响最大的指标。
准备好优化图片以获得更好的 LCP 了吗？试试我们免费的 Image Compressor，在不损失质量的情况下减小文件大小。