¿Qué son los Core Web Vitals?
Los Core Web Vitals son un conjunto de métricas definidas por Google para medir la experiencia del usuario en términos de velocidad, interactividad y estabilidad visual de una página web. Desde mayo de 2021 forman parte del algoritmo oficial de posicionamiento de Google.
Mejorar tus Core Web Vitals no solo beneficia el SEO: mejora directamente la experiencia de tus visitantes.
Las tres métricas principales
1. LCP — Largest Contentful Paint (Carga percibida)
Mide el tiempo que tarda en cargarse el elemento visual más grande de la página (generalmente una imagen hero o un bloque de texto grande).
- ✅ Bueno: menos de 2.5 segundos
- ⚠️ Necesita mejorar: 2.5 a 4 segundos
- ❌ Malo: más de 4 segundos
Principales causas de LCP lento: imágenes grandes sin optimizar, servidor lento, recursos bloqueantes.
2. FID / INP — First Input Delay / Interaction to Next Paint (Interactividad)
FID mide el tiempo desde que el usuario hace clic en algo hasta que el navegador responde. INP (su sucesor desde 2024) mide la latencia de todas las interacciones.
- ✅ Bueno: menos de 100ms
- ⚠️ Necesita mejorar: 100-300ms
- ❌ Malo: más de 300ms
Principal causa: JavaScript pesado que bloquea el hilo principal del navegador.
3. CLS — Cumulative Layout Shift (Estabilidad visual)
Mide cuánto se "mueven" los elementos de la página mientras carga. Si estás leyendo algo y de repente el texto se mueve porque apareció un banner, eso es un CLS alto y muy molesto.
- ✅ Bueno: menos de 0.1
- ⚠️ Necesita mejorar: 0.1 a 0.25
- ❌ Malo: más de 0.25
Principal causa: Imágenes sin dimensiones definidas, anuncios que aparecen después de cargar el contenido.
Estrategias para mejorar LCP
- Usá preload para la imagen principal:
<link rel="preload" as="image" href="hero.jpg"> - Servís la imagen hero en formato WebP
- Configurás CDN para servir el contenido desde servidores cercanos
- Mejorás el Time to First Byte (TTFB) del servidor con caché
Estrategias para mejorar CLS
- Siempre definí width y height en tus etiquetas img
- Reservá espacio para anuncios antes de que carguen
- Evitá insertar contenido sobre el existente (las cookies banners son culpables frecuentes)
Estrategias para mejorar INP
- Diferí el JavaScript no crítico con el atributo defer
- Usá LiteSpeed Cache para minificar y defer JS
- Reducí el número de plugins que cargan scripts en el front-end
