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

Web2026-10-16TryQuickToolBox

你构建了一个快速的网站，但用户仍然抱怨速度慢。或者你的 SEO 排名在 Google 更新后下降了。罪魁祸首可能是 Core Web Vitals——Google 用来衡量真实用户体验的一组指标。忽视它们可能会损害用户满意度和搜索可见性。

在本指南中，你将了解什么是 Core Web Vitals、如何准确衡量它们，以及改善每个指标的实用步骤。我们将重点介绍当前的三项指标：最大内容绘制（LCP）、下次绘制交互（INP）和累积布局偏移（CLS）。

什么是 Core Web Vitals？

Core Web Vitals 是 Web Vitals 的一个子集，Google 认为它们对于提供出色的用户体验至关重要。它们量化了内容加载的速度、页面对交互的响应速度以及视觉稳定性。

Google 将这些指标用作排名信号，但更重要的是，它们反映了真实用户的痛点。缓慢的 LCP 会让等待内容的用户感到沮丧；高 INP 会让页面感觉卡顿；高 CLS 会导致误点击和烦恼。

三项核心 Web Vitals

最大内容绘制（LCP）：衡量加载性能。它标记最大的内容元素（图像、视频或文本块）变为可见的时间。良好的 LCP 为 2.5 秒或更短。
下次绘制交互（INP）：衡量响应性。它记录所有交互（点击、轻触、按键）的延迟，并报告一个单一值。良好的 INP 为 200 毫秒或更短。
累积布局偏移（CLS）：衡量视觉稳定性。它量化加载过程中意外的布局偏移。良好的 CLS 为 0.1 或更小。

这些阈值基于真实用户的现场数据，而非实验室测试。Google 在页面加载的第 75 百分位处评估它们，这意味着 75% 的用户体验应达到“良好”阈值。

如何衡量 Core Web Vitals

你需要实验室数据和现场数据。实验室工具在受控条件下模拟单次页面加载，而现场数据（真实用户监测，RUM）则捕获跨设备和网络的实际用户体验。

实验室工具

Lighthouse：内置于 Chrome DevTools 中，它审计性能并提供 LCP、CLS 和总阻塞时间（TBT，与 INP 相关）的分数。在无痕模式下运行以避免扩展程序影响结果。
PageSpeed Insights：结合实验室（Lighthouse）和现场（CrUX）数据。用它来查看你的实验室分数和真实用户指标。
WebPageTest：提供来自多个位置和设备的先进测试。它提供胶片图和瀑布图来诊断加载问题。

现场工具

Chrome 用户体验报告（CrUX）：来自 Chrome 的真实用户指标公共数据集。可通过 PageSpeed Insights、CrUX Dashboard 或 BigQuery 获取。
Google Search Console：根据 CrUX 数据显示你网站的 Core Web Vitals 状态。它按性能对 URL 进行分组。
web-vitals JavaScript 库：一个小型库，用于在你自己的 RUM 中衡量指标。你可以将数据发送到你的分析平台。

以下是如何使用 web-vitals 库将指标记录到控制台：

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon() or fetch() to send data
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

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

若想在不编写代码的情况下快速检查，你可以使用解析性能数据的在线工具。例如，如果你有服务器日志，Nginx 日志分析器可以帮助你识别可能影响 LCP 的慢响应。

改善最大内容绘制（LCP）

LCP 通常是最具影响力的优化指标。它受服务器响应时间、资源加载时间和客户端渲染的影响。

优化服务器响应

使用 CDN 从离用户更近的位置提供内容。
为静态资源启用缓存（浏览器和服务器端）。
优化数据库查询和服务器端代码以减少 TTFB（首字节时间）。
升级到 HTTP/2 或 HTTP/3 以实现多路复用和更快的连接。

优化资源

