CLS o Cumulative Layout Shift, se encarga de medir algo comúnmente conocido como estabilidad visual. Se definiría como la suma de las puntuaciones asignadas a cada elemento que cambia de tamaño o posición dentro del área visible al cargar la página. Estas puntuaciones se calculan como el porcentaje de pantalla visible ocupado por el elemento que ha cambiado, multiplicado por el porcentaje de la distancia que se ha desplazado.
En ocasiones, los elementos de una página van cambiando de ubicación según el contenido carga y se va materializando en la pantalla. Esto suele ser bastante molesto y origina muchos clics en lugares erróneos, lo que claramente estropea la experiencia de navegación. Esta métrica no mide tiempo, mide la frecuencia y magnitud con la que se dan estos cambios en una página. Cada vez que ocurre un cambio de estos, se añade un valor a la puntuación, y este valor es mayor cuanto más se mueve el elemento. Cuando la carga está completa, se suma todo y resulta la puntuación de CLS. Un buen CLS debe estar por debajo de 0,1.
Los motivos por los que los elementos de la página pueden cambiar de tamaño son los siguientes;
- Por la carga la fuente de los textos que la tienen asignada.
- Por la aplicación de forma tardía estilos de CSS; altos, rellenos, márgenes, bordes…
- Por la carga de imágenes en determinadas circunstancias.
- Por cambiar el alto u otras propiedades del CSS por JavaScript.
- Por añadir o retirar elementos por JavaScript.