Analítica

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

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 performante es crear un componente separado que el layout raíz importe. Esto limita el límite del cliente exclusivamente al componente WebVitals.

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:

Puedes 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
      }
      // ...
    }
  })
}

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.

Construye tu propia solución

Web Vitals

Enviando resultados a sistemas externos

On this page