Core Web Vitals: LCP, INP, CLS Explicados y Cómo Solucionarlos
· 12 min de lectura
Tabla de Contenidos
- ¿Qué Son los Core Web Vitals?
- Por Qué los Core Web Vitals Importan para SEO y Negocios
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
- Cómo Medir los Core Web Vitals
- Manual Completo de Optimización
- Errores Comunes de Optimización a Evitar
- Técnicas Avanzadas de Optimización
- Monitoreo y Mantenimiento Continuo
- Preguntas Frecuentes
- Artículos Relacionados
Los Core Web Vitals son las métricas oficiales de Google para medir la experiencia del usuario en la web. Desde que se convirtieron en un factor de clasificación en junio de 2021, han transformado fundamentalmente cómo los desarrolladores, SEOs y propietarios de sitios abordan el rendimiento de las páginas. Esta guía completa desglosa cada métrica, explica qué causa puntuaciones deficientes y proporciona soluciones concretas y accionables que puedes implementar de inmediato.
Ya sea que estés optimizando un sitio de comercio electrónico, una plataforma de contenido o una aplicación SaaS, comprender y mejorar los Core Web Vitals ya no es opcional—es esencial tanto para la visibilidad en búsquedas como para la satisfacción del usuario.
¿Qué Son los Core Web Vitals?
Los Core Web Vitals (CWV) son un conjunto de tres métricas específicas que Google considera esenciales para ofrecer una buena experiencia de usuario. Miden tres dimensiones críticas del rendimiento de la página que impactan directamente cómo los usuarios perciben e interactúan con tu sitio web.
Los tres Core Web Vitals son:
- Largest Contentful Paint (LCP) — Mide el rendimiento de carga rastreando cuándo se renderiza el elemento de contenido visible más grande
- Interaction to Next Paint (INP) — Mide la interactividad evaluando qué tan rápido responde la página a todas las interacciones del usuario
- Cumulative Layout Shift (CLS) — Mide la estabilidad visual cuantificando los cambios de diseño inesperados durante la carga de la página
A diferencia de las pruebas sintéticas de laboratorio que se ejecutan en entornos controlados, Google evalúa los Core Web Vitals usando datos del mundo real de usuarios reales de Chrome a través del Chrome User Experience Report (CrUX). Esto significa que tu sitio necesita funcionar bien para usuarios reales en dispositivos reales con condiciones de red variables—no solo en tu entorno de desarrollo.
Consejo profesional: Google requiere que el 75% de las visitas a la página cumplan con el umbral "bueno" para cada métrica. Una sola puntuación de prueba perfecta no es suficiente—necesitas un rendimiento consistente en toda tu base de usuarios.
La Evolución de los Core Web Vitals
Los Core Web Vitals no son estáticos. Google originalmente incluyó First Input Delay (FID) como la métrica de interactividad, pero lo reemplazó con Interaction to Next Paint (INP) en marzo de 2024. Este cambio refleja el compromiso de Google de medir lo que realmente importa a los usuarios, no solo lo que es fácil de medir.
El cambio de FID a INP fue significativo porque FID solo medía la primera interacción, mientras que INP evalúa todas las interacciones a lo largo del ciclo de vida de la página. Esto proporciona una vista más completa de la capacidad de respuesta y se correlaciona mejor con la frustración del usuario.
Por Qué los Core Web Vitals Importan para SEO y Negocios
Los Core Web Vitals son parte de las señales de experiencia de página de Google, que también incluyen compatibilidad móvil, seguridad HTTPS y la ausencia de intersticiales intrusivos. Aunque la relevancia del contenido y la autoridad aún dominan las clasificaciones, los CWV actúan como desempate—cuando dos páginas son igualmente relevantes, la que tiene mejor rendimiento gana.
Pero el impacto se extiende mucho más allá de las clasificaciones de búsqueda. El rendimiento afecta directamente tus resultados finales:
| Mejora de Métrica | Impacto en el Negocio | Fuente |
|---|---|---|
| Aprobar todos los umbrales CWV | 24% menos abandonos de página | Investigación Google/SOASTA |
| 100ms de mejora en LCP | 1.7% de aumento en tasa de conversión | Deloitte Digital |
| 0.1 de mejora en CLS | 3.2% de reducción en tasa de rebote | Estudio Akamai |
| 200ms de mejora en INP | 5.8% de aumento en engagement | Chrome User Experience Report |
Los estudios de caso del mundo real demuestran estos impactos. Cuando Vodafone mejoró su LCP en un 31%, vieron un aumento del 8% en ventas. Cuando Yahoo Japan redujo el CLS en 0.2, la duración de la sesión aumentó un 15%. Estas no son ganancias marginales—son mejoras que transforman el negocio.
La Realidad Mobile-First
Con la indexación mobile-first de Google, tus puntuaciones de Core Web Vitals móviles son las que más importan. Los dispositivos móviles típicamente tienen procesadores más lentos, menos memoria y condiciones de red más variables que las computadoras de escritorio, haciendo la optimización más desafiante pero también más crítica.
Los usuarios móviles también son menos tolerantes. Un estudio de Google encontró que el 53% de los usuarios móviles abandonan sitios que tardan más de 3 segundos en cargar. Los Core Web Vitals deficientes contribuyen directamente a estas tasas de abandono.
Largest Contentful Paint (LCP)
Largest Contentful Paint mide cuánto tiempo tarda en renderizarse el elemento de contenido visible más grande en el viewport. Esto es típicamente una imagen hero, miniatura de video, bloque de texto grande o imagen de fondo. LCP es el Core Web Vital más intuitivo porque se correlaciona directamente con la percepción del usuario de "¿cuándo se cargó esta página?"
Umbrales de LCP
| Calificación | Tiempo LCP | Experiencia del Usuario |
|---|---|---|
| Bueno | ≤ 2.5 segundos | Rápido, responsivo, profesional |
| Necesita Mejora | 2.5 - 4.0 segundos | Aceptable pero con retraso notable |
| Pobre | > 4.0 segundos | Frustrante, probable abandono |
¿Qué Elementos Cuentan como LCP?
No todos los elementos en tu página son elegibles para ser el elemento LCP. Solo estos tipos de elementos son considerados:
- Elementos
<img> - Elementos
<image>dentro de<svg> - Elementos
<video>con imágenes poster - Elementos con imágenes de fondo cargadas vía CSS
url() - Elementos de nivel de bloque que contienen nodos de texto
El elemento LCP puede cambiar mientras la página se carga. Inicialmente, podría ser un encabezado de texto, pero una vez que tu imagen hero se carga, esa se convierte en el nuevo elemento LCP. El LCP final se registra cuando el usuario comienza a interactuar con la página o navega fuera de ella.
Problemas Comunes de LCP y Soluciones
Problema 1: Tiempos de Respuesta del Servidor Lentos
Si tu Time to First Byte (TTFB) es lento, todo lo demás sufre. El navegador no puede comenzar a renderizar hasta que recibe el documento HTML.
Soluciones:
- Usa una Red de Distribución de Contenido (CDN) para servir contenido desde ubicaciones más cercanas a los usuarios
- Implementa caché del lado del servidor con Redis o Memcached
- Optimiza las consultas de base de datos y agrega índices apropiados
- Usa HTTP/2 o HTTP/3 para multiplexación y compresión de encabezados
- Considera soluciones de edge computing como Cloudflare Workers o Vercel Edge Functions
Problema 2: Recursos que Bloquean el Renderizado
Los archivos CSS y JavaScript en el <head> bloquean el renderizado hasta que se descargan y procesan.
Soluciones:
- Incluye CSS crítico directamente en el HTML para contenido above-the-fold
- Difiere CSS no crítico usando
media="print" onload="this.media='all'" - Agrega atributos
asyncodefera las etiquetas script - Elimina CSS y JavaScript no utilizados con herramientas como PurgeCSS
- Divide bundles grandes en fragmentos más pequeños con code splitting
Consejo rápido: Usa nuestro Analizador de Velocidad de Página para identificar recursos que bloquean el renderizado y obtener recomendaciones específicas para tu sitio.
Problema 3: Archivos de Imagen Grandes
Las imágenes no optimizadas son el culpable más común de LCP. Una imagen hero de 5MB destruirá tu puntuación LCP.
Soluciones:
- Comprime imágenes usando formatos modernos como WebP o AVIF (70-90% más pequeños que JPEG)
- Implementa imágenes responsivas con atributos
srcsetysizes - Usa CDNs de imágenes que automáticamente optimizan y redimensionan imágenes
- Agrega
fetchpriority="high"a tu imagen LCP para priorizar su descarga - Precarga imágenes LCP con
<link rel="preload" as="image">
Problema 4: Renderizado del Lado del Cliente
Si tu elemento LCP es renderizado por JavaScript, los usuarios deben esperar a que el JS se descargue, analice y ejecute antes de ver el contenido.
Soluciones:
- Usa Server-Side Rendering (SSR) o Static Site Generation (SSG)
- Implementa streaming SSR con React Server Components o tecnologías similares
- Usa mejora progresiva—renderiza una versión básica del lado del servidor, mejora con JavaScript
- Considera hidratación parcial para reducir el tiempo de ejecución de JavaScript
Optimización Avanzada de LCP
Para sitios que ya cumplen con el umbral de 2.5 segundos, estas técnicas avanzadas pueden llevarte al nivel de rendimiento superior:
Resource Hints: Usa <link rel="preconnect"> para orígenes de terceros críticos para establecer conexiones temprano. Usa <link rel="dns-prefetch"> para orígenes menos críticos.
Priority Hints: El atributo fetchpriority le dice al navegador qué recursos importan más. Establece fetchpriority="high" en tu imagen LCP y fetchpriority="low" en imágenes below-the-fold.
103 Early Hints: Este código de estado HTTP permite a los servidores enviar sugerencias de precarga antes de que la respuesta principal esté lista, dando al navegador una ventaja inicial en la descarga de recursos críticos.
Interaction to Next Paint (INP)
Interaction to Next Paint mide la capacidad de respuesta de tu página a las interacciones del usuario a lo largo de todo el ciclo de vida de la página. A diferencia de su predecesor FID, que solo medía la primera interacción, INP evalúa cada clic, toque y pulsación de teclado para proporcionar una vista completa de la interactividad.
INP mide el tiempo desde que un usuario inicia una interacción hasta que el navegador pinta el siguiente cuadro mostrando el resultado visual de esa interacción. Esto incluye el retraso de entrada, tiempo de procesamiento y retraso de presentación.
Umbrales de INP
| Calificación | Tiempo INP | Experiencia del Usuario |
|---|---|---|
| Bueno | ≤ 200 milisegundos | Retroalimentación instantánea, responsiva |
| Necesita Mejora | 200 - 500 milisegundos | Retraso notable pero tolerable |
| Pobre | > 500 milisegundos | Lento, no responsivo, roto |
Entendiendo los Componentes de INP
INP consiste en tres fases:
- Retraso de Entrada: Tiempo desde la acción del usuario hasta que los manejadores de eventos comienzan a ejecutarse (el hilo principal debe estar disponible)
- Tiempo de Procesamiento: Tiempo dedicado a ejecutar manejadores de eventos y JavaScript relacionado
- Retraso de Presentación: Tiempo desde la finalización del manejador hasta que el navegador pinta el siguiente cuadro
La interacción más lenta durante una