NextJS Core Web Vitals - 衡量 Core Web Vitals

在 NextJS 中衡量 Core Web Vitals

Next.js 是一个基于 REACT 的 JavaScript 框架，能够帮助您构建超快速且极其用户友好的网站。确实如此，Next.js 相当快速，并且内置了许多功能来确保它保持快速。至少……理论上是这样。随着时间的推移，当您的网站不断增长，添加更多功能，也许在没有遵循所有最佳实践的情况下，Next.js 页面会变得越来越慢。这可能就是您访问此页面的原因 :-)

为了衡量和防止页面变慢，衡量 Core Web Vitals 并在 Core Vitals 指标低于阈值时采取行动是非常重要的。

什么是 Core Web Vitals？

Core Web Vitals 是 Web Vitals 的子集，适用于所有网页，应该由所有网站所有者进行衡量，并且将在所有 Google 工具中呈现。每个 Core Web Vitals 代表 user experience 的一个不同方面，可以在实际环境中衡量，并反映了以用户为中心的关键成果的真实体验。

构成 Core Web Vitals 的指标将随着时间的推移而演变。2020 年的当前集合专注于 user experience 的三个方面——加载、交互性和视觉稳定性——并包括以下指标（及其各自的阈值）：

Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的 user experience，LCP 应在页面首次开始加载后的 2.5 秒内完成。

First Input Delay (FID)：衡量交互性。为了提供良好的 user experience，页面的 FID 应为 100 毫秒或更短。

Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的 user experience，页面应将 CLS 保持在 0.1 或更低。

忘掉 Lighthouse（某种程度上）

Lighthouse 是 Core Web Vitals 的测试工具。几乎我合作过的每个客户，在某个时候，都会开始谈论他们的 Lighthouse 分数以及这些分数如何与他们的 Search Console 分数不匹配。我告诉他们的第一件事是：忘掉 Lighthouse。让我来解释：

Lighthouse 是一个非常有用的工具，它在受控条件下为非缓存的首次访问收集'实验室数据'。不幸的是，收集到的数据不一定反映实际数据。 实际数据由浏览器在用户每次加载您的页面时收集。然后这些数据被发送到 Google，用于确定您的实际 Core Web Vitals 分数。这个过程也被称为 real-user monitoring（RUM）。

不要误解我的意思：我喜欢 Lighthouse。它是一款出色的软件，会为您提供您可能应该实施的极佳建议。我想说的是，Next.js 网站上的 RUM 指标不仅仅由首次、非缓存的访问以及不与您的网站交互的访客组成（Lighthouse 不会与您的网站交互！）

不，Next.js 网站上的 Core Web Vitals 更加复杂。这就是为什么我为客户实施的首要事项之一就是实时 real user monitoring。

设置 Core Web Vitals 实时 real user monitoring

在 Next.js 中收集 Core Web Vitals 数据很简单，因为 Next.js 提供了捕获 Core Web Vitals 的内置方法。您只需在 _app.tsx 中导出 reportWebVitals 函数即可。

现在，在高流量网站上，收集所有用户的所有数据没有太大意义。我们可以像这样轻松地采样 50% 或更少：

c
export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital' && bInSample) {
  	console.log(metric)
  }
}

现在，如果我们想要将 Core Web Vitals 指标发送到分析工具，我们只需要这样做：

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    window.gtag('event', name, {
      event_category: 'web-vital',
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // values must be integers
      event_label: metric.id, // id unique to current page load
      non_interaction: true, // avoids affecting bounce rate.
    })  
  }
}

同样简单地，我们可以将 Core Web Vitals 发送到任何自定义分析后端：

  const url = 'https://example.com/custom-analytics'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

请记住，在读取 Core Web Vitals 的 RUM 数据时，您需要使用第 75 百分位数。

在 Next.js 中收集 Core Web Vitals 的第三方工具

有一些第三方工具可以在 Next.js 中收集 Core Web Vitals。例如 NewRelic 和 Sentry。作为 Core Web Vitals 专家，我不太推荐它们。Sentry 会在渲染过程的早期发出一些高优先级请求，而 NewRelic 也会显著拖慢您的网站。话虽如此，我理解此类工具的重要性，如果您已经在使用其中一个工具，它们在收集和报告 Core Web Vitals 方面会做得很好。s