¿Qué es el cambio acumulativo del diseño (CLS)?

El cambio acumulativo del diseño cuantifica la estabilidad visual, es decir, con qué frecuencia los elementos saltan después de que la página ha empezado a renderizarse. En un contexto de comercio, el CLS es la métrica que capta la frustración de pulsar por error un banner promocional porque una ficha de producto se desplazó en el último momento. No tiene unidades, se puntúa en el percentil 75 de las sesiones de usuarios reales y forma parte de los Core Web Vitals.

Definición

El CLS suma la fracción de impacto multiplicada por la fracción de distancia de cada cambio inesperado del diseño entre la carga de la página y su descarga completa, agregado en ventanas de sesión. Una buena puntuación está por debajo de 0,1 y una mala por encima de 0,25. Los desencadenantes típicos incluyen imágenes sin atributos de ancho y alto, fuentes web de carga tardía que provocan el reflujo del texto, banners de terceros cargados después del primer renderizado, scripts de pruebas A/B que inyectan nuevos nodos del DOM e insignias que llegan de forma asíncrona desde un servicio de personalización. El CLS es una métrica de tiempo de ejecución, por lo que el HTML renderizado en el servidor por sí solo no puede resolverlo; el comportamiento del cliente importa igual.

Por qué es importante

Los cambios del diseño erosionan la confianza y aumentan directamente los clics erróneos en los CTA de añadir al carrito y de checkout. El CLS es especialmente perjudicial en las PDP, donde los precios, los mensajes de stock y los distintivos de confianza suelen llegar desde servicios separados. Como parte de la señal de experiencia de página, influye en el posicionamiento en buscadores (SEO). Para los storefronts composable con muchas pruebas A/B y personalización, el CLS revela cuán disciplinado es el frontend a la hora de reservar espacio para el contenido asíncrono. También es el Vital más fácil de empeorar cuando los equipos avanzan rápido en experimentos de optimización de la tasa de conversión (CRO).

Casos de uso

Los equipos que utilizan Next.js, Nuxt o Astro corrigen el CLS estableciendo un ancho y un alto explícitos en las imágenes, declarando el CSS de aspect-ratio, precargando las fuentes críticas y usando font-display:optional para evitar el reflujo tardío del texto. Los espacios de banner de un sistema de gestión de contenidos (CMS) se renderizan con cajas de marcador de posición para que el contenido personalizado se inserte en el espacio reservado. Edge Rendering e ISR reducen la variabilidad al servir un HTML inicial estable, mientras que los frameworks de experimentos del lado del cliente se configuran para mutar únicamente dentro de contenedores con dimensiones fijas. Los paneles de RUM segmentan el CLS por plantilla para detectar regresiones vinculadas a nuevos módulos de merchandising o a despliegues de hiperpersonalización.

Relacionado

Explora Performance and Core Web Vitals · Composable Headless Frontend.