El CLS, o Cumulative Layout Shift, es un factor de usabilidad web que fue introducido por Google a finales de 2020, como una de las tres métricas incluidas en las Core Web Vitals. Mientras que el resto de los factores miden cuestiones relativas a la velocidad de carga de la página (LCP) o la interactividad de la web (FID), el CLS se ocupa de evaluar la estabilidad visual de una URL.
Expliquémoslo con un ejemplo. Seguramente alguna vez has llegado a una página web a través de los resultados de Google y, cuando estabas comenzando a leer el texto, de repente ves que se desplaza hacia abajo porque por encima de ese texto se carga una imagen o anuncio. Seguramente te sentirías frustrado e incluso puede que hicieses un clic involuntario en un lugar equivocado. El CLS puntúa esos cambios de posición, como veremos a continuación.
¿Qué es el CLS y por qué importa en SEO?
El CLS es el Cumulative Layout Shift, es decir, el “Cambio de Diseño Acumulativo”, una métrica de Google que evalúa los cambios en el diseño inesperados que se suceden durante el proceso de carga de una URL.
Dentro de las Core Web Vitals, el CLS es la más abstracta ya que mide los cambios de diseño en la web. Si el desplazamiento del texto o del resto de elementos durante la carga se produce en la parte superior de la página, esos cambios son acumulativos y se suman aquellos que se produzcan en una ventana de 5 segundos. El CLS total es la suma de todos ellos.
El CLS afecta a la experiencia que recibe el usuario y puede aumentar la tasa de rebote y que se traduzca en un rechazo hacia la marca.
Para el SEO, las Core Web Vitals como esta son fundamentales, ya que forman parte de los factores de posicionamiento y la mayoría de las búsquedas web se realizan desde dispositivos móviles, más exigentes que una versión de escritorio. Las Core Web Vitals se miden desde la perspectiva del usuario y nos permiten identificar áreas susceptibles de mejora.
En la última versión de Lighthouse se clasifica la importancia de las diferentes técnicas en los siguientes porcentajes:
- TBT (Total Blocking Time): 30%
- LCP (Large Contentful Paint): 25% cuánto tarda en cargarse el elemento más grande visible que incluye la web, puede ser una imagen o un elemento CSS desde que se hace la solicitud al servidor hasta que empiezan a mostrarse datos en pantalla.
- CLS (Cumulative Layout Shift): 15%
- FCP (First Contentful Paint): 10% First Content Print
- SI (Speed Index): 10%
- TTI (Time To Interactive): 10%
Los smartphones, con redes 3G o 4G tienen una carga más lenta que un ordenador con conexión de fibra. Además, las características técnicas del dispositivo pueden ralentizar la carga.
Por un lado debemos tener en cuenta que los problemas de velocidad de página se pueden deber tanto al rendimiento del servidor como a la configuración del sitio web. Debemos asegurarnos que todos los recursos son los adecuados.
¿No sabes cómo están las métricas de velocidad de tu web? Aquí puedes ver cómo hacer un test de velocidad.
¿Cómo se calcula el CLS?
Google tiene un sistema propio de puntuación y una marca de un 0’1 es el máximo admitido para aprobar el CLS. Con una cifra tan baja, debemos intentar conseguir una estabilidad total de la URL en cuestión.
La fórmula que Google utiliza tiene en cuenta la fracción de impacto y la fracción de distancia:
- La fracción de impacto mide la cantidad de espacio que ocupa un elemento inestable en el área de la ventana entre dos marcos.
- La fracción de distancia es la distancia más grande de cualquier elemento inestable que se ha desplazado en el marco (tanto en horizontal como en vertical).
CLS = fracción de impacto x fracción de distancia
Como podemos ver en la siguiente imagen, Google valora positivamente que el CLS sea inferior o igual a 0,1, considera muy mala una puntuación igual o superior a 0,25 y que necesita mejoras en la franja intermedia.
El CLS está muy relacionado con la experiencia de usuario (UX) ya que un mal resultado puede generar frustración en cada una de las visitas. Esta métrica no mide el tiempo sino los cambios de posiciones de los elementos. Cuantos más cambios de diseño se sufran en la navegación, más probable es que el usuario abandone y se vaya a otra web.
¿Cómo mejorar el CLS?
Como en todo trabajo SEO es importante medir, analizar y trazar una estrategia para mejorar. En el caso del CLS tenemos que asegurarnos de que todas las imágenes están dimensionadas al máximo tamaño que permite el marco.
Las principales casuísticas que generan un CLS pobre son:
- Imágenes sin dimensiones especificadas.
- Anuncios e iframes embebidos sin dimensiones establecidas.
- Contenido inyectado dinámicamente.
- Fuentes tipográficas que causan FOIT y/o FOUT.
- Acciones del servidor servidor que envía nuevas peticiones DOM.
¿Cómo mejorar el CLS en las imágenes?
Tanto en imágenes como en vídeos debemos incluir los atributos de tamaño <width> y <height>. Cuando tenemos dudas sobre si una imagen está bien delimitada, podemos revisarla con el inspector del navegador para comprobar qué código acompaña a una determinada imagen.
Estas dimensiones establecidas serán la reserva de espacio que Google respete para la carga de imágenes y evitar que el CLS impacte negativamente en nuestro proyecto. Cuando marcamos una reserva de espacio, estamos consiguiendo que el contenido no se desplace hacia abajo si la página tarda en cargar. A mayor estabilidad del contenido, menos cambios acumulativos.
Si la imagen es responsive, se puede usar el atributo srcset con diferentes imágenes y usar un “set” de imágenes de diferentes tamaños. Otra opción es mediante CSS usar la relación de aspecto (1:1, 16:9) para que sea el navegador el encargado de calcular el espacio necesario para mostrar la imagen, evitando así ningún movimiento inesperado.
En el caso de los anuncios, se puede optar solo a anuncios de un determinado tamaño (limitando así la posibilidad de obtener las pujas más altas) o estableciendo como tamaño de imagen el máximo del anuncio. De esta forma, permitiremos todos los tipos de anuncios y si el anuncio que se muestra es de tamaño menor simplemente aparecerá espacio en blanco alrededor. Esta decisión debe ser tomada en base a la dependencia que el proyecto tenga de los ingresos de publicidad.
Si nuestra web cuenta con contenido dinámico, es recomendable mostrarlo con vista previa para cumplir con las Core Web Vitals.
¿Cómo afectan las fuentes que causan FOIT/FOUT al CLS?
A veces los problemas de CLS están causados por las fuentes que se utilizan en el sitio web. Cuando una tipografía tarda en cargar puede generar dos problemas:
- FOIT (Flashes de Texto Invisible) se queda el espacio en blanco y hasta que no cargue la fuente no mostrará el texto. Este error puede causar un fuerte rechazo en el usuario ya que puede tener la sensación de que la web está rota y abandonar.
- FOUT (Flashes de Texto sin Estilo). La tipografía del sistema puede ser diferente de la elegida como fuente principal. El FOUT se produce cuando el sitio muestra una tipografía por defecto hasta que se puede evitar con un preload del recurso para adelantarlo. Mediante CSS se puede crear una regla para que si tarda en cargar la fuente más de 100 milisegundos, deje la fuente por defecto “font-display: optional;”.
El CLS y las Core Web Vitals en Semrush
Gracias a Semrush podemos auditar todos los factores que afectan al SEO desde un único lugar. Desde Auditoría del sitio podemos comprobar las Core Web Vitals tanto en móvil como en escritorio gracias a la conexión con Lighthouse.
La herramienta de Auditoría del Sitio de Semrush facilita establecer las prioridades para las mejoras técnicas del sitio web. El panel muestra de manera muy intuitiva la gravedad de los errores para poder realizar nosotros mismos los cambios o exportarlos para que el equipo de desarrollo se ocupe de solventarlos.
Además, desde Semrush puedes programar una auditoría periódica del sitio para ver el impacto de los cambios y que el sitio avanza hacia el cumplimiento de los requisitos de Google.
Hay que tener en cuenta que los datos que muestran en los informes de crUX se basan en los usuarios reales del sitio de los últimos 28 días, por lo que los cambios que realicemos no se verán reflejados al momento. Una auditoría programada a nuestro email nos facilitará conocer la evolución de los cambios para CLS.
La versión gratuita de Semrush también permite hacer una auditoría de la web a un máximo de 100 URLs. De esta manera obtendrás una puntuación general de tu sitio web y podrás detectar las principales deficiencias con las recomendaciones y soluciones a implementar para cada caso.
A modo de resumen diremos que debemos mantener unas Core Web Vitals lo más optimizadas posible. Para intentar mantener el CLS lo más cercano posible a cero debemos reservar un espacio para cada bloque de anuncios o imágenes y precargar las fuentes puede ayudarnos a un mejor rendimiento del sitio web.