useReportWebVitals

El hook useReportWebVitals te permite reportar Core Web Vitals y puede usarse en combinación con tu servicio de analítica.

Las nuevas funciones pasadas a useReportWebVitals son llamadas con las métricas disponibles hasta ese momento. Para evitar reportar datos duplicados, asegúrate de que la referencia de la función callback no cambie (como se muestra en los ejemplos de código a continuación).

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

const logWebVitals = (metric) => {
  console.log(metric)
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(logWebVitals)

  return <Component {...pageProps} />
}

El objeto metric pasado como argumento del hook consiste en varias propiedades:

id: Identificador único para la métrica en el contexto de la carga actual de la página
name: El nombre de la métrica de rendimiento. Los valores posibles incluyen nombres de métricas Web Vitals (TTFB, FCP, LCP, FID, CLS) específicas para una aplicación web.
delta: La diferencia entre el valor actual y el valor previo de la métrica. El valor típicamente está en milisegundos y representa el cambio en el valor de la métrica a lo largo del tiempo.
entries: Un arreglo de Performance Entries asociados con la métrica. Estas entradas proporcionan información detallada sobre los eventos de rendimiento relacionados con la métrica.
navigationType: Indica el tipo de navegación que activó la recolección de la métrica. Los valores posibles incluyen "navigate", "reload", "back_forward" y "prerender".
rating: Una calificación cualitativa del valor de la métrica, proporcionando una evaluación del rendimiento. Los valores posibles son "good", "needs-improvement" y "poor". La calificación se determina típicamente comparando el valor de la métrica con umbrales predefinidos que indican rendimiento aceptable o subóptimo.
value: El valor real o duración de la entrada de rendimiento, típicamente en milisegundos. El valor proporciona una medida cuantitativa del aspecto de rendimiento que está siendo rastreado por la métrica. La fuente del valor depende de la métrica específica que se está midiendo y puede provenir de varias Performance APIs.

Web Vitals

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

Puedes manejar todos los resultados de estas métricas usando la propiedad name.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

const handleWebVitals = (metric) => {
  switch (metric.name) {
    case 'FCP': {
      // manejar resultados FCP
    }
    case 'LCP': {
      // manejar resultados LCP
    }
    // ...
  }
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(handleWebVitals)

  return <Component {...pageProps} />
}

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 finalizar 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 finalizar el renderizado después de un cambio de ruta (en ms)

Puedes manejar todos los resultados de estas métricas por separado:

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'

function handleCustomMetrics(metrics) {
  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
  }
}

function MyApp({ Component, pageProps }) {
  useReportWebVitals(handleCustomMetrics)

  return <Component {...pageProps} />
}

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

Enviando resultados a sistemas externos

Puedes enviar resultados a cualquier endpoint para medir y rastrear el rendimiento de usuarios reales en tu sitio. Por ejemplo:

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

  // Usar `navigator.sendBeacon()` si está disponible, recurriendo a `fetch()` como alternativa.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
}

useReportWebVitals(postWebVitals)

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

useReportWebVitals(metric => {
  // Usar `window.gtag` si inicializaste Google Analytics como en este ejemplo:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics
  window.gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // los valores deben ser enteros
    event_label: metric.id, // id único para la carga actual de la página
    non_interaction: true, // evita afectar la tasa de rebote.
  });
}

Lee más sobre enviar resultados a Google Analytics.

useReportWebVitals