Core Web Vitals 2026: guía completa para PYMEs en Colombia
Tu sitio puede verse bonito, tener buen contenido y una oferta sólida — y aun así estar perdiendo tráfico orgánico porque Google lo considera "lento" o "inestable". Los Core Web Vitals son los culpables. Son las tres métricas de experiencia de usuario que Google incorporó oficialmente a su algoritmo de ranking en 2021 y que en 2026 siguen siendo determinantes para tu posicionamiento.
Este artículo te explica qué mide cada métrica, qué las daña y cómo optimizarlas con acciones concretas.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son un subconjunto de las métricas de Web Vitals de Google. Miden tres aspectos críticos de la experiencia del usuario:
- LCP (Largest Contentful Paint): velocidad de carga del contenido principal
- CLS (Cumulative Layout Shift): estabilidad visual — qué tanto "salta" tu página mientras carga
- INP (Interaction to Next Paint): respuesta a las interacciones del usuario
Estas métricas son parte del "Page Experience Signal" de Google, que es uno de los factores de ranking del algoritmo. No son el factor más importante (el contenido relevante sigue siendo el rey), pero son el factor de desempate: entre dos páginas con contenido similar, la que tenga mejores Core Web Vitals rankeará más arriba.
Además de SEO, estas métricas impactan directamente en conversión. Un estudio de Google encontró que los sitios con buenos Core Web Vitals tienen tasas de rebote un 24% más bajas y un 22% más de tiempo en página.
LCP — Largest Contentful Paint
¿Qué mide?
El LCP mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en el viewport inicial del usuario. Generalmente es:
- Una imagen hero above-the-fold
- Un video poster (imagen de portada del video)
- Un bloque de texto grande
- Una imagen de fondo con
background-image
Umbrales de Google
| Calificación | LCP |
|---|---|
| Bueno | ≤ 2.5 segundos |
| Necesita mejora | 2.5 - 4.0 segundos |
| Malo | > 4.0 segundos |
Las causas más comunes de LCP lento
Imágenes sin optimizar. Este es el culpable número uno. Una imagen JPG de 2MB en el banner principal puede hacer que tu LCP llegue a 6-8 segundos en conexiones 4G. La solución: usar formato WebP (30-50% más liviano que JPG) y comprimir a menos de 200KB para imágenes hero.
Sin priorización del recurso principal. El navegador no sabe que tu imagen hero es la más importante. Debes indicárselo con <link rel="preload" as="image"> en el <head> o con fetchpriority="high" en la etiqueta <img>.
Hosting lento o TTFB alto. Si el servidor tarda más de 800ms en responder (TTFB — Time to First Byte), es casi imposible tener un LCP bueno. Un CDN (Cloudflare, Vercel Edge Network) puede reducir el TTFB a menos de 200ms para usuarios en Colombia.
Fuentes web sin optimizar. Cargar 4 variantes de una fuente (regular, bold, italic, bold-italic) puede añadir 300-500ms al tiempo de renderizado. Usa font-display: swap y carga solo las variantes que realmente usas.
Cómo mejorar tu LCP
<!-- 1. Preload de la imagen hero -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<!-- 2. Imagen con prioridad explícita (Next.js) -->
<Image src="/hero.webp" priority fetchpriority="high" alt="Hero DigiEmi" />
<!-- 3. Fuentes con font-display swap -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<style>
@font-face {
font-display: swap;
}
</style>
En Next.js, usar priority en el componente <Image> para la imagen above-the-fold es obligatorio. Sin ese atributo, Next.js carga la imagen de forma lazy (diferida) y eso arruina el LCP.
CLS — Cumulative Layout Shift
¿Qué mide?
El CLS mide cuánto se mueven inesperadamente los elementos de la página mientras carga. Si un botón de "Comprar ahora" baja 200 píxeles justo cuando vas a hacer clic y terminas haciendo clic en un anuncio — eso es un Layout Shift. El CLS suma todos esos movimientos inesperados durante la vida de la página.
Umbrales de Google
| Calificación | CLS |
|---|---|
| Bueno | ≤ 0.1 |
| Necesita mejora | 0.1 - 0.25 |
| Malo | > 0.25 |
El valor es adimensional — no es segundos ni píxeles, es una puntuación compuesta que tiene en cuenta el tamaño y la distancia del desplazamiento.
Las causas más comunes de CLS alto
Imágenes sin dimensiones explícitas. Cuando el navegador carga una imagen pero no sabe su tamaño, reserva cero espacio para ella. Cuando finalmente carga, empuja todo el contenido hacia abajo. La solución es simple: siempre definir width y height en las imágenes.
Anuncios, embeds o iframes sin espacio reservado. Un banner publicitario que "aparece" después de cargar la página es uno de los CLS más comunes. Reserva el espacio con un contenedor de altura fija antes de que cargue el anuncio.
Fuentes web que cambian el layout. Cuando la fuente web reemplaza a la fuente del sistema (FOUT — Flash of Unstyled Text), si los caracteres tienen métricas diferentes, el texto puede "saltar". font-display: swap con size-adjust puede mitigar esto.
Contenido inyectado dinámicamente above-the-fold. Un banner de cookies, un chat widget, una notificación de "tienes un descuento" — si se inserta por encima del contenido principal, genera CLS. Usa position: fixed o position: sticky para estos elementos.
Cómo mejorar tu CLS
/ 1. Reservar espacio para imágenes /
img {
width: 100%;
height: auto;
aspect-ratio: 16/9; / Evita el layout shift /
}
/ 2. Espacio para anuncios /
.ad-container {
min-height: 250px; / Altura mínima del banner más común /
}
/ 3. Contenedores de tamaño fijo para elementos dinámicos /
.notification-bar {
height: 48px; / Altura fija, aunque esté vacío /
}
INP — Interaction to Next Paint
¿Qué mide?
El INP (Interaction to Next Paint) reemplazó al FID (First Input Delay) en marzo de 2024 como Core Web Vital oficial. Mide el tiempo desde que el usuario interactúa (clic, teclado, toque) hasta que la página actualiza visualmente como respuesta.
No solo mide la primera interacción como el FID — mide todas las interacciones durante la visita y reporta la peor de ellas (percentil 98).
Umbrales de Google
| Calificación | INP |
|---|---|
| Bueno | ≤ 200 ms |
| Necesita mejora | 200 - 500 ms |
| Malo | > 500 ms |
Las causas más comunes de INP alto
JavaScript pesado en el hilo principal. Cuando el hilo principal del navegador está ocupado ejecutando JavaScript (analytics, chatbots, frameworks pesados), las interacciones del usuario se bloquean. El usuario hace clic y no pasa nada por 500ms — terrible UX.
Hidratación costosa en frameworks SPA. En React, la hidratación de componentes complejos puede bloquear el hilo principal por varios segundos en dispositivos móviles de gama media, que son los más usados en Colombia.
Event handlers lentos. Si el handler de un clic ejecuta cálculos pesados, consultas DOM complejas o re-renders masivos, el INP sufre. Usar requestIdleCallback o startTransition en React puede diferir ese trabajo.
Cómo mejorar tu INP
// 1. Diferir trabajo no crítico
function handleFilterChange(value) {
// Actualizar UI inmediatamente (crítico)
setInputValue(value);
// Diferir el filtrado pesado (no crítico)
startTransition(() => {
setFilteredResults(filterData(value));
});
}
// 2. Lazy loading de scripts pesados
const HeavyComponent = dynamic(() => import('./HeavyChart'), {
ssr: false,
loading: () => <Skeleton />
});
// 3. Debounce en inputs
const debouncedSearch = useMemo(
() => debounce((query) => search(query), 300),
[]
);
Cómo medir tus Core Web Vitals
Hay dos tipos de datos para medir CWV:
Datos de laboratorio (sintéticos): Simulan condiciones de carga. Son útiles para desarrollo pero no reflejan la experiencia real de tus usuarios.
- PageSpeed Insights (pagespeed.web.dev): analiza tu URL con Lighthouse y muestra datos reales del CrUX (Chrome User Experience Report)
- Lighthouse en Chrome DevTools: ideal durante desarrollo, simula redes lentas y dispositivos móviles
- WebPageTest.org: análisis más detallado con filmstrip visual de la carga
- Search Console → Core Web Vitals: Google te muestra qué URLs tienen problemas según datos reales de Chrome
- Vercel Speed Insights: si usas Vercel, tienes RUM gratis con datos por dispositivo y región
Para PYMEs en Colombia, el dispositivo de prueba más representativo es un Android de gama media (Moto G Power o similar) en conexión 4G. Si tus métricas son buenas en ese escenario, estás bien cubierto para el 70% de tu audiencia real.
El impacto real en SEO y conversión
Tener buenos Core Web Vitals no garantiza el puesto 1 en Google — el contenido y los backlinks siguen siendo más relevantes. Pero ignorarlos tiene dos consecuencias concretas:
En SEO: Google puede penalizar páginas con CWV "Malos" en rankings. Esto afecta especialmente en búsquedas donde los sitios competidores tienen contenido similar — ahí los CWV deciden quién gana.
En conversión: Estudios de industria muestran que cada segundo adicional de carga reduce la tasa de conversión entre 4-7%. Un LCP de 5 segundos versus 2 segundos puede significar 15-20% menos ventas en e-commerce.
En DigiEmi, toda página que desarrollamos tiene como objetivo Lighthouse Score > 90 en las cuatro categorías: Performance, Accessibility, Best Practices y SEO. Si tu sitio actual no llega a ese umbral, el servicio de Optimización Web está diseñado específicamente para llevarlo ahí — con métricas reales antes y después.
¿Quieres aplicar esto en tu negocio?
Agenda una consulta gratuita de 30 minutos. Analizamos tu situación actual y te decimos por dónde empezar.