Los Core Web Vitals son las tres métricas con las que Google resume la experiencia de usuario de una web: velocidad de carga, capacidad de respuesta y estabilidad visual. Desde que forman parte de las señales de ranking, aprobar estas métricas dejó de ser un detalle técnico para convertirse en una cuestión de visibilidad. Esta es nuestra guía práctica, la misma que aplicamos en cada proyecto.
Las tres métricas, explicadas
LCP — Largest Contentful Paint
Mide cuánto tarda en pintarse el elemento más grande visible (normalmente la imagen o el titular del hero). Es la métrica de "cuándo veo algo útil".
Umbral: bueno < 2,5 s · necesita mejora < 4 s · pobre > 4 s
INP — Interaction to Next Paint
Sustituyó a FID como métrica de interactividad. Mide cuánto tarda la página en responder visualmente cuando el usuario toca un botón, abre un menú o escribe en un campo. Un INP alto se percibe como una web "que se atasca".
Umbral: bueno < 200 ms · necesita mejora < 500 ms · pobre > 500 ms
CLS — Cumulative Layout Shift
Mide los saltos de diseño durante la carga: ese banner que aparece de pronto y te hace pulsar donde no querías. Se calcula acumulando cuánto se desplaza el contenido visible.
Umbral: bueno < 0,1 · necesita mejora < 0,25 · pobre > 0,25
Las optimizaciones con más impacto
Para mejorar el LCP
- Optimiza la imagen del hero: formato WebP o AVIF, dimensiones ajustadas a cada pantalla (
srcset) y precarga confetchpriority="high". - Sirve desde un CDN: la distancia física al servidor es latencia pura. Un CDN coloca tu web a pocos milisegundos de cualquier usuario.
- Elimina recursos que bloquean el renderizado: CSS crítico inline y JavaScript con
defer.
Para mejorar el INP
- Menos JavaScript: cada kilobyte se descarga, se parsea y se ejecuta. Audita qué librerías cargas y elimina las que no usas.
- Divide tareas largas: las operaciones que bloquean el hilo principal más de 50 ms se notan en cada pulsación.
- Cuidado con los scripts de terceros: chats, mapas y píxeles de seguimiento son los sospechosos habituales. Cárgalos en diferido o bajo demanda.
Para mejorar el CLS
- Reserva espacio para imágenes y vídeos con
widthyheight(oaspect-ratio). - Reserva hueco para anuncios y embeds antes de que carguen.
- Precarga las fuentes y usa
font-display: swappara evitar saltos de texto.
Cómo lo medimos en yuGraphik
Trabajamos con tres niveles de medición: PageSpeed Insights para el diagnóstico inicial, Lighthouse en cada build para detectar regresiones antes de publicar, y el informe de Core Web Vitals de Search Console para vigilar los datos de usuarios reales mes a mes.
Nuestra arquitectura por defecto —webs estáticas generadas con Next.js y servidas desde CDN con caché agresiva— aprueba las tres métricas de serie en la inmensa mayoría de los casos: no hay servidor que tarde en responder, ni base de datos que se sature, ni JavaScript que no se necesite.
Conclusión
Los Core Web Vitals no son una moda de Google: son la traducción a números de algo que tus visitantes sienten en cada visita. Diagnostica tu web (es gratis y tarda un minuto), prioriza las optimizaciones de esta guía y, si tu plataforma actual no da más de sí, plantéate una arquitectura pensada para el rendimiento desde el primer línea de código.
