Análisis

Next.js tiene soporte integrado para medir y reportar métricas de rendimiento. Puedes usar el hook useReportWebVitals para gestionar el reporte manualmente, o alternativamente, Vercel proporciona un servicio administrado para recolectar y visualizar métricas automáticamente.

Construye tu propia solución

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })

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

Consulta la Referencia de API para más información.

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:

• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Interaction to Next Paint (INP)

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

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

function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // manejar resultados FCP
      }
      case 'LCP': {
        // manejar resultados LCP
      }
      // ...
    }
  })

  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:

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 User Timing.

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:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'

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

Bueno saber: Si usas Google Analytics, usar el valor id te permite 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/pages/_app.js
  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.