NextJS Core Web Vitals - medir los Core Web Vitals

Medir los Core Web Vitals en NextJS

Next.js es un framework de JavaScript sobre REACT que te permite crear sitios web superrápidos y extremadamente fáciles de usar. Eso es cierto, Next.js es bastante rápido y tiene muchas funciones integradas para asegurar que se mantenga rápido. Al menos....., en teoría. Con el tiempo, a medida que tu sitio web crece y se añaden más funciones y quizás cuando no se siguen todas las mejores prácticas, las páginas de Next.js se volverán cada vez más lentas. Probablemente por eso estás visitando esta página :-)

Para medir y prevenir páginas lentas es importante medir los Core Web Vitals y tomar medidas cuando una métrica de Core Vitals está por debajo de un umbral.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son el subconjunto de Web Vitals que se aplican a todas las páginas web, deben ser medidos por todos los propietarios de sitios y se mostrarán en todas las herramientas de Google. Cada uno de los Core Web Vitals representa una faceta distinta de la user experience, es medible en el campo y refleja la experiencia real de un resultado crítico centrado en el usuario.

Las métricas que componen los Core Web Vitals evolucionarán con el tiempo. El conjunto actual para 2020 se centra en tres aspectos de la user experience—carga, interactividad y estabilidad visual—e incluye las siguientes métricas (y sus respectivos umbrales):

Largest Contentful Paint (LCP): mide el rendimiento de carga. Para proporcionar una buena user experience, LCP debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse.

First Input Delay (FID): mide la interactividad. Para proporcionar una buena user experience, las páginas deben tener un FID de 100 milisegundos o menos.

Cumulative Layout Shift (CLS): mide la estabilidad visual. Para proporcionar una buena user experience, las páginas deben mantener un CLS de 0.1 o menos.

Olvídate de Lighthouse (más o menos)

Lighthouse es una herramienta de pruebas para los Core Web Vitals. Casi todos los clientes con los que trabajo, en algún momento, empiezan a hablar de sus puntuaciones de Lighthouse y de cómo no coinciden con sus puntuaciones de Search Console. Lo primero que les digo es esto: olvídate de Lighthouse. Te explico:

Lighthouse es una herramienta muy útil que recopila 'datos de laboratorio para una primera visita sin caché bajo condiciones reguladas'. Desafortunadamente, los datos recopilados no reflejan necesariamente los datos de campo. Los datos de campo son recopilados por el navegador cada vez que un usuario carga una de tus páginas. Esos datos se envían a Google y se utilizan para determinar tus puntuaciones reales de Core Web Vitals. Este proceso también se conoce como real-user monitoring (RUM).

No me malinterpretes: me encanta Lighthouse. Es una pieza magistral de software y te dará excelentes sugerencias que probablemente deberías implementar. Lo que digo es que las métricas RUM en un sitio Next.js no se componen simplemente de primeras visitas sin caché y de visitantes que no interactúan con tu sitio web (¡Lighthouse no interactúa con tu sitio web!)

No, los Core Web Vitals en un sitio web Next.js son más complicados. Por eso, una de las primeras cosas que implemento para mis clientes es la monitorización de usuarios reales en tiempo real.

Configurar la monitorización de usuarios reales en tiempo real para Core Web Vitals

Recopilar los datos de Core Web Vitals en Next.js es sencillo ya que Next.js proporciona un método integrado para capturar los Core Web Vitals. Todo lo que necesitas hacer es exportar la función reportWebVitals en _app.tsx y listo.

Ahora, en sitios web con mucho tráfico, tiene poco sentido recopilar todos los datos de todos los usuarios. Podemos muestrear fácilmente el 50% o menos así:

c
export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital' && bInSample) {
  	console.log(metric)
  }
}

Ahora, si por ejemplo queremos enviar las métricas de Core Web Vitals a analytics, todo lo que necesitamos hacer es:

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    window.gtag('event', name, {
      event_category: 'web-vital',
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // values must be integers
      event_label: metric.id, // id unique to current page load
      non_interaction: true, // avoids affecting bounce rate.
    })  
  }
}

Y con la misma facilidad podemos enviar los Core Web Vitals a cualquier backend de analytics personalizado:

  const url = 'https://example.com/custom-analytics'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Recuerda que al leer los datos RUM de los Core Web Vitals necesitas usar el percentil 75.

Herramientas de terceros que recopilan Core Web Vitals en Next.js

Hay algunas herramientas de terceros que recopilan Core Web Vitals en Next.js. Por ejemplo NewRelic y Sentry. Ahora, como experto en Core Web Vitals, no soy fan. Sentry lanza algunas solicitudes de alta prioridad temprano en el proceso de renderizado y NewRelic también ralentiza tu sitio considerablemente. Dicho esto, entiendo la importancia de estas herramientas y si ya usas una de ellas, harán un gran trabajo recopilando y reportando los Core Web Vitals.s