Core Web Vitals 2026: guía práctica de LCP, INP y CLS
Una web lenta pierde clientes antes de que lean la primera línea. Te explicamos qué mide Google, cómo saber si tu sitio aprueba y qué cambiar, paso a paso, para que cargue rápido de verdad.
En resumen
- Los tres Core Web Vitals son LCP (carga), INP (respuesta) y CLS (estabilidad visual).
- Google los evalúa con datos reales de usuarios de Chrome, en el percentil 75, durante 28 días.
- Las mejoras con más impacto suelen ser: buen hosting con caché, imagen principal optimizada y menos JavaScript de terceros.
¿Qué son los Core Web Vitals?
Son tres métricas con las que Google mide la experiencia de carga, interactividad y estabilidad de una página. Desde marzo de 2024, INP reemplazó a FID como métrica de interactividad, y es la que más sitios reprueban hoy.
| Métrica | Qué mide | Bueno | Necesita mejorar | Malo |
|---|---|---|---|---|
| LCP Largest Contentful Paint | Cuánto tarda en verse el elemento principal | ≤ 2,5 s | 2,5 – 4 s | > 4 s |
| INP Interaction to Next Paint | Cuánto tarda la página en responder a clics y toques | ≤ 200 ms | 200 – 500 ms | > 500 ms |
| CLS Cumulative Layout Shift | Cuánto «salta» el contenido mientras carga | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Para aprobar, el 75 % de las visitas deben tener una experiencia «buena» en las tres métricas. Si tu público navega con celulares de gama media y datos móviles, como pasa en buena parte de Colombia, ese es el escenario que debes optimizar.
Cómo medir tu web (sin adivinar)
- PageSpeed Insights (pagespeed.web.dev): muestra arriba los datos de campo reales (si tu sitio tiene suficiente tráfico) y abajo un análisis de laboratorio con Lighthouse.
- Google Search Console → Métricas web principales (guía de Search Console): agrupa las URL que fallan por tipo de problema. Es el informe que refleja cómo te evalúa Google.
- Chrome DevTools → Rendimiento: muestra LCP, INP y CLS en vivo mientras navegas tu propia página, e identifica qué elemento o script causa el problema.
- Librería
web-vitals: para enviar las métricas reales de tus usuarios a Google Analytics 4 y detectar qué páginas fallan.
Lighthouse no mide INP, porque en laboratorio nadie hace clic. Usa el «Total Blocking Time» como pista, pero confirma siempre con datos de campo.
Cómo mejorar el LCP
En la mayoría de sitios, el elemento LCP es la imagen principal (hero) o el titular. El tiempo total se reparte en cuatro partes: respuesta del servidor, retraso en descubrir el recurso, descarga y renderizado.
- Reduce el TTFB. Un hosting con caché de página completa (LiteSpeed, Nginx FastCGI o similar) y, si tu público está lejos del servidor, un CDN. Objetivo: menos de 800 ms.
- No uses carga diferida en la imagen principal. El
loading="lazy"en la imagen del hero es uno de los errores más comunes. - Prioriza la imagen hero con
fetchpriority="high"y, si se carga desde CSS, con<link rel="preload">. - Sirve formatos modernos (AVIF o WebP) y tamaños adecuados con
srcset: no envíes una imagen de 2400 px a un celular. - Elimina el CSS y JS que bloquean el renderizado: carga diferida de scripts con
defery CSS crítico en línea.
<img src="/img/hero-800.avif"
srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w"
sizes="(max-width: 800px) 100vw, 800px"
width="1600" height="900"
fetchpriority="high" alt="Descripción de la imagen">Cómo mejorar el INP
INP se dispara cuando el hilo principal del navegador está ocupado ejecutando JavaScript y no puede responder al usuario. Las causas más frecuentes son scripts de terceros, temas o constructores pesados y tareas largas.
- Audita los scripts de terceros: chats, píxeles de publicidad, mapas de calor, widgets de redes sociales. Elimina los que no uses y retrasa la carga del resto hasta que el usuario interactúe.
- Divide las tareas largas (más de 50 ms). En código propio, cede el control al navegador entre bloques de trabajo con
scheduler.yield()osetTimeout. - Reduce el tamaño del DOM. Páginas con miles de nodos (típico de constructores visuales con secciones anidadas) hacen que cada interacción cueste más.
- Da respuesta visual inmediata: muestra el cambio de estado (botón presionado, menú abierto) antes de hacer el trabajo pesado.
Cómo mejorar el CLS
- Declara siempre
widthyheighten imágenes y videos, o usaaspect-ratioen CSS. - Reserva espacio para anuncios, iframes, mapas y banners de cookies.
- No insertes avisos o barras encima del contenido después de que la página cargó.
- Controla las fuentes web: precarga las críticas y usa
font-display: swapcon fuentes de respaldo de métricas similares para evitar saltos al cambiar de tipografía.
Checklist rápido para WordPress y Elementor
- Usa una versión de PHP actual y con soporte (8.3 o superior).
- Activa un plugin de caché compatible con tu servidor (por ejemplo, LiteSpeed Cache en hostings LiteSpeed).
- Desinstala plugins que no uses. Cada plugin puede añadir CSS y JS en todas las páginas.
- En Elementor, trabaja con contenedores Flexbox en lugar de secciones y columnas anidadas, y activa las opciones de rendimiento (carga optimizada de recursos y DOM optimizado).
- Convierte las imágenes a WebP o AVIF y comprímelas al subirlas.
- Carga Google Fonts localmente o usa fuentes del sistema.
- Aprovecha la carga especulativa que WordPress incluye desde la versión 6.8: precarga páginas cuando el usuario muestra intención de hacer clic, y la navegación se siente instantánea.
Si tu hosting es el cuello de botella, ninguna optimización compensa un servidor lento. En nuestra sección de hosting te contamos qué usamos para nuestros proyectos.
Preguntas frecuentes
¿Por qué PageSpeed me da 95 en laboratorio pero Search Console dice que no apruebo?
Porque Search Console usa datos de campo: la experiencia real de tus visitantes durante 28 días, en sus celulares y conexiones. Lighthouse es una simulación. Google evalúa con los datos de campo.
¿Los Core Web Vitals son un factor de posicionamiento?
Sí, forman parte de las señales de experiencia de página, pero pesan menos que la relevancia del contenido. Su mayor impacto está en la conversión: una web lenta pierde visitantes antes de que lean.
¿Elementor hace lenta mi web?
Puede hacerlo si se usan muchos widgets, secciones anidadas y complementos. Con contenedores Flexbox, las optimizaciones de rendimiento activadas, un buen hosting y caché, es posible aprobar los Core Web Vitals.
Conclusión
Mejorar los Core Web Vitals no es perseguir un 100 en PageSpeed: es lograr que tus clientes reales, en sus celulares, vean y usen tu web sin esperar. Empieza por el hosting y la imagen principal (LCP), sigue con los scripts de terceros (INP) y cierra con las dimensiones de imágenes y anuncios (CLS). Después, mide de nuevo en 28 días.
