Monitoreo real de Core Web Vitals en producción

Las métricas de Lighthouse en desarrollo son un excelente punto de partida, pero tienen una limitación fundamental: se ejecutan en un entorno controlado, con una velocidad de red simulada y una potencia de procesador estable. En el mundo real, tus usuarios acceden desde dispositivos móviles de gama media, con conexiones 3G intermitentes y navegadores con múltiples extensiones activas. Por eso, para Google y para el SEO de tu negocio, lo que realmente importa son las métricas de usuarios reales (RUM), capturadas a través del Chrome User Experience Report (CrUX).

Las tres métricas críticas

Actualmente, las Core Web Vitals se dividen en tres pilares de experiencia de usuario: LCP (Largest Contentful Paint), que mide la velocidad de carga visual; INP (Interaction to Next Paint), que evalúa la interactividad y reemplaza a la antigua métrica FID; y CLS (Cumulative Layout Shift), que mide la estabilidad visual de la página durante la carga y navegación.

Para asegurar que tus proyectos Next.js aprueben estas métricas en producción, no basta con optimizar una vez y olvidarse. Necesitas configurar un flujo de monitoreo constante que te alerte cuando una nueva actualización de código o de contenido afecte negativamente los tiempos de carga en dispositivos reales.

Cómo capturar métricas en Next.js

Next.js facilita enormemente la captura de estas métricas de forma nativa a través del hook useReportWebVitals o exportando una función personalizada en tu archivo _app (en arquitectura clásica) o mediante componentes de monitoreo en el App Router. Estas funciones capturan eventos de rendimiento directamente de la API de rendimiento del navegador y los reportan en un objeto estructurado con el nombre de la métrica, el valor y el identificador de la carga.

Puedes enviar estos datos a tu propio endpoint de telemetría, a servicios como Vercel Analytics, o a herramientas gratuitas como Google Analytics. El objetivo es recopilar una muestra representativa de datos que te permita ver en qué percentil se encuentran tus usuarios reales (especialmente el percentil 75, que es el que Google utiliza para determinar si un sitio es rápido y apto para SEO).

Optimizando el percentil 75

Si detectas que tu LCP es superior a 2.5 segundos en dispositivos reales, el problema suele estar en imágenes grandes sin optimizar, scripts de terceros (como píxeles de seguimiento o chats integrados) que bloquean el hilo principal, o respuestas del servidor lentas. Minimizar el código JavaScript del cliente, retrasar la carga de scripts no críticos y priorizar las imágenes del primer scroll mediante el atributo priority de Next.js son acciones críticas para corregir estas métricas en producción.