El Cumulative Layout Shift (CLS), “movimiento inesperado de contenido” en español, es una métrica centrada en el usuario para medir la estabilidad visual, que ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados; un CLS bajo ayuda a garantizar que tu sitio web tiene cambios suaves y naturales.

¿Alguna vez has estado leyendo un artículo cuando de repente algo cambia en la página? Sin previo aviso, el texto se mueve y pierdes en el punto donde estabas. O peor aún: estás a punto de tocar un enlace o un botón, pero en el instante antes de que caiga tu dedo, WOW!, el enlace se mueve y terminas haciendo clic en otra cosa. Mira el siguiente video que ilustra cómo la inestabilidad del diseño puede afectar negativamente al usuario a la hora de realizar una compra en una tienda online:

Chiyana ya nos acerca a este problema en su post 3 errores comunes en el diseño para sitios web móviles. El movimiento inesperado del contenido de la página generalmente ocurre porque los recursos se cargan asíncronamente o los elementos DOM se agregan dinámicamente a la página por encima del contenido existente.

La culpa de estas reacciones en un sitio web puede ser una imagen o video con dimensiones desconocidas, una fuente que se hace más grande o más pequeña, o especialmente los más comunes son un anuncio o widget de terceros que se redimensiona dinámicamente.

¿Qué es CLS?

Cumulative Layout Shift (CLS) es una métrica de Google para evaluar los cambios en el diseño, movimientos inesperados en el contenido. Con CLS podrás evaluar este problema midiendo la frecuencia con la que ocurren estas acciones a tus usuarios.

CLS mide la suma total de todas las puntuaciones de cambios en el diseño inicial de tu sitio web por cada cambio inesperado que ocurra durante toda la vida útil de la visita en la página. Un cambio de diseño se produce cada vez que un elemento visible cambia su posición.

¿Qué es una buena puntuación de CLS?

Para proporcionar una buena experiencia de usuario, los sitios web deben esforzarse por tener una puntuación CLS de 0,1 o menos, sitios web normalmente estáticos. Cuanto más baja sea tu puntuación, más estable será tu diseño.

Las puntuaciones oficiales de CLS utilizadas por las herramientas de rendimiento de Google son las siguientes:

  • Bueno - CLS por debajo de 0,1.
  • Mejorable - CLS entre 0,1 y 0,25.
  • Necesita mejorar - CLS por encima de 0,25.

Google recomienda que mantengas la puntuación CLS por debajo de 0,1 para proporcionar una buena experiencia de usuario.

Para medir el CLS de tu sitio web, tienes las siguientes herramientas de Google:

¿Por qué es tan importante el CLS en tu sitio web?

Cada día se producen varias micro-actualizaciones en el algoritmo de Google que determina el posicionamiento de las páginas web en los motores de búsqueda. Estamos hablando de entre 500 y 600 actualizaciones al año, de las cuales la mayoría nos pasan desapercibidas.

Google Search no para de refinar y redefinir la maquinaria para ofrecernos unos resultados de búsqueda cada vez más precisos. Un par de veces al año y especialmente a finales de año, Google lanza una actualización de las grandes, de las que ponen nervioso a los profesionales en SEO. Estas grandes actualizaciones se conocen como Core Updates.

CLS fue en consecuencia una de las grandes actualizaciones en el algoritmo de Google a finales del año 2020, es por ello que debes estar alineado a las nuevas definiciones para ayudar a posicionar tu sitio web frente al de tu competencia.

Conclusión

CLS es una métrica de Google que detecta movimientos inesperados dentro del contenido de tu sitio web, mide la suma total de todas las puntuaciones de los cambios de diseño individuales para cada cambio de diseño inesperado que ocurre durante toda la vida útil de tu página. Esta métrica forma parte del algoritmo de búsquedas de Google, por lo que tu sitio web debe estar a la altura para un correcto SEO.

Photo by Kolleen Gladden on Unsplash

Referencias:
· Cumulative Layout Shift (CLS)