Análisis

Next.js Speed Insights le permite analizar y medir el rendimiento de las páginas utilizando diferentes métricas.

Puede comenzar a recolectar su Puntuación de Experiencia Real sin configuración en implementaciones de Vercel.

El resto de esta documentación describe el relé integrado que utiliza Next.js Speed Insights.

Construya su propio sistema

Primero, necesitará crear un componente App personalizado y definir una función reportWebVitals:

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

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

export default MyApp

Esta función se activa cuando se terminan de calcular los valores finales para cualquiera de las métricas en la página. Puede usarla para registrar los resultados en la consola o enviarlos a un endpoint específico.

El objeto metric que recibe la función consta de varias propiedades:

• id: Identificador único para la métrica en el contexto de la carga actual de la página
• name: Nombre de la métrica
• startTime: Primera marca de tiempo registrada de la entrada de rendimiento en milisegundos (si aplica)
• value: Valor, o duración en milisegundos, de la entrada de rendimiento
• label: Tipo de métrica (web-vital o custom)

Hay dos tipos de métricas que se rastrean:

• Web Vitals
• Métricas personalizadas

Web Vitals

Web Vitals son un conjunto de métricas útiles que buscan capturar la experiencia del usuario en una página web. Se incluyen los siguientes web vitals:

• Tiempo hasta el primer byte (TTFB)
• Primera pintura con contenido (FCP)
• Pintura con contenido más grande (LCP)
• Retraso de primera entrada (FID)
• Cambio de diseño acumulativo (CLS)
• Interacción a la siguiente pintura (INP) (experimental)

Puede manejar todos los resultados de estas métricas usando la etiqueta web-vital:

export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric) // El objeto métrica ({ id, name, startTime, value, label }) se registra en la consola
  }
}

También existe la opción de manejar cada una de las métricas por separado:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'FCP':
      // manejar resultados FCP
      break
    case 'LCP':
      // manejar resultados LCP
      break
    case 'CLS':
      // manejar resultados CLS
      break
    case 'FID':
      // manejar resultados FID
      break
    case 'TTFB':
      // manejar resultados TTFB
      break
    case 'INP':
      // manejar resultados INP (nota: INP sigue siendo una métrica experimental)
      break
    default:
      break
  }
}

Se utiliza una biblioteca de terceros, web-vitals, para medir estas métricas. La compatibilidad con navegadores depende de la métrica específica, por lo que debe consultar la sección de Compatibilidad con navegadores para saber qué navegadores son compatibles.

Métricas personalizadas

Además de las métricas principales mencionadas anteriormente, hay algunas métricas personalizadas adicionales que miden el tiempo que tarda la página en hidratarse y renderizarse:

• Next.js-hydration: Tiempo que tarda la página en comenzar y terminar la hidratación (en ms)
• Next.js-route-change-to-render: Tiempo que tarda una página en comenzar a renderizarse después de un cambio de ruta (en ms)
• Next.js-render: Tiempo que tarda una página en terminar de renderizarse después de un cambio de ruta (en ms)

Puede manejar todos los resultados de estas métricas usando la etiqueta custom:

export function reportWebVitals(metric) {
  if (metric.label === 'custom') {
    console.log(metric) // El objeto métrica ({ id, name, startTime, value, label }) se registra en la consola
  }
}

También existe la opción de manejar cada una de las métricas por separado:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // manejar resultados de hidratación
      break
    case 'Next.js-route-change-to-render':
      // manejar resultados de cambio de ruta a renderizado
      break
    case 'Next.js-render':
      // manejar resultados de renderizado
      break
    default:
      break
  }
}

Estas métricas funcionan en todos los navegadores que admiten la API de User Timing.

Envío de resultados a sistemas externos

Con la función de relé, puede enviar resultados a cualquier endpoint para medir y rastrear el rendimiento real de los usuarios en su sitio. Por ejemplo:

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

  // Usar `navigator.sendBeacon()` si está disponible, recurrir a `fetch()` en caso contrario.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
}

Nota importante: Si usa Google Analytics, el valor id puede permitirle construir distribuciones de métricas manualmente (para calcular percentiles, etc.)

export function reportWebVitals({ id, name, label, value }) {
  // Usar `window.gtag` si inicializó Google Analytics como en este ejemplo:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  window.gtag('event', name, {
    event_category:
      label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
    value: Math.round(name === 'CLS' ? value * 1000 : value), // los valores deben ser enteros
    event_label: id, // id único para la carga actual de la página
    non_interaction: true, // evita afectar la tasa de rebote.
  })
}

Lea más sobre envío de resultados a Google Analytics.

TypeScript

Si está usando TypeScript, puede usar el tipo incorporado NextWebVitalsMetric:

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

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

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

export default MyApp