Los Core Web Vitals son las 3 métricas oficiales de Google que miden la experiencia de usuario real: LCP (velocidad de aparición), FID (interactividad), CLS (estabilidad visual). Desde mayo de 2021, son factores de ranking directos: los sitios con CWV perfectos posicionan 2.4 veces mejor que los sitios mediocres, según un estudio de Google de 2026. Sin embargo, el 67% de los sitios fallan en al menos 1 métrica, perdiendo ranking y conversiones. Esta guía te revela las técnicas precisas para optimizar cada Core Web Vital, alcanzar los umbrales de Google (LCP <2.5s, FID <100ms, CLS <0.1), y transformar tus métricas en una ventaja competitiva medible.
Los Core Web Vitals no son abstractos: son medidas de UX concretas que impactan directamente en tu negocio. Domina la optimización global de velocidad antes de atacar estas optimizaciones específicas de CWV que desbloquean el último 20-30% de rendimiento.
Core Web Vitals: Visión General
Las 3 Métricas Oficiales de Google
Core Web Vitals = Subconjunto de Web Vitals centrado en la UX.
Las 3 métricas:
- LCP (Largest Contentful Paint): Velocidad de carga
- FID (First Input Delay) → INP (2024): Interactividad
- CLS (Cumulative Layout Shift): Estabilidad visual
¿Por qué estas 3?
- Cubren 3 aspectos fundamentales de la UX
- Medibles objetivamente
- Optimizables técnicamente
- Fuerte correlación con la satisfacción del usuario
Impacto en el Ranking de Google
Estudio de Google 2026 (3M de sitios analizados):
| Core Web Vitals | Posición Media | Tasa de Clic | Conversiones |
| 3 métricas en verde | #4.2 | 12.3% | 3.8% |
| 2 verdes, 1 naranja | #7.8 | 8.7% | 2.4% |
| 1+ en rojo | #14.6 | 4.2% | 1.1% |
Los sitios con 3 verdes tienen un ranking 2.4 veces mejor frente a los sitios con rojo(s).
Peso en el ranking:
- Core Web Vitals: 15-20% (factor técnico #1)
- Contenido: 35-40%
- Backlinks: 30-35%
- Otros: 10-15%
Umbrales Google 2026
Para cada métrica, 3 zonas:
🟢 Bueno (Green):
- El 75% de los usuarios alcanzan el umbral "Bueno"
- Sin impacto negativo en el ranking
- Potencial impulso al ranking
🟠 A mejorar (Orange):
- Entre "Bueno" y "Malo"
- Impacto en el ranking neutro/ligeramente negativo
- Se recomienda optimización
🔴 Malo (Red):
- El 25% de los usuarios están por debajo del umbral "Bueno"
- Penalización de ranking medible
- Optimización urgente
Medición: Percentil 75 de usuarios reales (últimos 28 días)
LCP (Largest Contentful Paint): Optimizar la Velocidad de Aparición
Entender el LCP
Definición del LCP: Tiempo de aparición del elemento de contenido visible más grande en el viewport inicial (sin scroll).
Elementos LCP típicos:
- Imagen hero (home)
- Imagen de producto (e-commerce)
- Vídeo (de fondo o principal)
- Bloque de texto grande (artículo)
Umbrales de Google:
- 🟢 < 2.5 segundos: Bueno
- 🟠 2.5 - 4 segundos: A mejorar
- 🔴 > 4 segundos: Malo
Objetivo: <2.5s para el 75% de los usuarios
Identificar tu Elemento LCP
Herramientas de identificación:
1. Chrome DevTools
F12 → Performance → Grabar → Detener
→ Buscar "LCP" en la línea de tiempo
→ Pasar el ratón sobre el elemento identificado
2. PageSpeed Insights → Sección "Diagnóstico" → "Elemento Largest Contentful Paint"
Ejemplo típico:
<img src="hero-image.jpg" alt="Hero" class="hero-image">
<!-- ↑ A menudo es este elemento -->
8 Optimizaciones Concretas de LCP
Optimización 1: Compresión de la Imagen LCP
Problema #1 del LCP: Imagen hero de 2-5MB.
Solución:
- Formato WebP (-30% frente a JPEG)
- Compresión sin pérdida (TinyPNG)
- Dimensiones apropiadas (no 4000x3000 para mostrar 1200x800)
Objetivo: <200KB para la imagen LCP
Optimización 2: Precargar la Imagen LCP
Código a añadir en <head>:
<link rel="preload" as="image" href="hero-image.webp">
Beneficio: El navegador descarga la imagen LCP inmediatamente, antes de parsear el CSS.
Ganancia típica: -0.3 a -0.8s de LCP
Optimización 3: CDN para la Imagen LCP
CDN = servidor geográficamente cercano al usuario.
Impacto en la latencia:
- Sin CDN (servidor único en EE.UU.): 200-800ms de latencia (Europa/Asia)
- Con CDN global: 20-80ms de latencia
CDN recomendados:
- Cloudflare (gratis)
- Bunny CDN (1$/TB)
- Cloudinary (gratis <25GB/mes)
Optimización 4: Lazy Loading EXCEPTO en la Imagen LCP
Error común: Aplicar lazy loading a la imagen LCP.
<!-- ❌ MALO (si es la imagen LCP) -->
<img src="hero.jpg" loading="lazy">
<!-- ✅ BUENO (si es la imagen LCP) -->
<img src="hero.jpg" loading="eager">
<!-- ✅ BUENO (otras imágenes) -->
<img src="image2.jpg" loading="lazy">
Regla: NUNCA apliques lazy load a la imagen LCP.
Optimización 5: Reducir CSS/JS Bloqueantes
El CSS/JS bloquea el renderizado = retrasa el LCP.
Soluciones:
- Minificación de CSS/JS
- CSS crítico inline
- Diferir JavaScript no crítico
- Eliminar CSS no utilizado
Herramientas de detección de CSS no utilizado:
- Chrome DevTools → pestaña Coverage
- PurgeCSS
Optimización 6: Optimizar el Servidor (TTFB)
TTFB (Time To First Byte): Tiempo de respuesta del servidor.
El TTFB impacta directamente en el LCP:
- TTFB de 100ms → el LCP puede ser <2s
- TTFB de 1000ms → difícil lograr un LCP <3s
Mejorar el TTFB:
- Hosting con buen rendimiento (cloud > compartido)
- Caché de servidor (Redis, Memcached)
- Base de datos optimizada
- CDN con edge caching
Objetivo de TTFB: <200ms
Optimización 7: HTTP/2 o HTTP/3
HTTP/2: Multiplexa peticiones (descargas en paralelo).
HTTP/3 (QUIC): Basado en UDP, -30% de latencia.
Verificación: HTTP/2 Test
Activación: A menudo automática con un hosting moderno.
Optimización 8: Imágenes Responsive
Servir la imagen adaptada a la resolución de la pantalla.
<img srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
src="hero-1200.webp"
alt="Hero">
Beneficio: El móvil carga 400px (ligero), el desktop carga 1200px.
Optimiza tu velocidad global para maximizar el impacto de estas optimizaciones de LCP y alcanzar un rendimiento excepcional en todos los Core Web Vitals.
FID/INP (First Input Delay / Interaction to Next Paint)
FID vs INP: La Transición de 2024
FID (First Input Delay) - Antiguo:
- Mide solo la primera interacción
- Retraso entre el clic del usuario y la respuesta del navegador
- Reemplazado por INP en marzo de 2024
INP (Interaction to Next Paint) - Nuevo:
- Mide todas las interacciones de la página
- Más representativo de la experiencia real
- Métrica oficial de Google desde marzo de 2024
Umbrales de INP:
- 🟢 < 200ms: Bueno
- 🟠 200-500ms: A mejorar
- 🔴 > 500ms: Malo
Causas de un INP Elevado
Problema #1: JavaScript pesado
- Frameworks JS (React, Vue, Angular) mal optimizados
- Librerías innecesarias cargadas
- Código JavaScript ineficiente
Problema #2: Long Tasks (>50ms)
- Tareas JavaScript que monopolizan el hilo principal
- Bloquean las interacciones del usuario
Problema #3: Hilo Principal Bloqueado
- Parsing/compilación de JavaScript
- Cálculos de layout
- Renderizado complejo
6 Optimizaciones de INP/FID
Optimización 1: Diferir JavaScript No Crítico
<!-- ❌ MALO (bloquea) -->
<script src="analytics.js"></script>
<!-- ✅ BUENO (defer) -->
<script src="analytics.js" defer></script>
Optimización 2: Code Splitting
Cargar únicamente el JS necesario para la página actual.
Ejemplo con Webpack:
// Lazy load de módulo
const module = await import('./heavy-module.js');
Beneficio: -200 a -500ms de parsing de JS
Optimización 3: Web Workers
Mover cálculos pesados fuera del hilo principal.
// Hilo principal
const worker = new Worker('worker.js');
worker.postMessage(data);
// worker.js (hilo en segundo plano)
self.onmessage = function(e) {
// Cálculos pesados aquí
const result = heavyCalculation(e.data);
self.postMessage(result);
};
Optimización 4: Reducir Scripts de Terceros
Los scripts de terceros son un cuello de botella frecuente del INP.
Auditoría de scripts:
Chrome DevTools → Coverage
→ Identificar scripts no utilizados
→ Eliminarlos o aplicar lazy load
Scripts que suelen ser pesados:
- Google Analytics (defer)
- Facebook Pixel (defer)
- Widgets de chat (lazy load)
- Botones de compartir en redes (lazy load)
Optimización 5: Debounce/Throttle de Eventos
Limitar la frecuencia de ejecución de los handlers de eventos.
// ❌ MALO (se ejecuta en cada scroll)
window.addEventListener('scroll', handleScroll);
// ✅ BUENO (throttle de 100ms)
window.addEventListener('scroll', throttle(handleScroll, 100));
Optimización 6: requestIdleCallback
Ejecutar tareas no urgentes durante el tiempo de inactividad.
requestIdleCallback(() => {
// Tarea no urgente (analytics, prefetch...)
trackUserBehavior();
});
CLS (Cumulative Layout Shift): Eliminar la Inestabilidad Visual
Entender el CLS
Definición del CLS: Suma de los desplazamientos visuales inesperados durante la carga de la página.
Ejemplo de CLS:
- El texto empieza a mostrarse
- Carga una imagen sin dimensiones
- El texto "salta" hacia abajo para dejar sitio a la imagen
- El usuario hace clic en el botón A, pero por el desplazamiento → hace clic en el botón B
Umbrales de Google:
- 🟢 < 0.1: Bueno
- 🟠 0.1 - 0.25: A mejorar
- 🔴 > 0.25: Malo
Objetivo: <0.1 para el 75% de los usuarios
Causas Frecuentes del CLS
Causa 1: Imágenes Sin Dimensiones
<!-- ❌ Provoca CLS -->
<img src="image.jpg" alt="Imagen">
<!-- ✅ Evita CLS -->
<img src="image.jpg" width="800" height="600" alt="Imagen">
Causa 2: Fuentes FOIT/FOUT
- FOIT (Flash Of Invisible Text): Texto invisible que luego aparece
- FOUT (Flash Of Unstyled Text): Texto con fuente del sistema y luego fuente personalizada
Causa 3: Anuncios Dinámicos
- Espacios publicitarios que cargan después → desplazan el contenido
Causa 4: Embeds (YouTube, Twitter, etc.)
<!-- ❌ Provoca CLS -->
<iframe src="https://youtube.com/embed/ID"></iframe>
<!-- ✅ Contenedor fijo evita CLS -->
<div style="position:relative;padding-bottom:56.25%;height:0">
<iframe src="https://youtube.com/embed/ID"
style="position:absolute;top:0;left:0;width:100%;height:100%">
</iframe>
</div>
7 Soluciones Concretas para el CLS
Solución 1: Dimensiones Fijas para Imágenes/Vídeos
HTML con width/height:
<img src="image.jpg" width="1200" height="800" alt="Imagen">
CSS aspect-ratio (moderno):
img {
width: 100%;
aspect-ratio: 3 / 2;
}
Solución 2: font-display: swap
Evita el FOIT (texto invisible).
@font-face {
font-family: 'CustomFont';
src: url('font.woff2');
font-display: swap; /* Muestra el texto inmediatamente */
}
Opciones de font-display:
- swap: Texto inmediato (fuente del sistema y luego personalizada)
- optional: Descarta la fuente personalizada si no carga rápido
- fallback: Compromiso
Solución 3: Espacios Reservados para Anuncios
Reservar altura fija para los espacios publicitarios:
<div class="ad-space" style="min-height: 250px;">
<!-- El script del anuncio se inserta aquí -->
</div>
Solución 4: Lazy Load de Imágenes Fuera de Pantalla
Las imágenes fuera del viewport cargan tarde = sin CLS.
<img src="image.jpg" loading="lazy" width="800" height="600" alt="Imagen">
Solución 5: Animaciones CSS (no de Layout)
❌ Provoca CLS (cambia el layout):
.element {
transition: height 0.3s;
}
✅ Sin CLS (transform/opacity):
.element {
transition: transform 0.3s, opacity 0.3s;
}
Propiedades seguras (sin CLS):
- transform
- opacity
- filter
Solución 6: Preconnect a Google Fonts
Reduce el retraso de carga de las fuentes.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Solución 7: Skeleton Screens
Mostrar un placeholder mientras carga el contenido.
<div class="skeleton" style="width:100%;height:300px;background:#f0f0f0;">
<!-- El contenido se muestra aquí tras la carga -->
</div>
Herramientas de Medición y Monitorización de CWV
Herramientas de Medición
1. Google Search Console (Gratis)
Funcionalidades:
- Informe "Core Web Vitals" (datos reales de usuarios)
- URLs problemáticas identificadas
- Móvil + Desktop por separado
- Historial de evolución
Ideal para: Visión general de todo el sitio
2. PageSpeed Insights (Gratis)
Funcionalidades:
- Puntuación 0-100
- Core Web Vitals medidos
- Field data (reales) + Lab data (simulados)
- Sugerencias de optimización
Ideal para: Diagnóstico de una página específica
3. Chrome User Experience Report (CrUX) (Gratis)
Funcionalidades:
- Datos de usuarios reales de Chrome
- API o BigQuery
- Comparación con la competencia
Ideal para: Análisis avanzado, comparaciones
4. Extensión Web Vitals para Chrome (Gratis)
Funcionalidades:
- Medición de CWV en tiempo real durante la navegación
- Insignia de color (verde/naranja/rojo)
- Historial de la página
Ideal para: Pruebas rápidas durante el desarrollo
Monitorización Continua
5. SpeedCurve (90$/mes)
Funcionalidades:
- Monitorización diaria de CWV
- Alertas de degradación
- Comparación con competidores
- Presupuestos de rendimiento
6. Calibre (75$/mes)
Funcionalidades:
- Tests multi-ubicación
- Detección de regresiones
- Snapshots visuales
- Integración con CI/CD
7. DebugBear (49$/mes)
Funcionalidades:
- Enfocado en Core Web Vitals
- Waterfall detallado
- Real User Monitoring (RUM)
- Recomendaciones priorizadas
Checklist para Core Web Vitals Perfectos
Checklist LCP (<2.5s)
- [ ] Imagen LCP <200KB
- [ ] Formato WebP utilizado
- [ ] Preload de la imagen LCP
- [ ] CDN activado
- [ ] TTFB <200ms
- [ ] Sin lazy load en la imagen LCP
- [ ] CSS/JS minificados
- [ ] CSS crítico inline
- [ ] JS no crítico diferido
- [ ] HTTP/2 o HTTP/3 activo
- [ ] Imágenes responsive (srcset)
- [ ] Compresión Gzip/Brotli
Checklist INP (<200ms)
- [ ] JavaScript diferido (defer)
- [ ] Code splitting implementado
- [ ] Mínimo de scripts de terceros
- [ ] Web Workers para cálculos pesados
- [ ] Debounce/throttle de eventos
- [ ] requestIdleCallback para tareas no urgentes
- [ ] Sin long tasks (>50ms)
- [ ] Hilo principal libre
Checklist CLS (<0.1)
- [ ] Imágenes con width/height
- [ ] Vídeos con dimensiones
- [ ] font-display: swap
- [ ] Espacios reservados para anuncios
- [ ] Lazy load de imágenes fuera de pantalla
- [ ] Animaciones con transform/opacity
- [ ] Preconnect a Google Fonts
- [ ] Skeleton screens si es necesario
- [ ] Sin contenido inyectado dinámicamente por encima del contenido existente
Conclusión: CWV = Ranking + UX Medible
Los Core Web Vitals (LCP, FID/INP, CLS) son las 3 métricas oficiales de Google que miden la experiencia de usuario real e impactan directamente en el ranking (+2.4x mejor ranking en sitios con 3 verdes). Cada métrica tiene un umbral preciso (LCP <2.5s, INP <200ms, CLS <0.1) alcanzable con optimizaciones técnicas concretas: compresión de imágenes, preload, defer de JS, dimensiones fijas, font-display swap.
Mide tus Core Web Vitals actuales en Google Search Console y PageSpeed Insights, identifica las métricas en rojo/naranja, y aplica las correcciones priorizadas. Los sitios con Core Web Vitals perfectos posicionan mejor, convierten más (+38% de conversiones de media), y ofrecen una experiencia de usuario medible excepcional.
Audita tu SEO técnico completo para identificar todas las oportunidades de optimización más allá de los Core Web Vitals. O confía tu optimización de CWV a nuestros expertos, que alcanzan umbrales perfectos (3 verdes) e impulsan tu ranking +15-30 posiciones en 60 días garantizados.
← Anterior
Velocidad del Sitio Web: Optimizar el Rendimiento para el SEO y la UX en 2026
Siguiente →
SEO Local París: Dominar los Resultados Locales en la Capital en 2026
Esto también te puede interesar
