Core Web Vitals：衡量并提升网站性能

Web2026-10-13TryQuickToolBox

你的用户没有耐心。如果你的网站加载需要超过几秒钟，他们就会离开。搜索引擎也会注意到这一点：Core Web Vitals 是排名信号。但改进它们感觉就像置身于指标和工具的迷宫中。本指南将拨开迷雾。你将了解每个指标的含义、如何准确衡量它们，以及改进它们的具体步骤。

什么是 Core Web Vitals？

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

最大内容绘制（Largest Contentful Paint，LCP）：主要内容加载需要多长时间。目标：低于 2.5 秒。
交互到下一次绘制（Interaction to Next Paint，INP）：页面响应用户输入的速度有多快。目标：低于 200 毫秒。
累积布局偏移（Cumulative Layout Shift，CLS）：加载过程中布局跳动的程度。目标：低于 0.1。

这些指标通过真实用户会话（字段数据）和合成测试（实验室数据）来衡量。字段数据才是影响排名的关键。

如何衡量 Core Web Vitals

你需要同时使用实验室数据和字段数据。实验室数据帮助你调试；字段数据反映真实用户体验。

实验室工具

Chrome DevTools 中的 Lighthouse：运行审计以获取分数和优化机会。
PageSpeed Insights：结合某个 URL 的实验室数据和字段数据。
WebPageTest：高级瀑布流分析。

字段工具

Chrome 用户体验报告（CrUX）：来自 Chrome 的真实用户数据，可通过 PageSpeed Insights 或 BigQuery 获取。
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 通常是最大的图像、视频或文本块。要改进它，请关注关键路径。

优化图像：压缩图像，使用 WebP 或 AVIF 等现代格式，并设置明确的宽度和高度。像 Image Compressor 这样的工具可以在不明显损失质量的情况下帮助减小文件大小。
预加载 LCP 资源：为主图或字体添加 <link rel="preload">。
减少服务器响应时间：使用 CDN、启用缓存并优化后端查询。
消除阻塞渲染的资源：内联关键 CSS，延迟非关键 JavaScript。
使用响应式图像：通过 srcset 提供尺寸合适的图像。

预加载 LCP 图像的示例：

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

改进 INP

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

拆分长任务：使用 setTimeout 或 requestIdleCallback 让出主线程。
优化事件处理器：对开销大的处理器进行防抖或节流。
减少 JavaScript：移除未使用的代码、进行代码分割，并延迟加载非关键模块。
使用 Web Worker 处理繁重计算。
避免过大的 DOM 尺寸：将 DOM 保持在 1,500 个节点以下。

让出主线程的示例：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

改进 CLS

CLS 发生在元素意外偏移时。常见原因包括：没有尺寸的图像、广告、嵌入内容和动态注入的内容。

始终为图像和视频设置宽度和高度。
使用 CSS aspect-ratio 或固定容器为广告和嵌入内容预留空间。
避免在现有内容上方插入内容，除非由用户交互触发。
使用 font-display: optional 以避免字体切换造成的偏移，或预加载字体。
应用 transform 动画，而不是会触发布局的属性。

为图像预留空间的示例：

<img src="#" width="800" height="600" alt="...">

工具与工作流程

将性能检查集成到你的开发工作流程中：

在 CI 中运行 Lighthouse 以捕捉性能回归。
使用 web-vitals 监控字段数据并设置警报。
分析服务器日志以识别慢端点。Nginx Log Analyzer 可以帮助你发现慢请求和错误。
在真实设备和限速网络上进行测试。

指标与目标对比

指标	衡量内容	良好目标
LCP	加载性能	< 2.5 秒
INP	响应性	< 200 毫秒
CLS	视觉稳定性	< 0.1

常见问题

什么是 Core Web Vitals？

Core Web Vitals 是三个指标——LCP、INP 和 CLS——用于衡量加载、交互性和视觉稳定性。Google 将它们用作排名信号。

如何衡量 Core Web Vitals？

使用 Lighthouse 等实验室工具进行调试，并使用 web-vitals 库或 CrUX 等字段工具获取真实用户数据。两者都很重要。

什么样的 LCP 分数算好？

良好的 LCP 低于 2.5 秒。超过 4 秒则较差。优化图像、预加载关键资源并减少服务器响应时间。