useReportWebVitals

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

app/_components/web-vitals.js

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

app/layout.js

import { WebVitals } from './_components/web-vitals'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

Dado que el hook useReportWebVitals requiere la directiva "use client", el enfoque más eficiente es crear un componente separado que importe el layout raíz. Esto limita el límite del cliente exclusivamente al componente WebVitals.

El objeto metric pasado como argumento del hook 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 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: 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 API de Rendimiento.

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:

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

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // manejar resultados FCP
      }
      case 'LCP': {
        // manejar resultados LCP
      }
      // ...
    }
  })
}

'use client'

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

export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // manejar resultados FCP
      }
      case 'LCP': {
        // manejar resultados LCP
      }
      // ...
    }
  })
}

Vercel Speed Insights se configura automáticamente en despliegues de Vercel y no requieren el uso de useReportWebVitals. Este hook es útil en desarrollo local o si está utilizando un servicio de analítica diferente.

Envío de resultados a sistemas externos

Puede enviar resultados a cualquier endpoint para medir y rastrear el rendimiento de usuarios reales en su 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 })
  }
})

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

useReportWebVitals(metric => {
  // 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', 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.
  });
}

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

useReportWebVitals