Core Web Vitals：如何测量与优化

为什么 Core Web Vitals 对你的网站很重要

你可能看到过报告说你的网站很慢，但不确定从哪里开始。Core Web Vitals 是 Google 用于衡量真实用户体验的指标：最大内容绘制 (LCP)、交互到下一次绘制 (INP) 和 累积布局偏移 (CLS)。它们会影响搜索排名，更重要的是，影响用户对你网站的看法。LCP 慢会让访客感到沮丧，INP 高会让页面感觉无响应，而 CLS 差会导致意外点击。本指南向你展示如何测量这些指标，并通过实际步骤进行优化。

理解三个核心网页指标

在优化之前，了解每个指标衡量什么及其阈值。

这些阈值基于现场数据（真实用户），而非实验室测试。目标是至少 75% 的页面加载达到“良好”范围。

如何测量 Core Web Vitals

你需要实验室数据和现场数据。实验室数据有助于调试；现场数据反映真实用户体验。

实验室工具

• Chrome DevTools 中的 Lighthouse：运行审计以获取性能分数和具体机会。
• WebPageTest：使用胶片和瀑布图进行高级测试。
• Chrome 用户体验报告 (CrUX)：来自真实用户的现场数据，可通过 PageSpeed Insights 或 CrUX API 访问。

现场工具

• PageSpeed Insights：显示 URL 的实验室数据和现场数据。
• Google Search Console：Core Web Vitals 报告按状态对 URL 进行分组。
• web-vitals JavaScript 库：在你自己的分析中收集真实用户指标。

要监测你的网站，请包含 web-vitals 库并将指标发送到你的分析端点：

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);

这为你提供了持续的现场数据流，以跟踪改进。

优化最大内容绘制 (LCP)

LCP 通常是最大的挑战。最大的元素通常是主图或大文本块。优化其加载路径。

1. 识别 LCP 元素：使用 Lighthouse 或 DevTools 性能面板。
2. 优先加载它：在图像上使用 fetchpriority="high"，或使用 <link rel="preload"> 预加载。
3. 优化图像：压缩、使用现代格式（WebP/AVIF），并通过 srcset 提供响应式尺寸。
4. 减少服务器响应时间：使用缓存、CDN，并优化后端查询。
5. 消除渲染阻塞资源：内联关键 CSS，延迟非关键 JS。

示例：预加载主图并设置获取优先级：

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

始终设置宽度和高度以避免布局偏移。

优化交互到下一次绘制 (INP)

INP 衡量响应性。长任务阻塞主线程，延迟视觉反馈。要优化 INP：

• 分解长任务：使用 setTimeout 或 scheduler.yield 让出给浏览器。
• 优化事件处理程序：防抖输入，避免繁重的同步工作。
• 减少 JavaScript：代码分割、tree-shaking，并延迟非关键脚本。
• 使用 Web Worker 处理 CPU 密集型任务。
• 避免大型 DOM 更新：批量更新 DOM 并使用 requestAnimationFrame。

示例：在长循环中让出主线程：

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

这在繁重处理期间保持页面响应。

优化累积布局偏移 (CLS)

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

• 始终在图像和视频上包含宽度和高度。
• 为动态内容预留空间（广告、嵌入内容），使用 CSS min-height 或宽高比盒子。
• 使用 font-display: swap 并预加载字体，以避免不可见文本和布局偏移。
• 避免在现有内容上方插入内容，除非是响应用户交互。

示例：使用宽高比预留空间：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

这可以防止视频加载时的偏移。

监控与迭代

性能不是一次性修复。使用真实用户指标设置持续监控。使用仪表板跟踪 LCP、INP 和 CLS 随时间的变化。每次更改后，用实验室工具验证，并在几天后检查现场数据。优先修复影响最多用户的那些问题。

常见问题

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？

持续监控现场数据，并在每次重大更改后运行实验室测试。每周检查 Search Console 的趋势。

我可以在不重建网站的情况下优化 Core Web Vitals 吗？

可以。许多优化，如图像优化、预加载和 CSS 调整，可以逐步应用，无需完全重建。

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