Core Web Vitals: Cómo Optimizar la Velocidad de tu Web en 2026

Los Core Web Vitals son un conjunto de métricas que Google utiliza para medir la experiencia de usuario en tu web. Desde 2021 son un factor de posicionamiento, lo que significa que una web lenta pierde posiciones en Google.

🔍 ¿Quieres saber cómo está tu web? Usa nuestra herramienta gratuita de auditoría SEO para analizar tus Core Web Vitals.

¿Qué son los Core Web Vitals?

Son tres métricas principales que miden aspectos críticos de la experiencia de usuario:

Métrica	Qué mide	Bueno	Malo
LCP (Largest Contentful Paint)	Velocidad de carga del contenido principal	≤ 2.5s	> 4s
INP (Interaction to Next Paint)	Capacidad de respuesta a interacciones	≤ 200ms	> 500ms
CLS (Cumulative Layout Shift)	Estabilidad visual (saltos de contenido)	≤ 0.1	> 0.25

LCP: Largest Contentful Paint

¿Qué es?

El tiempo que tarda en renderizarse el elemento más grande visible en la pantalla (normalmente una imagen hero o un bloque de texto).

Causas comunes de mal LCP

• Imágenes sin optimizar (demasiado pesadas)
• Servidor lento (tiempo de respuesta alto)
• CSS y JavaScript que bloquean el renderizado
• Fuentes web que tardan en cargar

Cómo mejorar el LCP

1. Optimiza imágenes:

• Usa formatos modernos: WebP o AVIF
• Comprime sin perder calidad (TinyPNG, Squoosh)
• Usa tamaños adecuados (no cargues imágenes de 4000px para mostrar a 800px)
• Implementa lazy loading para imágenes below the fold
• Preload para la imagen LCP: <link rel="preload" as="image" href="...">

2. Mejora el servidor:

• Usa un hosting de calidad (evita hosting compartido barato)
• Activa la compresión GZIP/Brotli
• Usa una CDN (Cloudflare, AWS CloudFront)
• Implementa caché del navegador

3. Optimiza CSS crítico:

• Inlinea el CSS crítico (above the fold)
• Carga el resto del CSS de forma diferida
• Elimina CSS no utilizado (PurgeCSS)

4. Optimiza fuentes:

• Usa font-display: swap
• Preload para fuentes críticas
• Considera fuentes del sistema como fallback

INP: Interaction to Next Paint

¿Qué es?

Mide cuánto tarda la página en responder visualmente después de que el usuario interactúa (clic, toque, tecla). INP reemplazó a FID (First Input Delay) en marzo 2024.

Causas comunes de mal INP

• JavaScript pesado que bloquea el hilo principal
• Event handlers lentos
• Demasiadas re-renderizaciones
• Tareas largas de JavaScript (> 50ms)

Cómo mejorar el INP

1. Reduce y optimiza JavaScript:

• Elimina código JavaScript no utilizado
• Divide el código en chunks (code splitting)
• Usa lazy loading para componentes no críticos
• Minifica y comprime el JavaScript

2. Optimiza event handlers:

• Usa debounce/throttle para eventos frecuentes (scroll, resize)
• Evita manipulaciones DOM costosas en handlers
• Usa requestAnimationFrame para animaciones

3. Rompe tareas largas:

• Divide tareas de más de 50ms usando setTimeout o requestIdleCallback
• Usa Web Workers para cálculos pesados
• Implementa virtualización para listas largas

4. Optimiza el framework:

• React: Usa useMemo, useCallback, React.memo
• Vue: Usa v-once, computed properties
• Evita re-renders innecesarios

CLS: Cumulative Layout Shift

¿Qué es?

Mide la estabilidad visual: cuánto se "mueve" el contenido mientras la página carga. Cuando intentas hacer clic y el botón se mueve, eso es un layout shift.

Causas comunes de mal CLS

