Core Web Vitals：测量与提升网页性能
为什么核心网页指标很重要
你已经构建了一个快速的网站，但用户仍然抱怨加载慢或交互卡顿。如果你的核心网页指标（CWV）分数较差，搜索引擎也可能降低你的排名。CWV是Google用来量化用户体验的一组指标：最大内容绘制（LCP）、首次输入延迟（FID）和累积布局偏移（CLS）。2021年，Google将这些指标作为排名因素，因此忽视它们可能会损害你的SEO和用户留存。
本指南解释了如何测量每个指标、识别常见问题并应用实用的修复方法。我们将专注于你今天就可以采取的可操作步骤，而不深入探讨每一个边缘情况。
理解三个核心网页指标
在优化之前，了解每个指标衡量什么及其阈值。
| 指标 | 衡量内容 | 良好 | 需要改进 | 差 |
|---|---|---|---|---|
| LCP | 加载性能：最大内容元素渲染所需的时间。 | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | 交互性：从首次用户交互到浏览器响应的时间。 | ≤ 100毫秒 | 100毫秒 – 300毫秒 | > 300毫秒 |
| CLS | 视觉稳定性：意外的布局偏移。 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
注意：FID将在2024年3月被交互到下一次绘制（INP）取代，但优化原则相似。这里我们仍关注FID，因为它仍被广泛引用。
如何测量核心网页指标
你需要实验室数据和现场数据。实验室数据（合成）有助于调试；现场数据（真实用户）显示实际性能。
实验室工具
- Chrome DevTools中的Lighthouse：运行性能、可访问性和SEO审计。它报告LCP、CLS和TBT（FID的代理指标）。
- WebPageTest：高级测试，提供胶片条和水fall图。
- PageSpeed Insights：结合实验室和现场数据（如果可用）。
现场工具
- Chrome用户体验报告（CrUX）：真实用户指标的公共数据集。通过PageSpeed Insights或BigQuery访问。
- web-vitals JavaScript库：在分析中收集真实用户指标。
- Search Console核心网页指标报告：显示有问题的URL组。
从PageSpeed Insights开始快速概览，然后使用Lighthouse进行详细诊断。
提升最大内容绘制（LCP）
LCP通常因服务器响应慢、渲染阻塞资源或未优化的图片而变差。请遵循以下步骤：
- 优化服务器响应时间：使用缓存、CDN和高效的后端代码。目标是将首字节时间（TTFB）控制在0.8秒以下。
- 消除渲染阻塞资源：内联关键CSS，延迟非关键CSS和JavaScript。对脚本使用
async或defer。 - 优化图片：压缩图片，使用现代格式（WebP、AVIF），并通过
srcset实现响应式图片。对于LCP图片，使用<link rel="preload">预加载它。 - 使用CDN：从边缘位置提供静态资源。
- 缓存资源：为静态资源设置较长的缓存生命周期。
示例：预加载LCP图片并设置显式尺寸以避免布局偏移。
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">提升首次输入延迟（FID）
FID衡量响应性。长JavaScript任务阻塞主线程，延迟交互。要提升FID：
- 拆分长任务：使用
setTimeout或requestIdleCallback让出主线程。 - 最小化主线程工作：减少JavaScript执行时间，避免大型包，并使用代码拆分。
- 优化事件处理器：对昂贵的处理器进行防抖或节流。
- 使用Web Workers处理CPU密集型任务。
- 避免大型第三方脚本：审计并移除不必要的脚本。
Lighthouse等工具会标记长任务。使用Chrome DevTools中的Performance面板来识别它们。
提升累积布局偏移（CLS）
CLS衡量视觉稳定性。当元素意外改变位置时会发生布局偏移。常见原因和修复方法：
- 没有尺寸的图片：始终设置
width和height属性或使用CSSaspect-ratio。 - 广告、嵌入和iframe：用占位符预留空间或设置固定尺寸。
- 动态内容：避免在现有内容上方插入内容，除非是响应用户交互。
- Web字体：使用
font-display: swap并预加载字体，以避免不可见文本（FOIT）和布局偏移。 - 动画：对于动画，优先使用CSS
transform和opacity，因为它们不会触发布局。
在DevTools中使用Layout Instability API进行测试，或使用web-vitals库在现场记录CLS。
持续监控的实用工作流程
优化不是一次性任务。设置监控：
- 使用
web-vitals库对网站进行埋点，并将指标发送到你的分析平台。 - 设置当指标超过阈值时的警报。
- 在CI/CD中定期运行Lighthouse以捕获回归。
- 使用Search Console监控现场数据趋势。
记住，现场数据对排名至关重要。实验室数据有助于调试，但始终要用真实用户验证。
常见问题
核心网页指标的当前阈值是多少？
截至2023年，阈值为：LCP良好≤2.5秒，需要改进2.5秒–4.0秒，差>4.0秒；FID良好≤100毫秒，需要改进100毫秒–300毫秒，差>300毫秒；CLS良好≤0.1，需要改进0.1–0.25，差>0.25。注意，FID将在2024年被INP取代。
我应该多久测量一次核心网页指标？
通过分析持续监控现场数据，并在每次部署或至少每周运行实验室测试（例如Lighthouse）。重大更改应触发新的审计。
没有开发人员可以提升核心网页指标吗？
一些修复如压缩图片或启用缓存可以通过插件或托管设置完成。然而，更深入的优化（例如代码拆分、关键CSS）通常需要开发工作。
准备好优化图片以提升LCP了吗？试试我们的免费图像压缩器，在不损失质量的情况下减小文件大小。