Cambio de diseño acumulativo (CLS): qué es y cómo optimizar su sitio para ello

Imagine esto: suba un sitio web y parece listo para trabajar. Haga clic en una imagen presentada en el blog para leer el artículo y de repente toda la página cambia, porque algo más acaba de cargar. Y haga clic en algo completamente diferente y suba una página que nunca pretendió. Si ha encontrado este problema, sabe cómo el cambio de diseño acumulativo (CLS) puede tener un impacto negativo en la experiencia del usuario (UX). Cambiar el aspecto acumulativo es el término de cuánto cambia la apariencia de una página mientras se carga, y en este artículo cavaremos más en lo que significa. Le mostraremos cómo medir CLS y explicar cuál es una buena puntuación. Luego discutiremos cómo optimizar la puntuación CLS de su sitio web. ¡Pongámonos a trabajar!
Suscríbase a nuestro canal de YouTube ¿Qué es el desplazamiento acumulativo de diseño (CLS)? No hay mejor manera de ilustrar cuál es una puntuación de CLS alta (es decir, algo más de 0.10 de las ideas de PageSpeed ​​de Google) que con un ejemplo visual. Aquí hay un sitio web con un aspecto que continúa cambiando a medida que se carga la página. Tenga en cuenta que no ejecutamos en absoluto cuando capturas esto. Nuestra vista sigue siendo la misma, pero la página cambia drásticamente solo:

Como usuario que visita este sitio, es posible que no esté seguro de cuándo termina la carga. Puede intentar hacer clic en una noticia, solo para que el aspecto cambie drásticamente. Como resultado, llega a la página equivocada y debe perder el tiempo girando. Dependiendo de la página, esto puede suceder varias veces. De lo contrario, hay una buena probabilidad de irse.
Entonces, sus usuarios cuanto más complejo sea un sitio web, más probabilidades tendrá de tener una puntuación CLS alta. Con los aspectos simples, como la página de inicio icónica, no hay CLS, porque incluyen muy pocos elementos: esto no significa que todos los sitios web complejos tengan puntajes CLS altos. Considere Amazon, por ejemplo. Nadie diría que el gigante de comercio electrónico utiliza un diseño web simple. Sin embargo, no hay muy pocos cambios de apariencia durante la navegación en el catálogo.

Los cambios de apariencia ocurren porque los navegadores tienden a cargar elementos de página asíncronos. Más importante aún, podría haber elementos de medios en su página original de dimensiones desconocidas. Esta combinación significa que el navegador no sabe cuánto espacio ocupará los elementos individuales hasta que termine la carga. De ahí el cambio drástico de apariencia.

El CLS es interesante porque se puede medir objetivamente utilizando varias herramientas, pero también está centrada en el usuario por el hecho de que el dispositivo de cada usuario puede afectar cómo puede cambiar el aspecto de su sitio. Aunque no puede controlar esto, ciertamente puede tomar medidas de precaución para que tenga el menor impacto posible. CLS es uno de los tres elementos web vitales que Google mide para determinar si su sitio web proporciona una experiencia sólida de EE. UU. (UX). Los otros elementos de base web vitales son el primer retraso de entrada (FID) y la pintura contenta más grande (LCP), lo que ciertamente merece cualquier esfuerzo que gaste optimizando.
Cómo medir CLS para averiguar si su sitio web tiene cambios de apariencia marcados es relativamente simple. En primer lugar, le recomendamos que intente acceder a su sitio web desde una variedad de dispositivos y pedirle a otros que hagan lo mismo. Como usted, puede ver si el aspecto permanece consistente mientras las páginas están cargando. Lo que probablemente encontrará es que la experiencia CLS puede variar mucho. Depende no solo de qué tan optimizado esté su sitio, sino también del dispositivo que usa. Dado esto, la mejor herramienta para medir el CLS de su sitio web es PageSpeed ​​Insights. Esto está directamente vinculado a Core Web Vitals de Google, por lo que puede ver directamente cómo su puntaje CLS afecta cómo Google ve su sitio. Este servicio le permite ingresar una URL y recibir una puntuación de rendimiento general para esto en función de los últimos 28 días de datos. recopilado por Google. El puntaje tiene en cuenta varios valores, incluidos CLS, FCP y LCP.
Para esta prueba, elegí un sitio web sin notable CLS. PageSpeed ​​Insights confirmó nuestras sospechas, porque dio resultados abrumadoramente positivos, con una puntuación poderosa. Observe que PageSpeed ​​Insights ofrece un desglose porcentual para cada puntaje. En este caso, el 91% de los usuarios experimentaron un cambio en la apariencia cero durante el sitio web de carga. Sin embargo, los visitantes restantes experimentaron un cierto nivel de cambio de apariencia.
Esto se espera cuando se trata de CLS y el resto de los vitales de la web central. La experiencia del usuario variará drásticamente dependiendo del dispositivo al que acceda, la conexión a Internet y muchos otros factores. Prácticamente no hay forma de explicar a ningún usuario que nunca experimente CLS, pero ciertamente puede tener precaución para optimizarlo, de modo que el porcentaje sea lo más pequeño posible. Además de los datos de campo, PageSpeed ​​Insights también proporciona lo que llama datos de laboratorio. Estos son puntajes de rendimiento basados ​​en una sola prueba, en lugar de los datos recopilados durante un período largo (que se considera datos de campo). En nuestra prueba recibimos una puntuación CLS CLS, lo que significa que no hay ningún cambio de apariencia. Para esta prueba especial. Ahora comparemos esto con otro sitio web que no haya obtenido una puntuación CLS tan fuerte.

