Core Web Vitals en Next.js: qué medir y qué ignorar
LCP, CLS e INP explicados sin humo, con las tres causas que provocan la mayoría de los fallos en producción.
Escrito por KillaQ
Los Core Web Vitals se explican mal casi siempre. Se presentan como tres siglas que hay que "poner en verde", cuando en realidad son tres preguntas distintas sobre la experiencia de una página: cuánto tarda en verse, cuánto se mueve mientras carga y cuánto tarda en responder cuando la tocas.
LCP: cuándo aparece lo importante
El Largest Contentful Paint mide cuándo se pinta el elemento más grande del área visible. En la práctica, en un sitio de marketing casi siempre es la imagen del hero o el titular.
Las tres causas que vemos una y otra vez:
- La imagen del hero se carga en diferido.
loading="lazy"en el elemento LCP es un error clásico: retrasa exactamente lo que debería llegar primero. - Fuentes que bloquean el render. Una fuente servida desde un CDN externo añade una conexión nueva antes de poder pintar texto. Autoalojarla con
next/fontelimina esa cadena. - JavaScript innecesario en el camino crítico. Si el hero necesita hidratación para mostrarse, no es un hero: es una aplicación disfrazada de portada.
CLS: el salto que rompe la confianza
El Cumulative Layout Shift penaliza el contenido que se mueve después de aparecer. Casi siempre viene de imágenes sin dimensiones declaradas, de banners insertados encima del contenido o de fuentes que cambian de métrica al cargar.
La regla práctica: todo lo que ocupe espacio en la página debe reservarlo antes de tenerlo. Un esqueleto de carga con la misma geometría que el contenido final resuelve el problema y, de paso, se ve mejor que un spinner.
INP: la métrica que sustituyó a FID
El Interaction to Next Paint mide la latencia real de las interacciones a lo largo de toda la visita, no solo la primera. Es más honesta que FID y más difícil de engañar.
Aquí el enemigo es el trabajo largo en el hilo principal: manejadores que recalculan listas completas, animaciones sobre propiedades que fuerzan layout (width, height, top) en lugar de transform y opacity, y estado global que provoca re-renderizados en cascada.
Qué ignorar
No persigas una puntuación de laboratorio perfecta. Lighthouse en tu portátil con fibra no es tu usuario. Lo que importa son los datos de campo: el percentil 75 de usuarios reales, en los dispositivos y redes que realmente usan.
Mide primero, optimiza después, y solo lo que falle contra un presupuesto que hayas escrito antes de empezar.