Informes personalizados

También es posible utilizar el relayer integrado que usa Next.js Speed Insights y enviar los datos a tu propio servicio o subirlos a Google Analytics.

Veamos cómo podríamos agregar esto ahora. Podemos añadirlo a la aplicación de demostración que hemos estado optimizando.

Utilizaremos un console.log para ver las métricas en tiempo real.

Para hacer esto, podemos aprovechar la función reportWebVitals proporcionada por Next.js.

Nota: Esto NO es necesario si acabas de completar las lecciones anteriores.

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

Abre pages/_app.js y exporta la siguiente función:

export function reportWebVitals(metric) {
  console.log(metric);
}

Luego construye e inicia tu aplicación:

npm run build && npm run start

Si abres Chrome, verás las métricas dentro de la consola de DevTools. También notarás que FID solo se activará cuando interactúes con la página.

Lectura adicional

• Next.js: Medición del rendimiento