Core Web Vitals: LCP, INP y CLS sin entrar en pánico
Core Web Vitals resume tres partes de la experiencia: qué tan rápido aparece el contenido principal, qué tan pronto responde la página y cuánto se mueve la interfaz sin permiso.
Respuesta directa
Como referencia de buena experiencia, apunta a LCP de 2.5 segundos o menos, INP de 200 milisegundos o menos y CLS de 0.1 o menos, evaluados en el percentil 75 y separados entre móvil y desktop.
Qué miden los tres indicadores
Métrica | Mide | Umbral bueno |
|---|---|---|
LCP | Carga del contenido principal. | ≤ 2.5 s |
INP | Respuesta visual a interacciones. | ≤ 200 ms |
CLS | Movimientos inesperados de layout. | ≤ 0.1 |
Los umbrales no convierten una mala página en buena por sí solos. Una interfaz puede cargar rápido y seguir siendo confusa. Rendimiento y utilidad trabajan juntos.
LCP: cuándo aparece lo principal
El Largest Contentful Paint suele corresponder a una imagen hero, un bloque grande de texto o video. Mejora cuando el servidor responde rápido, el recurso se descubre temprano y no se descarga una fotografía de estudio con tamaño de espectacular.
Comprime y dimensiona imágenes.
Evita cargar el hero como fondo descubierto tarde.
Preconecta solo recursos críticos.
Reduce CSS y scripts que bloquean la primera pintura.
No ocultes el contenido principal hasta que termine una intro.
INP: la página recibió el clic, ¿y ahora?
Interaction to Next Paint mide el tiempo entre una interacción y la siguiente actualización visual. JavaScript largo, listeners costosos y renders grandes pueden hacer que un botón se sienta pegajoso.
Divide tareas largas.
Carga código bajo demanda.
Evita recalcular layout repetidamente durante scroll.
Reduce componentes interactivos que montan trabajo innecesario.
Da feedback inmediato mientras termina una operación.
CLS: cuando la interfaz cambia de opinión
Cumulative Layout Shift penaliza movimientos inesperados: una imagen empuja el texto, aparece una barra sobre el botón o una fuente cambia la composición después de cargar.
Declara ancho y alto de imágenes y videos.
Reserva espacio para embeds y contenido diferido.
No insertes banners sobre contenido existente.
Configura carga de fuentes y fallbacks parecidos.
Anima con transform y opacity cuando sea posible.
Datos de laboratorio y datos de campo
Lighthouse sirve para probar y encontrar oportunidades en un entorno controlado. Los datos de campo muestran la experiencia de usuarios reales con distintos dispositivos y redes. Lighthouse no puede medir INP real sin interacción; utiliza Total Blocking Time como aproximación de laboratorio.
No persigas una captura perfecta
Repite pruebas, revisa el percentil 75 y prioriza plantillas con tráfico. Optimizar una página vacía a 100 mientras el formulario principal se traba es gimnasio para números.
Plan práctico
Mide páginas representativas en móvil y desktop.
Identifica el elemento LCP y tareas largas.
Corrige recursos pesados y saltos evidentes.
Prueba interacciones críticas.
Publica y espera datos de campo suficientes.
Compara tendencias y evita regresiones.
Después documenta límites de peso, tamaños de medios y reglas para nuevos componentes. La mejor optimización es la que no tienes que repetir cada vez que alguien sube una imagen.