Core Web Vitals：如何测量与优化

用户期望快速、响应灵敏的页面。Google的Core Web Vitals（CWV）量化了这种体验：最大内容绘制（LCP）衡量加载性能，交互到下一次绘制（INP）衡量交互性，累积布局偏移（CLS）衡量视觉稳定性。得分不佳会影响用户满意度，并可能影响搜索排名。本指南展示如何准确测量CWV，并通过实际步骤修复常见问题。

什么是Core Web Vitals？

Core Web Vitals是反映真实用户体验的三个指标：

• LCP：最大内容元素（图片、文本块）渲染所需的时间。良好：≤2.5秒。
• INP：从用户交互到下一次绘制的时间。良好：≤200毫秒。
• CLS：布局偏移得分的总和。良好：≤0.1。

这些阈值在页面加载的第75百分位进行评估，意味着75%的访问应达到目标。

如何测量Core Web Vitals

你需要实验室数据和现场数据。实验室工具模拟条件；现场数据来自真实用户。

实验室工具

• Chrome DevTools中的Lighthouse：运行性能、可访问性和SEO审计。它提供实验室CWV得分和改进机会。
• WebPageTest：具有自定义网络条件和设备仿真的高级测试。

现场工具

• Chrome用户体验报告（CrUX）：真实用户指标的公共数据集。可通过PageSpeed Insights或BigQuery访问。
• web-vitals JavaScript库：从实际用户收集CWV并发送到你的分析平台。

使用现场数据识别真实问题，然后使用实验室工具调试和验证修复。

优化最大内容绘制（LCP）

LCP通常是主图或主标题。优化这些元素：

1. 优化图片：压缩图片，使用WebP或AVIF等现代格式，并通过srcset提供响应式尺寸。
2. 预加载关键资源：为LCP图片或字体添加<link rel="preload">。
3. 减少服务器响应时间：使用缓存、CDN和高效的后端代码。
4. 消除渲染阻塞资源：延迟非关键CSS/JS，内联关键CSS。

示例：预加载LCP图片：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

同时在<img>标签上设置fetchpriority="high"以提示重要性。

优化交互到下一次绘制（INP）

INP衡量对点击、触摸和键盘输入的响应能力。长任务阻塞主线程。要优化INP：

• 拆分长任务：使用setTimeout或requestIdleCallback让出主线程。
• 优化事件处理程序：对昂贵操作进行防抖或节流。
• 减少JavaScript：代码拆分、tree-shaking，并延迟非关键脚本。
• 使用Web Worker处理CPU密集型工作。

示例：让出主线程：

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // 做一些工作
  await yieldToMain();
  // 继续
}

优化累积布局偏移（CLS）

CLS发生在元素意外移动时。常见原因：没有尺寸的图片、广告、嵌入内容和Web字体。

• 为图片和视频设置宽度和高度，或使用CSS aspect-ratio。
• 为动态内容（广告、嵌入）预留空间，使用min-height。
• 使用font-display: swap并预加载字体，避免不可见文本导致偏移。
• 避免在现有内容上方插入内容，除非由用户交互触发。

示例：为广告预留空间：

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

指标和工具对比

优化CWV的实用工作流程

1. 用PageSpeed Insights或CrUX测量现场数据，找出得分较差的页面。
2. 在这些页面上运行Lighthouse，获取具体优化机会。
3. 按影响优先排序修复：通常LCP和CLS最容易优化。
4. 实施更改并在实验室中测试。
5. 部署并监控现场数据以确认改进。
6. 迭代解决剩余问题。

记住CWV是以用户为中心的；始终用真实用户数据验证。

常见问题

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

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

我应该多久测量一次Core Web Vitals？

持续监控现场数据，并在重大更改后运行实验室测试。每月审查CrUX数据是一个好习惯。

不重建网站能优化Core Web Vitals吗？

可以。许多优化如图片优化、预加载和布局修复可以逐步应用，无需完全重建。

需要压缩图片以加快LCP？试试我们的免费图片压缩器，在不损失质量的情况下减小文件大小。