Cambio de diseño acumulativo (CLS)

El Desplazamiento Acumulativo de Diseño (CULS) mide la inestabilidad visual cuantificando la cantidad de contenido visible que se mueve inesperadamente durante la vida útil de una página. Es una de las métricas principales de Google Web Vitals y, a diferencia de las medidas de carga y capacidad de respuesta, es una puntuación sin unidades en lugar de una duración, calculada a partir de la proporción del área visible afectada por un desplazamiento y la distancia que recorre el contenido. El umbral publicado por Google considera que un valor de 0.1 o inferior se sitúa en el percentil 75 de las experiencias de usuario reales.

El comportamiento que describe resulta familiar para cualquiera que haya intentado hacer clic en un enlace y se haya encontrado con un anuncio encima que desplaza la página hacia abajo, o que haya empezado a leer un párrafo que saltó al cambiar la fuente web. Más allá de la irritación, la consecuencia práctica son los clics erróneos: el contenido que se mueve entre el momento en que el usuario decide pulsar y el momento en que lo hace da lugar a una acción incorrecta, lo que en una interfaz de comercio electrónico o bancaria puede significar una compra errónea, una eliminación incorrecta o una navegación no deseada.

Las causas están bien documentadas y, en su mayoría, son fáciles de prevenir. Las imágenes y los vídeos sin dimensiones explícitas provocan un redibujado al cargarse, ya que el navegador no puede reservar el espacio correcto con antelación. Los anuncios, los elementos incrustados y los iframes insertados en el flujo sin un contenedor reservado desplazan el contenido hacia abajo. Las fuentes web que cambian desde una fuente alternativa con métricas diferentes provocan un redibujado del texto. El contenido inyectado dinámicamente sobre el contenido existente, como banners, notificaciones y avisos de consentimiento, desplaza todo lo que está debajo. Las animaciones que cambian las propiedades de diseño en lugar de la transformación y la opacidad provocan un redibujado en cada fotograma.

Las correcciones correspondientes se encuentran entre las más económicas disponibles en el ámbito del rendimiento. Establecer atributos de ancho y alto o una relación de aspecto en los medios reserva espacio antes de la carga. Asignar contenedores fijos para anuncios e incrustaciones evita que la inserción desplace el contenido. Hacer coincidir las métricas de la fuente de reserva con la fuente web y utilizar estrategias de carga de fuentes adecuadas reduce el reajuste al intercambiar. Insertar contenido dinámico debajo del pliegue o en superposiciones en lugar de encima del contenido existente evita la categoría más disruptiva. Animar solo la transformación y la opacidad mantiene el movimiento fuera de la ruta de diseño.

La medición requiere prestar atención a la sesión, no solo a la carga de la página. La métrica se acumula a lo largo de la vida útil de la página, incluyendo los cambios que ocurren durante el desplazamiento y la interacción. Esto significa que una página con una buena puntuación en la carga inicial aún puede obtener una puntuación baja en general debido a que el contenido de carga diferida llega sin espacio reservado. Se excluyen los cambios que ocurren en un breve lapso después de la interacción del usuario, bajo el argumento de que el movimiento del contenido en respuesta a una acción deliberada es esperado y no disruptivo.

Los avisos de consentimiento y los banners promocionales merecen especial atención, ya que se insertan tarde, suelen gestionarse fuera del proceso de desarrollo principal y con frecuencia desplazan el contenido. Un banner que aparece en la parte superior del documento tras la renderización desplaza todo hacia abajo justo cuando el visitante empieza a leer o a hacer clic en un enlace. Presentar estos elementos como superposiciones que no participan en el diseño, o reservarles espacio antes de que se rendericen, resuelve el problema sin eliminarlos. Dado que estos componentes suelen ser configurados por los equipos de marketing o legales mediante herramientas de terceros, la solución generalmente requiere una comunicación entre diferentes departamentos en lugar de un simple cambio de código.

Debido a que las causas suelen residir en plantillas, integraciones publicitarias e incrustaciones de terceros en lugar de en un solo componente, la remediación tiende a requerir coordinación entre los equipos responsables de cada uno. En la práctica, esto es estándar. rendimiento web trabajo, y es una de las áreas donde la conexión con los resultados comerciales es más directa, ya que la inestabilidad del diseño en una página de producto o de pago produce toques erróneos y abandono que un Auditoría de experiencia de usuario Se manifestarán como fallos de usabilidad sin que necesariamente se identifique la causa técnica subyacente.