预加载关键资源：为 LCP 图像或字体使用 <link rel="preload">。
压缩并正确调整图像大小：使用 WebP 或 AVIF 等现代格式，并使用 srcset 提供响应式图像。
压缩 CSS 和 JavaScript：删除不必要的字符和注释。
延迟非关键 JavaScript：使用 async 或 defer 属性。
内联关键 CSS：将首屏样式直接放入 HTML 中，以避免渲染阻塞请求。

消除渲染阻塞资源

<head> 中的 CSS 和 JavaScript 会阻塞渲染。内联关键 CSS，并异步加载其余部分。对于 JavaScript，使用 defer 或 async。

改善下次绘制交互（INP）

INP 衡量从用户交互到下次绘制的时间。它受 JavaScript 执行、事件处理和渲染工作的影响。

减少 JavaScript 执行时间

使用 setTimeout 或 requestIdleCallback 分解长任务（超过 50 毫秒）。
使用 Web Worker 进行繁重计算。
对滚动、调整大小和输入事件的事件处理程序进行防抖或节流。
避免大型同步脚本；拆分代码并延迟加载模块。

优化事件处理

对触摸和滚轮事件使用被动事件监听器，以改善滚动性能。
最小化 DOM 操作；批量更新并使用 requestAnimationFrame。
通过避免复杂选择器来减少样式重新计算的范围。

改善渲染性能

对动画使用 CSS will-change 或 transform 以触发 GPU 加速。
通过在不同阶段读取和写入样式来避免布局抖动。

改善累积布局偏移（CLS）

CLS 衡量意外的布局偏移。它由加载过程中元素改变位置引起，通常是由于没有尺寸的图像、广告或动态注入的内容。

始终包含尺寸属性

对于图像和视频，设置 width 和 height 属性或使用 CSS aspect-ratio。这可以预留空间并防止偏移。

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

为动态内容预留空间

对异步加载内容的容器（例如广告、嵌入内容）使用 CSS min-height。
除非由用户交互触发，否则避免在现有内容上方插入内容。

使用 Font-Display Swap

自定义字体在加载时可能导致不可见文本（FOIT）或布局偏移。使用 font-display: swap 立即显示回退文本，并预加载字体以减少交换时间。

综合运用：实用工作流程

衡量：从 PageSpeed Insights 开始，获取实验室和现场数据。确定需要改善的指标。
诊断：使用 Lighthouse 和 Chrome DevTools Performance 面板查找瓶颈。查看瀑布图、主线程活动和布局偏移。
优化：应用上述技术，优先处理影响最差指标的更改。
测试：重新运行实验室测试以确认改进。部署到暂存环境并使用 RUM 监控现场数据。
监控：使用 web-vitals 库设置持续的 RUM，并在出现回归时发出警报。使用 Search Console 跟踪 Core Web Vitals 状态。

请记住，优化可能会有权衡。例如，延迟加载图像可以改善初始加载，但如果 LCP 图像被延迟加载，可能会损害 LCP。始终与真实用户一起测试。

常见问题

Core Web Vitals 的当前阈值是多少？

对于 LCP，良好为 ≤2.5 秒，需要改善为 ≤4.0 秒，差为 >4.0 秒。对于 INP，良好为 ≤200 毫秒，需要改善为 ≤500 毫秒，差为 >500 毫秒。对于 CLS，良好为 ≤0.1，需要改善为 ≤0.25，差为 >0.25。这些阈值在页面加载的第 75 百分位处评估。

我应该多久检查一次 Core Web Vitals？

使用 RUM 持续监控现场数据。每月检查 Search Console 以了解整体趋势。在重大代码更改或部署后运行实验室测试。Core Web Vitals 可能会随着你网站或第三方脚本的更新而变化。

没有开发人员我能改善 Core Web Vitals 吗？

某些改进可以通过插件或设置实现（例如，启用缓存、优化图像）。然而，显著的收益通常需要代码更改，例如内联关键 CSS、延迟 JavaScript 或重构资源加载方式。INP 和高级 LCP 优化通常需要开发人员的帮助。

准备好分析你的服务器性能了吗？试试我们的 Nginx 日志分析器，找出可能影响你 Core Web Vitals 的慢请求。