Core Web Vitals：测量与提升网页性能

用户期望页面即时加载、响应无延迟，并保持视觉稳定。Google 的 Core Web Vitals (CWV) 量化了这些期望：Largest Contentful Paint (LCP) 衡量加载性能，Interaction to Next Paint (INP) 衡量交互性，Cumulative Layout Shift (CLS) 衡量视觉稳定性。较差的 CWV 分数会影响用户体验，并可能影响搜索排名。本指南展示如何测量每个指标，并通过实用的、对开发者友好的步骤来改善它们。

什么是 Core Web Vitals？

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

• LCP：最大内容元素（图像、文本块、视频）渲染所需的时间。良好：≤2.5秒，需要改进：≤4秒，差：>4秒。
• INP：从用户交互（点击、轻触、按键）到下一帧绘制的时间。良好：≤200毫秒，需要改进：≤500毫秒，差：>500毫秒。
• CLS：意外视觉移动的布局偏移分数总和。良好：≤0.1，需要改进：≤0.25，差：>0.25。

这些阈值基于页面加载的第75百分位数，并区分移动端和桌面端。

如何测量 Core Web Vitals

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

实验室工具

• Lighthouse（位于 Chrome DevTools 或 PageSpeed Insights 中）：审计 LCP、CLS 和总阻塞时间（INP 的代理指标）。
• WebPageTest：高级胶片图和瀑布图分析。
• Chrome DevTools 性能面板：记录交互以发现影响 INP 的长任务。

现场工具

• Chrome UX Report (CrUX)：公共网站的聚合真实用户数据。
• web-vitals JavaScript 库：将指标发送到你的分析平台。
• Search Console Core Web Vitals 报告：按状态对 URL 进行分组。

通过 npm 安装 web-vitals 库或从 CDN 引入，然后记录指标：

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

使用 sendBeacon 避免阻塞卸载。长期收集数据以观察趋势。

改善 Largest Contentful Paint (LCP)

LCP 通常是主图或主标题。优化关键路径：

1. 优先处理 LCP 资源：为 LCP 图像添加 fetchpriority="high" 或预加载它。
2. 减少服务器响应时间：使用缓存、CDN 和高效的后端查询。
3. 消除阻塞渲染的资源：延迟非关键 CSS/JS，内联关键 CSS。
4. 优化图像：压缩、使用现代格式（WebP/AVIF）并设置尺寸。
5. 使用 CDN 从靠近用户的位置提供资源。

示例：预加载 LCP 图像并设置 fetchpriority：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

如需压缩图像，试试我们的 Image Compressor，在不明显损失质量的情况下减小文件大小。

改善 Interaction to Next Paint (INP)

INP 反映响应性。长 JavaScript 任务阻塞主线程并延迟视觉反馈。

1. 拆分长任务：使用 setTimeout、requestIdleCallback 或 scheduler.yield() 让出主线程。
2. 优化事件处理程序：对输入进行防抖，避免在点击处理程序中执行繁重工作。
3. 减少 JavaScript：代码分割、tree-shaking，并延迟非关键脚本。
4. 使用 Web Worker 处理 CPU 密集型工作。
5. 避免大型 DOM 更新：批量处理 DOM 更改，对长列表使用虚拟化。

使用 web-vitals 库在现场测量 INP，并使用性能面板识别交互期间的长任务。

改善 Cumulative Layout Shift (CLS)

CLS 在元素意外移动时发生。常见原因：没有尺寸的图像、没有预留空间的广告/嵌入内容，以及延迟加载的字体。

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

示例：为响应式图像设置宽高比：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Core Web Vitals 对比

改善 CWV 的实用工作流程

1. 测量基线：运行 Lighthouse 并通过 web-vitals 收集现场数据。
2. 识别瓶颈：使用性能面板和网络瀑布图。
3. 优先修复：专注于得分最差的指标。
4. 实施更改：优化图像、延迟脚本、设置尺寸。
5. 测试和监控：重新运行实验室测试并长期跟踪现场数据。

请记住，CWV 是现场指标；实验室工具有助于诊断，但真实用户数据才是真相来源。

常见问题

Core Web Vitals 的当前阈值是什么？

良好：LCP ≤2.5秒，INP ≤200毫秒，CLS ≤0.1。需要改进：LCP ≤4秒，INP ≤500毫秒，CLS ≤0.25。差：高于这些值。这些评估基于页面加载的第75百分位数。

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

持续监控现场数据，并在重大更改后运行实验室审计。至少每月查看 Search Console 的 Core Web Vitals 报告，并在影响前端性能的部署后查看。

我可以在不重新设计网站的情况下改善 Core Web Vitals 吗？

可以。许多改进是技术性的：压缩图像、设置宽度/高度属性、延迟非关键 JavaScript，以及拆分长任务。这些更改通常无需视觉重新设计即可带来显著收益。

准备好优化图像以改善 LCP 了吗？使用我们免费的 Image Compressor 在保持质量的同时缩小图像，提升你的 Core Web Vitals 分数。