Next.js高级特性：Measuring performance

Next.js Analytics允许您使用不同的指标来分析和衡量页面的性能。

您可以使用零配置在Vercel部署上开始收集“真实体验得分”。如果您是自托管的，还支持Google Analytics（分析）。

本文档的其余部分描述了内置中继Next.js Analytics的使用。

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

建立组件

首先，您将需要创建一个自定义App组件并定义一个reportWebVitals函数：

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

当任何指标的最终值在页面上计算完成时，将触发此函数。您可以用来将任何结果记录到控制台或发送到特定端点。

metric返回到该函数的对象包含许多属性：

• id：在当前页面加载的上下文中指标的唯一标识符
• name：指标名称
• startTime：性能条目的第一个记录的时间戳（以毫秒为单位）（如果适用）
• value：性能条目的值或持续时间（以毫秒为单位）
• label：指标类型（web-vital或custom）

跟踪两种类型的指标：

• Web Vitals
• 自定义指标

Web Vitals

Web Vitals是一组有用的指标，旨在捕获网页的用户体验。以下所有网络要素均包括在内：

• 到第一个字节的时间（TTFB）
• 首次合格涂料（FCP）
• 最大含量的涂料（LCP）
• 首次输入延迟（FID）
• 累积版式移位（CLS）

您可以使用以下web-vital标签处理这些指标的所有结果：

export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
  }
}

还可以选择分别处理每个指标：

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'FCP':
      // handle FCP results
      break
    case 'LCP':
      // handle LCP results
      break
    case 'CLS':
      // handle CLS results
      break
    case 'FID':
      // handle FID results
      break
    case 'TTFB':
      // handle TTFB results
      break
    default:
      break
  }
}

第三方库web-vitals用于测量这些指标。浏览器兼容性取决于特定指标，因此请参考“浏览器支持”部分以了解支持哪些浏览器。

自定义指标

除了上面列出的核心指标外，还有一些其他自定义指标可以衡量页面水化和渲染所需的时间：

• Next.js-hydration：页面开始和完成补水所需的时间（以毫秒为单位）
• Next.js-route-change-to-render：路由更改后页面开始呈现所花费的时间（以毫秒为单位）
• Next.js-render：更改路线后页面完成渲染所需的时间（以毫秒为单位）

您可以使用以下custom标签处理这些指标的所有结果：

export function reportWebVitals(metric) {
  if (metric.label === 'custom') {
    console.log(metric) // The metric object ({ id, name, startTime, value, label }) is logged to the console
  }
}

还可以选择分别处理每个指标：

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // handle hydration results
      break
    case 'Next.js-route-change-to-render':
      // handle route-change to render results
      break
    case 'Next.js-render':
      // handle render results
      break
    default:
      break
  }
}

这些指标可在所有支持User Timing API的浏览器中使用。

将结果发送到分析

使用中继功能，您可以将任何结果发送到分析端点，以测量和跟踪站点上的实际用户性能。例如：

export function reportWebVitals(metric) {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

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

注意：如果您使用Google Analytics（分析），则使用该 id值可以使您手动构建指标分布（以计算百分位数等）。

export function reportWebVitals({ id, name, label, value }) {
  // Use `window.gtag` if you initialized Google Analytics as this example:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
  window.gtag('event', name, {
    event_category:
      label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
    value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    event_label: id, // id unique to current page load
    non_interaction: true, // avoids affecting bounce rate.
  })
}

在此处阅读有关将结果发送到Google Analytics（分析）的更多信息。

TypeScript

如果您使用的是TypeScript，则可以使用内置类型NextWebVitalsMetric：

// pages/_app.tsx

import type { AppProps, NextWebVitalsMetric } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric)
}

export default MyApp