¿Qué es el CLS o Cumulative Layout Shift?

¡Ya estamos llegando al final de las Core Web Vitals! Hoy es el turno de la última métrica, la CLS o Cumulative Layout Shift. ¿Qué significa CLS? Podemos traducirlo como los cambios de diseño acumulados, cambios de diseño inesperados que se han producido durante la vida útil de una página.

¿Cómo funciona la métrica CLS?

Los Cambios de diseño acumulados o CLS hacen referencia a cualquier cambio en el diseño que se pueda producir en una página, es decir, a los elementos visibles que cambian de posición. Esta métrica mide, básicamente, la estabilidad visual de la página teniendo la frecuencia y magnitud con la que se dan estos cambios en la página.

¿En qué momentos podemos encontrar estos cambios de posición? Puede pasar en cualquier momento en el que los elementos se ejecuten de forma asíncrona. Un ejemplo muy claro de ello (por el que seguramente hayas pasado más de una vez) es cuando quieres clicar sobre un botón o un enalce y, de repente, justo se carga un banner u otro elemento y pinchas sin querer sobre él en lugar de sobre lo que querías pinchar en un principio. ¿¡¡Pero por qué se ha movido!!?

¿Es incómodo verdad? Pues es esto lo que se pretende medir con esta métrica, que cuando los elementos nuevos aparezan, la posición del resto de los elementos no se vean perjudicados y, por ende, la experiencia del usuario tampoco. 

Core Web Vitals: CLS en detalle

Ahora que ya comenzamos a comprender mejor qué es esta métrica en las Core Web Vitals es cuando empezamos a tener preguntas. ¡Bien, pues vamos a ver algunas de estas cuestionas más comunes para intentar que nos quede todo lo más claro posible!

¿Cuáles son las puntuaciones para un buen CLS?

Antes de saber cuáles son las puntuaciones óptimas, tenemos que saber cómo se mide el CLS, ¿no? Pues bien, cada vez que ocurre un cambio de este tipo, se añade un valor de puntuación. Se puede deducir que este valor es mayor cuanto más se mueve el elemento. Una vez la carga está completa, se suma todo y da como resultado la puntuación de CLS.

Ahora sí, ¿cuál son los umbralos de esta métrica? Pues aunque está claro que el CLS a 0 es ideal, se ha llegado a la conclusión de que los valores de hasta 0,1 son umbrales CLS buenos, mientras que un CLS de 0.25 o mayor es considerado malo. De esta forma, sabemos que:

• CLS bueno: menor o igual a 0.1
• CLS que necesita mejorar: entre 0.1 y 0.25
• CLS malo: mayor 0.25

¿Cómo puedo medir el CLS de mi web?

En este caso, las herramientas de las que hablábamos para medir el LCP de tu sitio, también nos sirven para medir el CLS:

• PageSpeed Insights. Una herramienta bastante conocida por todos con la que puedes analizar el contenido de una página web. Tiene su apartado específico para estas métricas y podrás ver si los valores están o no dentro de lo óptimo. Además, te dará sugerencias para mejorar estos aspectos.
• Lighthouse. Lighthouse es una herramienta automatizada open-source con la que podrás realizar auditorías de sitios web, conocer los problemas que tiene tu web a nivel de desarrollo e identificar mejoras para la misma.
• GTMetrix. Funciona básicamente igual que PageSpeed, analiza la velocidad del contenido de tu web distinguiendo entre distintas métricas y aportándote consejos para mejorarlas. Puedes ver un mapa de velocidad para saber en qué segundo se ha medido cada uno de los valores.
• Measure de web.dev. Otra herramienta de Google con la que podrás ver el rendimiento de su sitio web, así como obtener sugerencias para mejorar la velocidad y, con ello, la experiencia de usuario.
• Google Search Console. A través de Google Search Console también puedes obtener un informe donde podrás ver el rendimiento de tus páginas. Puedes complementar el uso de esta herramienta con alguna otra para obtener sugerencias sobre cómo mejorar los errores que veas en el informe.

Prácticas para optimizar un buen CLS

¿Qué tenemos que hacer para mantener un buen CLS? Son varias las prácticas a seguir para que el CLS de tu sitio tenga una buena puntuación. A continuación, vamos a hablarte sobre 3 de ellas, las más comunes. Si quieres saber más, puedes visitar el siguiente artículo de Google: Cómo optimizar el CLS.

• Dimesión de imágenes. Incluir atributos de tamaño width y height en las imágenes y elementos de video. Reservar el espacio requerido con cuadros de relación de aspecto CSS. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga la imagen y no mover el resto del contenido.
• Contenido dinámico. Evitar insertar contenido nuevo por encima del contenido existente, a menos que sea en respuesta a la interacción del usuario. Lo mismo que con las imágenes, si se necesita mostrar este tipo de posibilidades de interfaz de usuario, será mejor reservar suficiente espacio en la ventana con anticipación para que cuando se cargue, no haga que el contenido de la página se desplace de forma inesperada.
• Animaciones. Utilizar transform para las animaciones que puedan desencadenar cambios de diseño. En lugar de cambiar las propiedades height y width, utiliza transform: scale(). Para mover los elementos alrededor, evita cambiar las propuedades top, right, bottom, o left y utiliza transform: translate() en su lugar.
• Incrustaciones e iframes. Calcular previamente el espacio suficiente que va a necesitar la infrustación y reservarlo, en lugar de mover el resto del contenido cuando se muestre. Puedes obtener la altura final inspeccionándola con las herramientas de desarrollo del navegador.

Cómo solucionar problemas de CLS

Si aún así, nos encontramos con un CLS dentro de los umbralos considerados como malos, es toca revisar alguno de estos aspectos y seguramente podremos darle una solución sencilla.

• Cómo están definidos los estilos. Comprobar que los estilos están definidos al inicio en lugar de que se ejecuten al final y puedan cambiar el diseño del componente.
• Propiedades de tamaño. Establecer las propiedades height y width por defecto para los componentes.
• Evitar conflictos entre clases CSS. Revisar que no hay colisiones entre clases css con parámetros. Parece algo evidente, pero se puede pasar por alto entre tanto código (y no sería raro).
• Qué hace el código Javascript. Evitar que Javascript modifique styles o clases de Css de forma posterior.
• Posibles fallos por plugins. Si estás usando sistemas como WordPress, Joomla, Prestashop, etc, es conveniente revisar que ningún plugin esté añadiendo código extra que modifique los estilos.

Si el error que buscas no está aquí, ¡échale un vistazo al link del apartado anterior sobre «Cómo optimizar el CLS»!