Core Web Vitals: Cómo mejorarlos y por qué importan para el SEO

Las tres Core Web Vitals explicadas

Cada Core Web Vital mide un aspecto diferente de la experiencia de usuario: velocidad de carga percibida, capacidad de respuesta e estabilidad visual. Juntas, ofrecen una imagen completa de cómo experimenta el usuario tu web.

• LCP (Largest Contentful Paint): mide cuánto tarda en renderizarse el elemento más grande visible. Objetivo: menos de 2.5 segundos
• INP (Interaction to Next Paint): mide la latencia de las interacciones del usuario durante toda la sesión. Objetivo: menos de 200 milisegundos
• CLS (Cumulative Layout Shift): mide los cambios inesperados de diseño mientras se carga la página. Objetivo: puntuación menor a 0.1

Cómo mejorar el LCP (Largest Contentful Paint)

El LCP mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en el viewport. Normalmente suele ser la imagen hero, un vídeo o un bloque de texto grande. Un LCP rápido transmite al usuario que la página es útil.

Los principales factores que afectan al LCP son: tiempos de respuesta del servidor lentos, bloqueo de renderizado por CSS y JavaScript, carga lenta de recursos y renderizado del lado del cliente.

• Optimizar el TTFB con un hosting rápido y caché de página
• Precargar la imagen LCP con para priorizarla
• Evitar lazy loading en la imagen hero o elemento LCP
• Eliminar CSS y JavaScript que bloquean el renderizado
• Usar formatos de imagen modernos (WebP/AVIF) para reducir el tiempo de descarga
• Servir fuentes web desde el propio dominio y usar font-display: swap
• Implementar SSR o pre-renderizado si usas frameworks JavaScript

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

INP reemplazó a FID en marzo de 2024 y es una métrica mucho más exigente. Mientras FID solo medía la primera interacción, INP evalúa la capacidad de respuesta durante toda la sesión del usuario, midiendo la latencia entre que el usuario interactúa (clic, toque, tecla) y la siguiente actualización visual.

Un mal INP indica que la página tiene JavaScript que bloquea el hilo principal durante demasiado tiempo, impidiendo que el navegador responda rápidamente a las acciones del usuario.

• Dividir tareas JavaScript largas en tareas más pequeñas (yield to main thread)
• Reducir la cantidad de JavaScript cargado y ejecutado
• Mover operaciones pesadas a Web Workers
• Usar requestAnimationFrame para actualizaciones visuales
• Evitar reflows y repaints innecesarios del DOM
• Optimizar event handlers para que sean rápidos y no bloqueen
• Diferir la carga de scripts de terceros (analytics, chat widgets)

Cómo mejorar el CLS (Cumulative Layout Shift)

El CLS mide los cambios inesperados de posición de los elementos visibles mientras la página se carga. Un CLS alto es frustrante porque el usuario puede hacer clic en el enlace equivocado cuando el contenido se desplaza inesperadamente.

Las causas más comunes de CLS son imágenes y vídeos sin dimensiones definidas, anuncios que se insertan dinámicamente, fuentes web que causan FOIT/FOUT y contenido inyectado por JavaScript.

• Especificar width y height en todas las imágenes y vídeos
• Reservar espacio para anuncios y embeds con contenedores de tamaño fijo
• Usar font-display: swap junto con tamaños de fuente de fallback similares
• Evitar insertar contenido dinámico por encima del contenido existente
• Usar la propiedad CSS aspect-ratio para contenedores responsive
• Precargar las fuentes web críticas para minimizar cambios de renderizado

Cómo medir las Core Web Vitals

Google ofrece datos de Core Web Vitals de dos tipos: datos de laboratorio (simulados) y datos de campo (usuarios reales). Los datos de campo son los que Google usa para el ranking, ya que reflejan la experiencia real de los usuarios.

Google Search Console tiene un informe dedicado de Core Web Vitals que muestra las URLs agrupadas por estado (bueno, necesita mejora, deficiente). Este informe usa datos de campo del Chrome User Experience Report (CrUX) y es el más fiable para evaluar tu posición.

• Google Search Console > Experiencia > Core Web Vitals: datos reales de usuarios
• PageSpeed Insights: combina datos de campo y laboratorio con recomendaciones
• Chrome DevTools > Performance: depuración detallada de problemas
• web-vitals library: integra medición en tu propio analytics
• CrUX Dashboard: informes históricos y comparativos de rendimiento

Impacto real de las Core Web Vitals en el SEO

Es importante contextualizar: las Core Web Vitals son un factor de posicionamiento, pero no el más importante. El contenido relevante y los backlinks siguen teniendo mucho más peso. Sin embargo, a igualdad de otros factores, una web con buenas Core Web Vitals aparecerá por encima de una con malas métricas.

Donde más impacto tienen es como desempate. Si dos páginas compiten por la misma posición con contenido y autoridad similares, las Core Web Vitals pueden determinar cuál aparece primero. Además, una mala experiencia de usuario aumenta la tasa de rebote, lo que sí afecta indirectamente al SEO.