• Imágenes sin dimensiones especificadas
• Anuncios que se cargan tarde
• Fuentes web que cambian el tamaño del texto
• Contenido dinámico inyectado sin espacio reservado

Cómo mejorar el CLS

1. Siempre especifica dimensiones:

<img src="imagen.jpg" width="800" height="600" alt="...">

/* O con CSS aspect-ratio */
img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

2. Reserva espacio para contenido dinámico:

• Usa placeholders/skeletons mientras carga
• Define altura mínima para contenedores dinámicos
• Precarga anuncios con espacio reservado

3. Optimiza la carga de fuentes:

@font-face {
  font-family: 'MiFuente';
  font-display: optional; /* o swap */
  src: url('mifuente.woff2') format('woff2');
}

4. Evita insertar contenido above the fold:

• No insertes banners, notificaciones o popups que muevan el contenido
• Si es necesario, usa transform en lugar de mover elementos

Herramientas para Medir Core Web Vitals

Datos de laboratorio (simulados)

• Lighthouse (DevTools de Chrome)
• PageSpeed Insights: pagespeed.web.dev
• WebPageTest: webpagetest.org

Datos de campo (usuarios reales)

• Google Search Console: Experiencia de página
• Chrome UX Report (CrUX): Datos reales de Chrome
• Web Vitals Extension: Extensión de Chrome

⚠️ Importante: Los datos de campo (usuarios reales) son los que Google usa para el ranking. Los datos de laboratorio son útiles para diagnosticar pero pueden diferir de la experiencia real.

Checklist de Optimización

LCP (objetivo: ≤ 2.5s)

• ☐ Imágenes en formato WebP/AVIF
• ☐ Imágenes con tamaño adecuado
• ☐ Preload del elemento LCP
• ☐ CSS crítico inlineado
• ☐ Servidor con TTFB < 200ms
• ☐ CDN configurada
• ☐ Caché del navegador activa

INP (objetivo: ≤ 200ms)

• ☐ JavaScript minimizado y comprimido
• ☐ Código no usado eliminado
• ☐ Code splitting implementado
• ☐ Tareas largas divididas
• ☐ Event handlers optimizados
• ☐ Third-party scripts diferidos

CLS (objetivo: ≤ 0.1)

• ☐ Todas las imágenes con width/height
• ☐ Espacios reservados para anuncios
• ☐ font-display configurado
• ☐ No hay contenido insertado arriba
• ☐ Skeletons para contenido dinámico

Impacto en el SEO

Los Core Web Vitals son un factor de ranking confirmado por Google. Aunque no son el factor más importante (el contenido sigue siendo rey), pueden ser el desempate entre dos páginas con contenido similar.

Además, una web rápida tiene:

• Mayor tasa de conversión: Amazon calculó que 100ms de mejora = +1% ingresos
• Menor tasa de rebote: Los usuarios abandonan webs lentas
• Mejor experiencia móvil: Crucial con el Mobile-First de Google

Preguntas Frecuentes

¿Cuánto afectan los Core Web Vitals al SEO?

Son un factor de ranking, pero no el más importante. Sin embargo, si tu competencia tiene contenido similar y mejores Core Web Vitals, ellos posicionarán mejor.

¿Cada cuánto debo revisar los Core Web Vitals?

Mensualmente es suficiente. Google actualiza los datos de CrUX cada 28 días aproximadamente.

¿Puedo pasar de "malo" a "bueno" rápidamente?

Técnicamente sí, pero los datos de campo tardan 28 días en actualizarse en Google. Planifica con tiempo.

Conclusión

Optimizar los Core Web Vitals no es solo para SEO: es ofrecer una mejor experiencia a tus usuarios. Una web rápida y estable convierte más, rebota menos y posiciona mejor.

🚀 ¿Tu web necesita optimización?

En Grupo ZAS analizamos y optimizamos los Core Web Vitals de tu web. Mejoramos la velocidad, la experiencia de usuario y tu posicionamiento.

Analiza tu web gratis →