React Academy · 课时

在 React 应用中测量 Core Web Vitals

使用 Lighthouse、WebPageTest 和 web-vitals 库收集 LCP、INP 和 CLS 分数。

在 React 应用中测量 Core Web Vitals 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是核心 Web 指标？

核心 Web 指标是 Google 用于衡量用户体验、并会影响 SEO 排名的指标：LCP（最大内容绘制——加载速度）、INP（交互到下一次绘制——响应性）和 CLS（累积布局偏移——视觉稳定性）。

良好的阈值

目标值：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。超过“较差”阈值的值（LCP > 4s、INP > 500ms、CLS > 0.25）会显著损害用户体验和 SEO。

web-vitals 库

web-vitals npm 包通过简单的 API 在真实 browser 中测量 CWV。

npm install web-vitals

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

onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));

将指标发送到分析服务

将指标发送到您的分析端点，以进行真实用户监控（RUM）；Lighthouse 衡量实验室环境中的性能，而 RUM 展示真实用户的体验。

function sendToAnalytics(metric) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

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

Next.js 内置指标

Next.js 会自动采集核心 Web 指标。在 Pages 中从 _app.js 导出 reportWebVitals 函数，或者使用 App Router 的内置支持。

// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric.name, metric.value);
  }
}

Chrome DevTools 中的 Lighthouse

在 Chrome DevTools 的 Lighthouse 标签页中运行 Lighthouse 审计，以测量实验室环境中的 CWV。使用隐身模式避免扩展干扰，并启用节流来模拟移动设备。

WebPageTest

WebPageTest.org 可从不同地理位置的真实设备提供详细的瀑布图、视频录制和 CWV 测量结果，比本地 Lighthouse 更贴近真实情况。

Chrome 用户体验报告（CrUX）

Google 的 CrUX 数据集汇总了数百万网站的真实用户 CWV 数据。您可以通过 Google Search Console、PageSpeed Insights 或 CrUX API 访问这些数据。

使用 PerformanceObserver 测量 LCP

使用原生 PerformanceObserver API 观察 LCP 条目，并了解哪个元素是最大内容绘制元素。

const po = new PerformanceObserver(entries => {
  for (const entry of entries.getEntries()) {
    console.log('LCP element:', entry.element, 'time:', entry.startTime);
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });

CLS 调试

使用 Chrome DevTools 的布局偏移区域（位于 Rendering 面板中），通过红色叠加层突出显示导致布局偏移的元素。

归因数据

web-vitals 库提供归因数据，用于识别导致指标较差的具体原因：LCP 元素、INP 交互，或导致 CLS 的元素。

onLCP(metric => {
  const { element, url } = metric.attribution.lcpEntry;
  console.log('LCP element:', element);
}, { reportAllChanges: true });

快速检查

哪个核心 Web 指标衡量响应性，具体来说是页面响应用户交互的速度？

回顾

使用 web-vitals 库或 Lighthouse 测量 CWV。将指标发送到您的分析服务，以进行真实用户监控。目标值为 LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。使用归因数据找出导致分数较差的具体元素或交互。

常见问题解答

「在 React 应用中测量 Core Web Vitals」课时是免费的吗？

是的 — 「在 React 应用中测量 Core Web Vitals」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「在 React 应用中测量 Core Web Vitals」这节课中我会学到什么？

使用 Lighthouse、WebPageTest 和 web-vitals 库收集 LCP、INP 和 CLS 分数。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「在 React 应用中测量 Core Web Vitals」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy