Core Web Vitals: Qué Son y Cómo Mejorarlos

¿Qué son los Core Web Vitals y por qué afectan al SEO?

Los Core Web Vitals son un conjunto de métricas definidas por Google que miden la experiencia real del usuario al interactuar con una página web. Estas métricas forman parte oficial de los factores de ranking de Google desde 2021, lo que significa que una web con malas puntuaciones puede perder posiciones frente a competidores con mejor rendimiento, incluso si el contenido es similar.

A diferencia de otras métricas técnicas, los Core Web Vitals se centran en lo que realmente experimenta el usuario: la velocidad con la que ve el contenido, la rapidez con la que puede interactuar y la estabilidad visual de la página. Esta orientación al usuario real es lo que los convierte en un pilar del SEO técnico moderno.

Google recopila estos datos de usuarios reales a través del Chrome User Experience Report (CrUX), lo que significa que no puedes simular buenos resultados. Las métricas reflejan la experiencia real de las personas que visitan tu web, con sus conexiones, dispositivos y condiciones reales.

Las tres métricas Core Web Vitals explicadas

Google define tres métricas principales que componen los Core Web Vitals. Cada una mide un aspecto diferente de la experiencia de carga e interacción, y todas deben estar en niveles óptimos para obtener el beneficio completo en el ranking.

Es fundamental entender que estas métricas se miden a nivel de página individual, no del sitio completo. Esto significa que puedes tener páginas con excelentes puntuaciones y otras con problemas graves. Google evalúa cada URL de forma independiente.

• Largest Contentful Paint (LCP): Mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en el viewport. Un buen LCP es inferior a 2,5 segundos. Suele ser una imagen hero, un bloque de texto grande o un vídeo.
• Interaction to Next Paint (INP): Sustituye al anterior FID desde marzo 2024. Mide la latencia de todas las interacciones del usuario durante la visita y reporta la peor. Un buen INP es inferior a 200 milisegundos. Evalúa clics, toques y pulsaciones de teclado.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual cuantificando cuánto se mueven los elementos de la página durante la carga. Un buen CLS es inferior a 0,1. Los cambios inesperados de layout frustran al usuario y provocan clics accidentales.

Cómo medir los Core Web Vitals de tu web

Google proporciona múltiples herramientas para medir los Core Web Vitals, cada una con un enfoque diferente. Las herramientas de campo muestran datos de usuarios reales, mientras que las de laboratorio simulan condiciones controladas para diagnosticar problemas específicos.

PageSpeed Insights es la herramienta más accesible y completa. Combina datos de campo del CrUX con un análisis de laboratorio de Lighthouse, proporcionándote tanto la experiencia real de tus usuarios como diagnósticos detallados de qué mejorar. Google Search Console ofrece un informe específico de Core Web Vitals que muestra el estado de todas tus URLs agrupadas por tipo de problema.

Las herramientas SEO gratuitas de Google incluyen también Chrome DevTools para análisis en tiempo real, Lighthouse para auditorías completas y la extensión Web Vitals para Chrome que muestra las métricas en tiempo real mientras navegas. Para un monitoreo continuo, herramientas como CrUX Dashboard en Looker Studio permiten visualizar la evolución de tus métricas a lo largo del tiempo.

Cómo mejorar el Largest Contentful Paint (LCP)

El LCP es frecuentemente la métrica más problemática porque depende de múltiples factores: velocidad del servidor, carga de recursos, renderizado del CSS y optimización de imágenes. Mejorar el LCP requiere un enfoque sistémico que aborde los cuellos de botella en cada fase.

El primer paso es identificar cuál es tu elemento LCP. Usa Chrome DevTools o PageSpeed Insights para determinarlo. Si es una imagen, asegúrate de que está en formato moderno (WebP o AVIF), tiene dimensiones adecuadas y utiliza lazy loading solo para imágenes below the fold; la imagen LCP nunca debe ser lazy loaded.

• Optimizar el tiempo de respuesta del servidor: Un TTFB superior a 800ms ya es problemático. Usa CDN, caché de servidor, mejora las consultas de base de datos y considera upgrade de hosting si es necesario.
• Eliminar recursos que bloquean el renderizado: CSS y JavaScript que bloquean el renderizado retrasan el LCP. Usa CSS crítico inline, defer/async para scripts y elimina CSS no utilizado.
• Precargar el recurso LCP: Usa la directiva <link rel='preload'> para indicar al navegador que descargue el recurso LCP con prioridad máxima desde el inicio.
• Optimizar imágenes: Usa formatos modernos (WebP/AVIF), tamaños adecuados con srcset, compresión agresiva y elimina metadata innecesaria. Esto puede reducir el LCP en segundos.
• Usar CDN para activos estáticos: Sirve imágenes, CSS y JS desde una CDN cercana al usuario. La reducción de latencia de red impacta directamente en el LCP.

Cómo mejorar el Interaction to Next Paint (INP)

El INP mide la capacidad de respuesta de tu web a las interacciones del usuario. Un INP alto indica que el hilo principal del navegador está ocupado ejecutando JavaScript y no puede procesar las interacciones del usuario con la velocidad esperada. Es una métrica especialmente crítica en páginas con mucha interactividad.

El JavaScript es casi siempre el culpable de un mal INP. Los scripts de terceros (analytics, chat widgets, ad scripts, redes sociales) suelen ser los principales infractores porque ejecutan código pesado en el hilo principal. Audita todos tus scripts de terceros y elimina los que no aporten valor real.

Las técnicas como code splitting, tree shaking y carga diferida de módulos JavaScript pueden reducir drásticamente el INP. Usa el Web Workers API para mover tareas pesadas fuera del hilo principal, y considera frameworks modernos que optimizan automáticamente la hidratación y la interactividad.

Cómo mejorar el Cumulative Layout Shift (CLS)

El CLS mide los cambios inesperados de layout que frustran al usuario, como cuando estás a punto de hacer clic en un botón y la página salta porque se cargó una imagen o un anuncio encima. Es quizás la métrica más fácil de entender y la que más molesta a los usuarios.

La causa más común de mal CLS son las imágenes y vídeos sin dimensiones definidas en el HTML. Cuando el navegador no conoce el tamaño de un media antes de descargarlo, reserva cero espacio y luego empuja todo el contenido cuando finalmente se renderiza. La solución es simple: añade siempre atributos width y height a todas tus imágenes y vídeos.

• Definir dimensiones de imágenes y vídeos: Siempre incluye width y height en el HTML o usa aspect-ratio en CSS. Esto permite al navegador reservar espacio antes de la descarga.
• Reservar espacio para contenido dinámico: Anuncios, embeds y contenido cargado dinámicamente deben tener un contenedor con tamaño mínimo definido para evitar saltos.
• Evitar insertar contenido sobre contenido existente: Nunca insertes banners, avisos o elementos encima del contenido visible salvo en respuesta a una interacción directa del usuario.
• Usar font-display: swap con precarga: Las fuentes web pueden causar layout shift cuando se cargan. Usa font-display: swap y precarga las fuentes críticas con <link rel='preload'>.
• Manejar transiciones y animaciones correctamente: Usa transform y opacity para animaciones en lugar de propiedades que provocan reflow como width, height, top o left.

Core Web Vitals en dispositivos móviles vs. escritorio

Google mide y evalúa los Core Web Vitals por separado para móvil y escritorio, y dado que utiliza el índice mobile-first, las métricas móviles son las que más impactan en tu posicionamiento. Es habitual que una web tenga buenas puntuaciones en escritorio pero falle en móvil debido a las limitaciones de procesamiento y red de los dispositivos móviles.

Los problemas de INP suelen ser más graves en móvil porque los procesadores de los teléfonos son significativamente menos potentes que los de un ordenador de escritorio. JavaScript que se ejecuta rápidamente en un portátil puede bloquear el hilo principal durante cientos de milisegundos en un móvil de gama media.

Para una estrategia SEO efectiva, prioriza siempre la optimización móvil. Testea con dispositivos reales además de emuladores, y utiliza la throttling de Chrome DevTools para simular condiciones de red y CPU típicas de dispositivos móviles. Recuerda que la mayoría de tu tráfico probablemente proviene de móviles.

Plan de acción: checklist de optimización de Core Web Vitals

Mejorar los Core Web Vitals requiere un enfoque priorizado. No intentes arreglarlo todo a la vez; en su lugar, identifica los problemas con mayor impacto y abródalos sistemáticamente. Google proporciona recomendaciones específicas en PageSpeed Insights ordenadas por impacto potencial.

Comienza por las soluciones con mayor retorno: optimizar imágenes suele mejorar LCP y CLS simultáneamente, y eliminar JavaScript innecesario mejora tanto LCP como INP. Estas acciones de alto impacto pueden transformar tus métricas en días, no meses.

Establece un sistema de monitorización continua usando CrUX y alertas de regresión. Los Core Web Vitals pueden degradarse fácilmente cuando se añaden nuevos scripts, contenidos o funcionalidades. Un pipeline de CI/CD que incluya pruebas de rendimiento automatizadas con Lighthouse CI es la mejor garantía de que tus mejoras se mantienen en el tiempo.