Los Core Web Vitals son las métricas de experiencia de usuario que Google utiliza como señal de posicionamiento desde 2021. No son una moda ni una recomendación opcional: son un factor de ranking oficial que influye directamente en tu visibilidad orgánica.
En esta guía te explicamos qué mide cada métrica, cuáles son los umbrales que Google considera buenos y cómo mejorar cada una de forma práctica.
Las tres métricas Core Web Vitals
| Métrica | Qué mide | Bueno | Necesita mejora | Malo |
|---|---|---|---|---|
| LCP | Velocidad de carga del elemento principal | ≤ 2,5s | 2,5s - 4s | > 4s |
| INP | Respuesta a interacciones del usuario | ≤ 200ms | 200ms - 500ms | > 500ms |
| CLS | Estabilidad visual del layout | ≤ 0,1 | 0,1 - 0,25 | > 0,25 |
LCP — Largest Contentful Paint
El LCP mide cuánto tarda en renderizarse el elemento de contenido más grande visible en el viewport: generalmente una imagen hero, un vídeo o un bloque de texto grande.
Causas de un LCP lento
- Imágenes sin optimizar (demasiado pesadas o en formato incorrecto)
- TTFB (Time to First Byte) alto — el servidor responde lento
- CSS o JS bloqueante que retrasa el renderizado
- Imagen LCP sin preload
- Sin CDN o CDN mal configurado
Cómo mejorar el LCP
- Convierte las imágenes a formato WebP o AVIF (30-50% menos peso)
- Añade
<link rel="preload">para la imagen LCP en el HTML - Usa un CDN (Cloudflare, BunnyCDN) para reducir la latencia
- Activa la caché del servidor y compresión Gzip/Brotli
- Reduce el TTFB optimizando el hosting o migrando a uno más rápido
- Elimina CSS/JS bloqueante con defer y async
INP — Interaction to Next Paint
Desde marzo de 2024, el INP reemplazó al FID. Mide la latencia de todas las interacciones del usuario (clics, taps, pulsaciones de tecla) durante toda la sesión, no solo la primera.
Causas de un INP alto
- JavaScript pesado bloqueando el hilo principal
- Código de terceros (chats, analíticas, publicidad) ejecutándose en el main thread
- Efectos visuales complejos calculados con JavaScript en lugar de CSS
- Event listeners mal optimizados
Cómo mejorar el INP
- Audita y elimina scripts de terceros innecesarios
- Carga scripts de terceros con
asyncodefer - Usa CSS para animaciones en lugar de JavaScript
- Implementa code splitting para cargar solo el JS necesario
- Considera el uso de Web Workers para tareas pesadas
CLS — Cumulative Layout Shift
El CLS mide la estabilidad visual de la página: cuánto se desplazan los elementos mientras carga. Un CLS alto es lo que hace que un usuario haga clic en el botón equivocado porque la página "saltó" en el último momento.
Causas de un CLS alto
- Imágenes sin dimensiones definidas (width y height en el HTML)
- Anuncios que empujan el contenido al cargarse
- Fuentes web que sustituyen a la fuente del sistema (FOUT/FOIT)
- Contenido dinámico que se inserta por encima del existente
- Iframes sin dimensiones reservadas
Cómo mejorar el CLS
- Añade siempre
widthyheighta todas las imágenes del HTML - Reserva espacio para anuncios con contenedores de altura fija
- Usa
font-display: optionalo preloading de fuentes - Evita insertar contenido dinámico sobre el contenido existente
- Usa
aspect-ratioCSS para mantener proporciones
Cómo medir los Core Web Vitals
Datos de campo vs. datos de laboratorio: Google utiliza datos de campo (usuarios reales con Chrome) para el ranking. Las herramientas de laboratorio (Lighthouse) dan una aproximación, pero el informe que importa está en Google Search Console.
| Herramienta | Tipo de datos | Uso principal |
|---|---|---|
| Google Search Console | Campo (CrUX) | Ver estado real de tu sitio para el ranking |
| PageSpeed Insights | Campo + Laboratorio | Diagnóstico por URL con recomendaciones |
| Lighthouse (DevTools) | Laboratorio | Desarrollo y testing local |
| WebPageTest | Laboratorio avanzado | Filmstrip, waterfall, comparativas |
¿Tu web suspende en Core Web Vitals?
En Organik auditamos el rendimiento técnico de tu web e implementamos las mejoras necesarias para alcanzar puntuaciones "Bueno" en las tres métricas.
Solicitar auditoría técnica