CLS e INP son Core Web Vitals que miden aspectos de la experiencia del usuario distintos de la velocidad.
CLS mide la estabilidad visual. Un salto de diseño ocurre cuando el contenido se mueve después de cargar. El usuario lee un artículo. Carga un anuncio. El artículo baja. El usuario pierde el hilo. CLS cuantifica esa molestia.
INP mide la capacidad de respuesta. El usuario hace clic en un botón. El sistema responde. Cuánto tarda en responder. INP cuantifica el retraso de la respuesta.
Cumulative Layout Shift (CLS) en detalle
Qué causa el CLS
Los anuncios cargan y ocupan espacio. Los contenidos incrustados cargan y ocupan espacio. Las imágenes cargan sin altura definida. Las fuentes cambian y el texto se recoloca. Se inyecta contenido desde JavaScript.
Ejemplo real
El diseño de la página es estable. El usuario empieza a leer. Carga un anuncio. El anuncio mide trescientos píxeles de alto. El contenido que hay debajo baja trescientos píxeles. El usuario pierde el hilo. Es frustrante.
Medición
CLS se mide como el porcentaje de la ventana visible que se desplaza. Si la ventana mide mil píxeles de alto y el contenido se desplaza trescientos píxeles, el CLS es de cero coma tres. El objetivo es estar por debajo de cero coma uno (un desplazamiento del diez por ciento es aceptable, uno del treinta por ciento no).
Cómo optimizar el CLS
Estrategia uno: reservar espacio
Reserva espacio para anuncios, contenidos incrustados e imágenes. Dile al motor de diseño: el anuncio ocupará trescientos píxeles. Reserva el espacio. El anuncio carga en el espacio reservado. No hay salto.
Estrategia dos: inyectar al final
Evita inyectar contenido en medio de la página. Inyéctalo al final (el contenido de abajo ya está fuera de la ventana visible). O en una cabecera fija (el usuario espera que la cabecera cambie).
Estrategia tres: evitar cambios de fuente
Evita cambiar la fuente mientras carga la página. Los cambios de fuente recolocan el texto. Todo el texto que usa esa fuente se desplaza. Usa `font-display: optional` o `font-display: swap` para minimizar el salto.
Estrategia cuatro: definir la altura de las imágenes
Usa una altura fija para las imágenes. La imagen carga. La altura está definida. La imagen rellena el espacio reservado. No hay salto.
Ejemplo real: optimizar el CLS de una página de producto
CLS de partida: cero coma dos cinco (malo).
Análisis
Las imágenes del producto cargan sin altura definida. Las imágenes desplazan el contenido. Aportan cero coma diez de CLS. El anuncio de debajo del producto carga después de la página. El anuncio ocupa espacio. El contenido se desplaza. Aporta cero coma doce de CLS. Las opiniones de los usuarios cargan desde una API. Se inyectan en la página. El contenido se desplaza. Aportan cero coma tres de CLS.
Optimización
Define la altura de las imágenes en el HTML. Las imágenes rellenan el espacio reservado. Aportación al CLS: cero. Reserva espacio para el anuncio. El anuncio carga en el espacio reservado. Aportación al CLS: cero. Carga de forma diferida las opiniones, fuera de la primera pantalla. No las inyectes en la primera pantalla. Aportación al CLS: cero (el desplazamiento ocurre fuera de la ventana visible).
Nuevo CLS: cero coma cero cinco (bueno).
Interaction to Next Paint (INP) en detalle
Qué mide el INP
INP mide la capacidad de respuesta. El usuario hace clic en un botón. El sistema procesa el clic. Actualiza el estado. Genera el cambio. Lo pinta en pantalla. INP es el tiempo desde el clic hasta el primer pintado de la actualización visual.
Ejemplo real
El usuario hace clic en el botón Añadir al carrito. El sistema comprueba el inventario. Actualiza el contador del carrito. Pinta el nuevo número en pantalla. Si el INP es de cien milisegundos, el usuario ve actualizarse el contador al instante. Si el INP es de un segundo, el contador se actualiza un segundo después. La página no responde.
Medición
INP se mide en milisegundos. Un objetivo por debajo de doscientos milisegundos es bueno.
Cómo optimizar el INP
Estrategia uno: reducir el tiempo de ejecución de JavaScript
Un JavaScript largo bloquea el pintado. Divide una tarea larga en tareas más pequeñas. Usa async, defer o Web Workers para los cálculos pesados.
Estrategia dos: optimizar los controladores de eventos
Los controladores de eventos deben hacer el mínimo trabajo. Pasa el trabajo pesado a segundo plano.
Estrategia tres: optimizar el CSS
Un CSS pesado puede retrasar el pintado. Usa la contención de CSS para decirle al navegador: este elemento es autónomo, no recalcules los estilos de toda la página cuando cambie.
Estrategia cuatro: usar una técnica de pintado más rápida
Las actualizaciones de CSS son más rápidas que las del DOM con JavaScript. Usa transformaciones de CSS en lugar de posicionar con left y top. Usa la opacidad de CSS en lugar de cambios de visibilidad.
Ejemplo real: capacidad de respuesta de un formulario
INP de partida: cuatrocientos milisegundos (malo).
Análisis
El formulario tiene JavaScript de validación. El usuario escribe en un campo. Se ejecuta la validación. La validación es síncrona. Bloquea la actualización del campo. El campo no se actualiza hasta que termina la validación. La página no responde.
Optimización
Pasa la validación a segundo plano (Web Worker o setTimeout). El campo se actualiza de inmediato. La validación ocurre en segundo plano. Usa contención de CSS en el formulario. Dile al navegador: el formulario es autónomo, no recalcules los estilos de toda la página. Usa transformaciones de CSS para la animación en lugar de posicionar con JavaScript.
Nuevo INP: ciento cincuenta milisegundos (bueno).
CLS e INP juntos
CLS hace que la página parezca inestable. INP hace que parezca que no responde. Juntos afectan a cómo percibe el usuario la calidad.
Una página con buen LCP pero mal CLS (rápida pero saltona) resulta frustrante. El usuario la culpa de lenta aunque el problema sea de estabilidad.
Una página con buen LCP y buen CLS pero mal INP (rápida y estable pero sin respuesta) parece rota. Los botones no responden a los clics.
Las tres Core Web Vitals importan para una buena experiencia.
Preguntas frecuentes
¿Cómo detectamos problemas de CLS?
Usa las herramientas para desarrolladores de Chrome. Haz clic derecho en la página. Inspeccionar. Pestaña Rendimiento. Graba la carga de la página. Las herramientas muestran los saltos de diseño durante la carga. Consulta también PageSpeed Insights. Lighthouse identifica problemas de CLS. Consulta también el informe de Core Web Vitals de Search Console. Muestra las páginas con mal CLS. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Debemos reservar espacio para todos los anuncios o solo para los críticos?
Reserva espacio para los anuncios de la primera pantalla (los que cargan de inmediato). No reserves espacio para los anuncios que quedan más abajo (los que cargan al hacer scroll). Esos anuncios pueden desplazar el contenido de más abajo, pero el usuario no ve el salto.
¿Cómo optimizamos el INP en aplicaciones complejas con mucho JavaScript?
Pasa los cálculos pesados a Web Workers. Un Web Worker se ejecuta en un hilo aparte. No bloquea el hilo principal. El hilo principal sigue respondiendo a lo que hace el usuario. Usa también los mecanismos de tu framework de interfaz que aplazan el cálculo pesado hasta después de atender la interacción.
¿Importa más el CLS en móvil o en escritorio?
Importa más en móvil. La pantalla del móvil es más pequeña. Los saltos de diseño se notan más. Es más probable que el usuario de móvil note el salto y se frustre. Prioriza la optimización del CLS en móvil.
¿Un buen CLS y un buen INP pueden compensar un mal LCP?
No. Si la página tarda cinco segundos en cargar, el usuario ya está frustrado antes de que importen el CLS y el INP. Se va antes de interactuar. Cargar rápido (buen LCP) es requisito para una buena experiencia. Un buen CLS y un buen INP mejoran la experiencia de una página rápida, no de una lenta.
¿Cómo medimos y seguimos las mejoras de CLS e INP?
Punto de partida: mide antes de optimizar. Aplica la optimización. Nueva medición: mide después. Usa la biblioteca Web Vitals (una biblioteca de JavaScript que mide las Core Web Vitals) para seguirlas con usuarios reales. Configura alertas: si el CLS o el INP empeoran, una alerta avisa al equipo.