Descubre cómo evitar cambios de diseño repentinos para mejorar la experiencia del usuario
Fecha de publicación: 5 de mayo de 2020; Última actualización: 7 de febrero de 2025
El cambio de diseño acumulado (CLS) es una de las tres métricas de las Métricas web esenciales. Mide la inestabilidad del contenido combinando la cantidad de contenido visible que se desplazó en el viewport con la distancia que se movieron los elementos afectados.
Los cambios de diseño pueden distraer a los usuarios. Imagina que empezaste a leer un artículo cuando, de repente, los elementos se mueven por la página, lo que te desorienta y te obliga a volver a encontrar tu lugar. Esto es muy común en la Web, incluso cuando se leen noticias o se intenta hacer clic en los botones “Buscar” o “Agregar al carrito”. Estas experiencias son visualmente discordantes y frustrantes. A menudo, se producen cuando los elementos visibles se ven obligados a moverse porque se agregó otro elemento a la página o se le cambió el tamaño de forma repentina.
Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener un CLS de 0.1 o menos para, al menos, el 75% de las visitas a la página.
A diferencia de los otros métricas principales de la Web, que son valores basados en el tiempo medidos en segundos o milisegundos, la puntuación de CLS es un valor sin unidades basado en un cálculo de cuánto contenido se mueve y en qué medida.
En esta guía, analizaremos la optimización de las causas comunes de los cambios de diseño.
Las causas más comunes de un CLS bajo son las siguientes:
- Imágenes sin dimensiones
- Anuncios, incorporaciones y iframes sin dimensiones
- Contenido insertado de forma dinámica, como anuncios, incorporaciones y marcos de iframe sin dimensiones
- Fuentes web
Comprende las causas de los cambios de diseño
Antes de comenzar a buscar soluciones para los problemas comunes de CLS, es importante comprender tu puntuación de CLS y de dónde provienen los cambios.
CLS en herramientas de lab en comparación con el campo
Es común escuchar que los desarrolladores piensan que el CLS que mide el Informe de UX de Chrome (CrUX) es incorrecto, ya que no coincide con el CLS que miden con las herramientas para desarrolladores de Chrome o con otras herramientas de lab. Es posible que las herramientas de lab de rendimiento web, como Lighthouse, no muestren el CLS completo de una página, ya que suelen realizar una carga básica de la página para medir algunas métricas de rendimiento web y proporcionar orientación (aunque los flujos de usuarios de Lighthouse te permiten realizar mediciones más allá de la auditoría de carga de página predeterminada).
CrUX es el conjunto de datos oficial del programa Web Vitals y, por lo tanto, el CLS se mide durante todo el ciclo de vida de la página y no solo durante la carga inicial de la página que suelen medir las herramientas de laboratorio.
Los cambios de diseño son muy comunes durante la carga de la página, ya que se recuperan todos los recursos necesarios para renderizar la página inicialmente, pero también pueden ocurrir después de la carga inicial. Muchos cambios posteriores a la carga pueden ocurrir como resultado de una interacción del usuario y, por lo tanto, se excluirán de la puntuación de CLS, ya que son cambios esperados, siempre que ocurran en un plazo de 500 milisegundos después de esa interacción.
Sin embargo, es posible que se incluyan otros cambios posteriores a la carga que el usuario no espera cuando no hubo una interacción que cumpla con los requisitos, por ejemplo, si te desplazas más hacia abajo en la página y se carga el contenido cargado de forma diferida, lo que provoca cambios. Otras causas comunes de la CLS posterior a la carga se encuentran en las interacciones de las transiciones, por ejemplo, en las apps de una sola página, que tardan más que el período de gracia de 500 milisegundos.
PageSpeed Insights muestra el CLS percibido por el usuario de una URL en la sección "Descubre lo que experimentan tus usuarios reales" y el CLS de carga basado en el laboratorio en la sección "Diagnostica problemas de rendimiento". Es probable que las diferencias entre estos valores sean el resultado de la CLS posterior a la carga.