Cumulative Layout Shift

¿Qué es el Cumulative Layout Shift?

El CLS es uno de los indicadores creados por Google para su programa Core Web Vitals. Es una métrica que mide la frecuencia con la que los usuarios de un sitio web experimentan un cambio inesperado en el diseño de la página. En otras palabras, el CLS analiza la cantidad de contenido desplazado durante el diseño y mide la "distancia" del desplazamiento de estos contenidos en la página.
Por ejemplo: el CLS permite examinar los cambios en el diseño cuando un usuario está leyendo un texto y dicho texto se desplaza inesperadamente debido a la aparición de un anuncio. Esto puede crear una experiencia negativa para el usuario.

¿Qué es un buen CLS?

Un buen puntaje de CLS es inferior a 0,1. Por encima de 0,25, es urgente intervenir para restaurar una estabilidad visual adecuada, para no afectar la experiencia del usuario y el posicionamiento de la página en los SERP.

¿Cómo se calcula el CLS?

Se calcula de la siguiente manera: fracción de impacto x fracción de distancia. Este cálculo corresponde a la parte de la pantalla que se desplazó de manera inesperada, multiplicado por la distancia recorrida, ya sea en anchura o en altura.

¿Cuáles son las causas de un mal CLS?

Las causas de un mal CLS pueden ser:

• Imágenes sin dimensiones definidas, lo que hace que el espacio asignado a la imagen sea determinado por el navegador tras su importación, provocando desplazamientos inesperados. Para solucionarlo, define atributos de altura y anchura con una relación de aspecto proporcional en el código HTML de la página.

• Anuncios publicitarios. Para evitar el desplazamiento del contenido debido a la aparición de anuncios, crea espacios estáticos donde se integrarán los bloques publicitarios.

• Embeds e iframes sin dimensiones definidas. Para solucionarlo, encuentra la altura de la integración final y crea un espacio personalizado.

• Contenido inyectado dinámicamente (banners, formularios, aviso de GDPR, etc.). Es posible reservar un espacio para estos módulos, de modo que se superpongan al contenido sin alterar el diseño de la página.

• Fuentes web. Es posible predefinirlas y precargarlas.