Para cumplir con los estándares de Google, su puntaje CLS debe estar por debajo de 0.10. Cualquier cosa de lo anterior significa que hay cambios significativos y visibles en la apariencia, lo que conduce a una experiencia de usuario débil. Cómo identificar las causas que cambian la apariencia si desea identificar qué elementos causan cambios de apariencia en su sitio web, puede hacerlo utilizando las herramientas de desarrollo de Chrome. Si abre las herramientas (CTRL-Shift-I) y pasa a la pestaña Rendimiento, podrá grabar pruebas de rendimiento mientras navega por la web.
Después de detener el registro, Chrome Dev Tools devolverá una cronología que muestra los tiempos de carga, las solicitudes individuales y los elementos vitales básicos. De esta cronología puede seleccionar un aspecto de cambio de eventos individuales que se enumeran en la experiencia. De esta manera, puede ver qué elementos corresponden. Después de saber qué elementos causan cambios de apariencia, puede tomar medidas para remediar el problema. Hablaremos de ello en la siguiente sección. Si desea monitorear los vitales web básicos de su sitio, le recomendamos que configure una cuenta de la consola de búsqueda de Google. Podrá monitorear los valores de rendimiento y los vitales web centrales en la consola de búsqueda, lo cual es una ventaja cuando se trata de la optimización de motores de búsqueda (SEO). Consideramos en su interés monitorear las consolas de búsqueda regulares, sin importar cuán malo tenga un cierto valor que esté siguiendo.

Cómo optimizar su puntaje en general, hay dos grandes culpables cuando se trata de puntajes altos: archivos de medios y anuncios. Por ejemplo, si carga un archivo de imagen con una resolución masiva, pero no especifica su altura y ancho, es posible romper la apariencia de la página. En cuanto al rendimiento del sitio web, es mejor usar imágenes que ya tengan las dimensiones precisas que mostrará. De esta manera, el navegador no debe gastar la potencia de procesamiento (y el tiempo) para cambiarlos correctamente. Sin embargo, esto no siempre es posible. Cuando no es así, debe establecer los atributos de ancho y altura para cada imagen mostrada. De esta manera, el navegador del usuario sabrá exactamente dónde encaja la imagen y no tendrá que cambiar la apariencia en el último segundo posible. Aquí están estos atributos en html: & lt; img src = “http://imageurl.com “Width =” 120 “Height =” 90 “Alt =” Image Alt Text “& gt; Si usa WordPress, algunos complementos de optimización de imágenes pueden cambiar automáticamente los archivos a medida que los carga, lo que está a cargo de establecer los atributos de ancho y altura necesarios. Cuando se trata de imágenes receptivas, puede confiar en CSS en lugar de declarar manualmente el ancho y la altura. CSS le permite usar el atributo de ancho máximo para decirle a los navegadores qué porcentaje del puerto de visualización debe tomar la imagen: IMG {

Max-Width: 90VW;


Altura: Auto;

} En este ejemplo, le decimos al navegador que cambie el tamaño de la imagen, para ocupar el 90% de la visualización del usuario. Al mismo tiempo, establecemos el atributo a la altura a la automática, de modo que el navegador calcula la altura ideal en función del nuevo ancho de la imagen y su relación de apariencia. Los mismos elementos fundamentales se aplican a los anuncios como imágenes. Por lo general, trabajará con iframe, y a veces las redes de publicidad utilizarán dimensiones dinámicas. Esto puede hacer estragos con la apariencia de sus páginas en lugar de permitir que las redes publicitarias decidan qué tan grandes deberían ser los anuncios en su sitio web, puede reservar áreas para ellos. Esto significa declarar los atributos de ancho y altura para las áreas publicitarias y la configuración de reserva si no cobran, por lo que el espacio vacío no causa un cambio de apariencia. Puede usar el mismo tipo de CSS y estilo en línea para cualquier contenedor publicitario que desee, manteniéndolo atascado en posición, sin importar los anuncios que se transmitan. Las preguntas frecuentes sobre el cambio de apariencia acumulada (CLS) CLS pueden ser un poco más complicadas que los valores de LCP y FCP. Dado esto, revisemos algunas preguntas ordinarias que los usuarios tienen sobre el CLS, para asegurarnos de que le faltan información clave. ¿Cómo afecta el rendimiento de mi sitio web?
En teoría, puede tener un sitio web muy rápido, que aún obtiene una puntuación CLS relativamente débil. Al igual que con otros elementos web vitales, los puntajes CLS pueden no correlacionarse directamente con el rendimiento general del sitio. Es posible que su sitio se queme rápidamente, pero a medida que está cargado, tiene lugar como acordeón. Incluso entonces, los cambios de gran apariencia son definitivamente un impacto negativo en el sitio del sitio. Google considera esto increíblemente importante. Es por eso que Google evalúa tanto este punto de datos. ¿CLS es menos importante que las puntuaciones FCP o LCP? Muchos usuarios prestan más atención a los puntajes FCP y LCP que los CL. Esto se debe a que estos dos valores son más fáciles de correlacionar con el rendimiento del sitio web. Aunque FCP es específicamente un indicador centrado en el usuario, CLS también es más difícil de medir constantemente en una gran cantidad de usuarios. Los tres valores constituyen Google Core Web Vitals. Esto significa que si ignora uno de ellos, puede colocar menos los resultados de búsqueda relevantes. Asegurar que su sitio esté optimizado para un CLS bajo generalmente no tiene nada más que un impacto positivo en el rendimiento del sitio, como LCP y FCP. Si la pintura más grande contenida se empuja en la pantalla tan pronto como el usuario lo ve, ¿qué tan útil es el tiempo de carga? ¿Cuál es un buen puntaje de CLS?