Qué son las Core Web Vitals y cómo mejorarlas para SEO

Las Core Web Vitals son las tres métricas que Google usa para medir de forma objetiva la experiencia del usuario en una página: velocidad de carga del contenido principal, rapidez de respuesta al interactuar y estabilidad visual. Cumplirlas no es opcional si quieres que Google te trate bien en el ranking y que los usuarios no se marchen por una web lenta o que “salta”. En este artículo verás qué son exactamente, qué umbrales marca Google y cómo mejorarlas con un enfoque práctico.

Objetivo: que entiendas LCP, INP y CLS, sepas medirlas y tengas un checklist claro para optimizar tu sitio.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son tres indicadores estandarizados por Google para cuantificar la calidad de la experiencia de página:

1. LCP (Largest Contentful Paint) — Mide el tiempo hasta que se muestra el elemento más grande visible (por ejemplo una imagen hero o un bloque de texto). Refleja si el contenido principal llega rápido.
2. INP (Interaction to Next Paint) — Mide cuánto tarda la página en responder a la primera interacción del usuario (clic, toque, tecla). Sustituyó a FID en 2024 y captura mejor la capacidad de respuesta.
3. CLS (Cumulative Layout Shift) — Mide los “saltos” visuales: elementos que se mueven de sitio mientras la página carga (imágenes sin dimensiones, anuncios que empujan contenido, fuentes que cambian). Un CLS alto da sensación de inestabilidad.

Google los integra en las señales de experiencia de página. No son el único factor de ranking, pero un sitio que los cumple tiene más probabilidad de posicionar mejor y de retener a los usuarios.

Umbrales: qué considera Google “bueno”

Métrica	Bueno	Mejorar
LCP	≤ 2,5 s	> 2,5 s
INP	≤ 200 ms	> 200 ms
CLS	≤ 0,1	> 0,1

El informe de experiencia de página de Search Console y PageSpeed Insights te marcan en verde (bueno), naranja o rojo según estos umbrales. Prioriza las URLs o tipos de página que estén en “necesita mejorar” o “pobre”.

Cómo mejorar el LCP (velocidad del contenido principal)

El LCP suele ser una imagen grande, un bloque de texto o un vídeo. Para mejorarlo:

• Servidor y TTFB: Elige un hosting con buena respuesta (tiempo hasta el primer byte bajo). Un TTFB alto retrasa todo lo demás.
• Imágenes: Usa formatos modernos (WebP o AVIF), tamaños adecuados (no servir 3000px si se muestra a 800px) y width/height en el HTML para evitar reflows. Lazy loading para lo que no esté above the fold.
• CSS y JavaScript: Evita recursos que bloqueen el renderizado del contenido principal. Critical CSS inline si hace falta; el resto que no bloquee.
• Fuentes: Evita que las fuentes custom generen un parpadeo (FOIT/FOUT) que retrase el LCP; usa font-display: swap o preload cuando compense.

Revisa en Lighthouse o PageSpeed qué elemento se marca como LCP y optimiza ese recurso y la cadena de carga que lo afecta.

Cómo mejorar el INP (capacidad de respuesta)

INP refleja si la página responde rápido cuando el usuario hace clic o toca. Para mejorarlo:

• Menos JavaScript en el hilo principal: Mueve trabajo pesado a Web Workers o difiérelo. Evita ejecutar mucho código síncrono en el primer contacto.
• Dividir y diferir scripts: Carga solo lo necesario al inicio; el resto en diferido o bajo demanda.
• Eventos ligeros: En los manejadores de clic o input, haz el mínimo trabajo posible; si hay que procesar mucho, hazlo de forma asíncrona para no bloquear la respuesta visual.

Una página que “tarda en reaccionar” al clic suele tener INP alto; el usuario percibe la web como lenta aunque el LCP sea bueno.

Cómo mejorar el CLS (estabilidad visual)

CLS sube cuando elementos se mueven después de cargar. Para mantenerlo bajo 0,1:

• Imágenes y vídeos: Indica siempre width y height (o aspect-ratio) para que el navegador reserve el espacio antes de cargar el archivo.
• Iframes y embeds: Reserva espacio con un contenedor de altura fija o con aspect-ratio; evita que el iframe “empuje” el contenido al cargar.
• Anuncios o contenido dinámico: Insértalos en contenedores con altura reservada; no inyectes bloques sin espacio asignado arriba o al lado.
• Fuentes: Usa font-display: optional o swap y reserva espacio si el cambio de fuente altera mucho el layout (evitar que el texto “salte” al cargar la tipografía).

Revisa en Lighthouse la lista de elementos que contribuyen al CLS y corrige los que más peso tengan.

Herramientas para medir Core Web Vitals

• Google Search Console — Informe “Experiencia de página” con datos reales (CrUX): verás qué URLs tienen problemas en móvil o escritorio.
• PageSpeed Insights — Combina datos de campo (CrUX) y una simulación (Lighthouse) y te da recomendaciones concretas.
• Lighthouse — En Chrome DevTools (pestaña Lighthouse): análisis en tu entorno para reproducir y corregir problemas.
• web.dev — Documentación oficial de Google sobre métricas, umbrales y buenas prácticas.

Prioriza lo que Search Console marque como “necesita mejorar” o “pobre”; usa Lighthouse para iterar y comprobar que los cambios mejoran las métricas.

Checklist práctico: Core Web Vitals y SEO

1. Revisar Search Console — Identifica páginas o tipos de URL con LCP, INP o CLS en rojo o naranja.
2. Medir en PageSpeed Insights — Confirma el problema y lee las sugerencias (recursos que bloquean, imágenes sin optimizar, etc.).
3. LCP: Optimizar servidor, imágenes (formato, tamaño, dimensiones) y recursos que bloqueen el contenido principal.
4. INP: Reducir y diferir JavaScript; mantener los manejadores de interacción ligeros.
5. CLS: Asignar tamaño o aspect-ratio a imágenes, vídeos e iframes; no inyectar contenido dinámico sin reservar espacio.
6. Volver a medir — Tras cada cambio, comprobar en Lighthouse y, con el tiempo, en Search Console que los datos de campo mejoran.

Las Core Web Vitals son un precio de entrada: una web rápida y estable mejora la experiencia, el comportamiento del usuario y las señales que Google usa para el ranking. No sustituyen contenido ni estrategia, pero sin ellas el resto se resiente.

Conclusión

Las Core Web Vitals (LCP, INP y CLS) miden velocidad del contenido principal, capacidad de respuesta e estabilidad visual. Google las usa como señales de experiencia de página; cumplir los umbrales recomendados ayuda al posicionamiento y a la conversión. Usa Search Console para detectar problemas y PageSpeed Insights o Lighthouse para optimizar; prioriza LCP (servidor e imágenes), INP (JavaScript e interacción) y CLS (reservar espacio para medios y dinámicos). Con un checklist claro y medición continua, puedes llevar tu sitio a “bueno” en las tres métricas.