Core Web Vitals son tres métricas que Google usa para evaluar la experiencia de usuario de tu web. Si las pasas en verde, tu sitio rankea con ventaja. Si las suspendes, compites cuesta arriba. Esta guía cubre qué miden exactamente, cómo medirlas bien y cómo arreglarlas en orden de impacto.
Los 3 Core Web Vitals (2026)
| Métrica | Qué mide | Bueno | Aceptable | Malo |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Cuánto tarda en pintarse el elemento más grande del viewport (foto hero, título, bloque texto principal) | < 2,5 s | 2,5 - 4 s | > 4 s |
| INP (Interaction to Next Paint) | Latencia entre que el usuario interactúa (click, tap, tecleo) y la respuesta visual | < 200 ms | 200 - 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Cuánto se mueven los elementos visibles durante la carga (banners que aparecen y empujan contenido) | < 0,1 | 0,1 - 0,25 | > 0,25 |
Para pasar Core Web Vitals según Google, las 3 métricas deben estar en verde (rango "Bueno") en el percentil 75 de tus usuarios reales (datos CrUX, no Lighthouse).
Cómo medir bien (no como mal lo mide la mayoría)
Datos de laboratorio (Lighthouse, PageSpeed Insights)
Son una simulación. Útil para debugging pero NO es lo que cuenta para ranking. Te dice cómo cargaría con un entorno controlado.
Datos reales (CrUX — Chrome User Experience Report)
Son los que Google usa para ranking. Vienen de usuarios reales con Chrome. Solo aparecen si tu sitio tiene tráfico suficiente. Los ves en:
- PageSpeed Insights → arriba aparece "Origin Summary" con datos reales si los hay
- Search Console → Experience → Core Web Vitals → datos consolidados a 28 días
- Chrome DevTools → Performance → Web Vitals
El error más común: optimizar contra Lighthouse en lugar de contra CrUX. Verás todo verde en Lighthouse pero en GSC sigue rojo porque las visitas reales tienen redes peores que tu test.
LCP: optimización en orden de impacto
1. Identifica TU elemento LCP
Lighthouse te dice cuál es. Suele ser:
- Imagen hero o de cabecera
- Título grande (h1)
- Bloque de texto principal
2. Optimiza el TTFB (Time To First Byte)
Si tu servidor tarda 800ms en empezar a responder, ya partes en desventaja:
- Cambiar a hosting con LiteSpeed (Webempresa, Raiola, SiteGround)
- Activar cache HTTP (Cloudflare)
- PHP 8.1+ vs PHP 7.x: 30-50% más rápido
3. Preload del recurso LCP
Si el LCP es una imagen, prelo en el head:
<link rel="preload" as="image" href="/hero.webp">4. Imágenes en WebP/AVIF + sizing correcto
WebP suele ahorrar 30-50% de peso vs JPG. AVIF aún más pero compatibilidad menor. Plugin recomendado en WordPress: ShortPixel. Atributos obligatorios:
<img src="hero.webp"
width="1200" height="630"
loading="eager" fetchpriority="high">5. Eliminar render-blocking resources
CSS que bloquean: inline el crítico, defer el resto. JS que bloquea: defer todo lo no crítico.
INP: optimización (lo más complicado)
INP sustituyó a FID en marzo 2024. Mide latencia de TODAS las interacciones, no solo la primera. Mucho más exigente.
1. Reducir JavaScript pesado
- Auditar plugins WordPress: cada uno añade JS al frontend.
- Desactivar Elementor "Improved CSS Loading" si tu tema tiene problemas.
- Code splitting si tienes una app compleja.
2. Diferir JS de terceros
Google Analytics, Facebook Pixel, chats, etc. Cargarlos con defer o tras requestIdleCallback.
3. Optimizar event handlers
Si tienes scroll listeners, resize listeners, click handlers pesados, usa debounce o throttle. Y aprovecha passive: true en touch/scroll:
element.addEventListener('scroll', handler, { passive: true });4. Minimizar Main Thread blocking
Operaciones largas en el thread principal congelan la UI. Si tienes alguna tarea > 50ms, divídela con requestIdleCallback o muévela a Web Workers.
CLS: el más fácil de arreglar
1. Width y height explícitos en imágenes
Sin esto, el navegador no sabe el tamaño hasta que descarga la imagen y "empuja" el contenido cuando llega:
<img src="..." width="800" height="600" alt="...">2. Reservar espacio para ads/embeds
Si insertas un iframe de YouTube, un anuncio AdSense o un embed de Twitter, reserva el espacio con CSS:
.youtube-embed {
aspect-ratio: 16/9;
width: 100%;
}3. Fuentes web con font-display: swap + preload
Para evitar FOIT (texto invisible) y FOUT con CLS:
<link rel="preload" href="/fonts/main.woff2"
as="font" type="font/woff2" crossorigin>
<!-- + en CSS: -->
@font-face {
font-display: swap;
}4. No insertar contenido por encima del existente
Banners de cookies, alertas, etc. Mejor abajo o en posición fijada.
Plan de optimización CWV en WordPress (orden de impacto)
- Hosting LiteSpeed (Webempresa, Raiola). TTFB bajo de un golpe.
- WP Rocket (de pago) o LiteSpeed Cache (gratis si hosting LiteSpeed). Cache + minify + defer JS + lazy load.
- ShortPixel o EWWW Image Optimizer. WebP automático.
- Auto-host de Google Fonts. Eliminar conexión a fonts.googleapis.com.
- Critical CSS con WP Rocket o Autoptimize.
- Desactivar plugins innecesarios. Cada plugin = más JS/CSS.
- Tema ligero si el actual es pesado. Astra, GeneratePress, Bricks Builder son buenas opciones.
- Cloudflare activado en modo proxy. Reduce latencia globalmente.
Ejemplo real: cliente B2B Vila-real
Estado inicial:
- LCP móvil: 5,8s (rojo)
- INP móvil: 380ms (naranja)
- CLS móvil: 0,32 (rojo)
Acciones (en 4h de trabajo):
- Migración a hosting LiteSpeed
- WP Rocket configurado + Cloudflare
- Conversión imágenes a WebP con ShortPixel
- Google Fonts self-hosted
- Width/height en todas las imágenes
- Aspect-ratio en embeds de vídeo
Estado tras 30 días (datos CrUX):
- LCP: 1,9s ✅
- INP: 165ms ✅
- CLS: 0,04 ✅
Resultado en posiciones: subida media de 8 posiciones en sus keywords objetivo en los 2 meses siguientes.
Preguntas frecuentes
¿Qué pasa si no paso Core Web Vitals?
Google deja claro desde 2021 que es factor de ranking. No los pasar no es muerte inmediata, pero competirás con desventaja contra webs que sí los pasan.
¿Cuál es el más importante: LCP, INP o CLS?
LCP es el más crítico porque afecta directamente a la sensación de carga. INP es el siguiente más importante para experiencia interactiva. CLS es relevante pero más fácil de arreglar.
¿Cuánto puedo mejorar Core Web Vitals con plugins?
En WordPress, mucho. WP Rocket + ShortPixel + auto-host de fuentes puede llevar una web de rojo a verde en una mañana. Casos complejos requieren tocar tema o plugins.
¿Mide Google los datos reales o de laboratorio?
Para ranking usa CrUX (datos reales de usuarios Chrome). Los datos de laboratorio (Lighthouse) son útiles para debugging pero no cuentan para SEO.
Si tus Core Web Vitals están en rojo, lo más rentable es pedir una auditoría técnica: identificamos qué te está bloqueando y te damos plan concreto.