Desde la actualización Page Experience de Google, los Core Web Vitals se han convertido en un pilar clave no solo del SEO técnico, sino también de la experiencia de usuario real.
A diferencia de métricas sintéticas como TTFB (Time to First Byte) o el PageSpeed Score, estos indicadores se enfocan en cómo percibe la carga del sitio un visitante humano.
Google los define como “un subconjunto de señales esenciales para ofrecer una buena experiencia de usuario en la web”, y los considera factor de posicionamiento desde el año 2021.
📐 ¿Qué mide cada Core Web Vital?
1. LCP (Largest Contentful Paint)
¿Qué mide?
El tiempo que tarda en renderizar el contenido más grande visible en el viewport (normalmente una imagen hero, un <h1>, o un <video>).
- Ideal: ≤ 2.5 segundos
- Necesita mejora: entre 2.5 s y 4 s
- Malo: > 4 segundos
Medición: Chrome mide desde el navigationStart hasta que el recurso LCP es visible en el DOM. No incluye elementos fuera de pantalla ni dinámicos inestables.
2. FID (First Input Delay)
¿Qué mide?
El retraso entre la primera interacción del usuario (clic, tap o pulsación de tecla) y el momento en que el navegador responde a esa acción.
- Ideal: ≤ 100 ms
- Malo: > 300 ms
El First Input Delay (FID) no se mide en pruebas sintéticas como Lighthouse. Requiere datos reales de usuarios, conocidos como Real User Monitoring (RUM), disponibles en Chrome User Experience Report (Chrome UX Report) o en Google Search Console.
3. CLS (Cumulative Layout Shift)
¿Qué mide?
La estabilidad visual del sitio: cuánto se mueven inesperadamente los elementos durante la carga o interacción.
- Ideal: ≤ 0.1
- Malo: > 0.25
Se calcula sumando todos los desplazamientos no intencionados provocados por fuentes, anuncios, iframes sin altura definida o imágenes sin dimensiones.
📊 Herramientas sugeridas para medir
| Herramienta | Uso | Nivel |
| PageSpeed Insights | Test sintético + datos reales de CrUX | Medio |
| Lighthouse (DevTools) | Diagnóstico local, sección por sección | Avanzado |
| WebPageTest.org | Análisis en cascada + reproducción en video | Avanzado |
| Chrome UX Report | Datos reales poblacionales (RUM) | Experto |
| Google Search Console | Reportes agrupados por URL móvil y desktop | Medio |
Te podría interesar: KPIs para evaluar el rendimiento de tus campañas publicitarias
🛠️ Cómo optimizar
✅ LCP – Mejora la carga inicial
- Usa preload para imágenes clave y fuentes:
html
<link rel=”preload” href=”/img/hero.webp” as=”image”>
<link rel=”preload” href=”/fonts/inter.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
- Implementa CSS crítico con herramientas como Critical CSS o plugins como WP Rocket
- Reduce el TTFB con caching (Varnish, NGINX FastCGI) y HTTP/2
- Minimiza dependencias server-side como plugins o APIs lentas
✅ FID – Minimiza el bloqueo del hilo principal
- Haz code splitting con Webpack o esbuild (import() dinámico)
- Usa defer o async en scripts no críticos:
html
<script src=”analytics.js” defer></script>
- Divide tareas largas (>50 ms) con requestIdleCallback o setTimeout
Reemplaza jQuery por alternativas más ligeras como Alpine.js o Preact
✅ CLS – Evita saltos visuales
- Define siempre ancho y alto en imágenes e iframes:
html
<img src=”product.jpg” width=”600″ height=”400″ alt=”Producto X”>
- Usa font-display: swap para evitar parpadeos de texto invisible:
CSS
@font-face {
font-family: ‘Inter’;
src: url(‘inter.woff2’) format(‘woff2’);
font-display: swap;
}
- Reserva espacio para anuncios dinámicos:
CSS
.ad-container {
min-height: 250px;
}
Los Core Web Vitals son mucho más que una exigencia de Google. Son una guía práctica para ofrecer una experiencia digital rápida, estable y centrada en el usuario. Ignorarlos es arriesgar posicionamiento, conversiones y reputación técnica.
Optimizar los Core Web Vitals no es un trabajo puntual, es un proceso continuo. Cada cambio de diseño, script o CMS puede alterar las métricas. Una web rápida no solo rankea mejor, también convierte más y genera confianza desde el primer segundo.