.
Connect with us

Marketing

El ABC del Cumulative Layout Shift (CLS) en Google Search Console

Cumulative Layout Shift (CLS)

Google durante los últimos 10 años ha venido diciendo que la experiencia del usuario es una métrica importante para posicionarse o conservar el ranking en el buscador. Tras la liberación del Cambio de Diseño Acumulativo (Cumulative Layout Shift) a principio del 2019, Google dejó en claro que comenzará a medir la estabilidad visual cuando un usuario lee una publicación, y afectará en el factor de posicionamiento.


En frases mundanas, esto quiere decir, que la velocidad de carga del sitio debe ser ultra mega rápida y no debe tener cargas de elementos desfazados, por ejemplo, tener una imagen y que esta cargue mientras el usuario comenzó a leer y el párrafo se recorrió. Aplica también para bloques publicitarios, tarjetas de redes sociales insertadas en el contenido y bloques de conversión interna que carguen posterior a la carga completa del DOM.

Para Google, esto es molesto y puede perjudicar al usuario y en el peor de los casos puede causar daños severos al lector, ya sea una compra rápida, un envío de formulario antes de revisar, etc.

¿Qué es el Cumulative Layout Shift?

El Cumulative Layout Shift (CLS) es un algoritmo que detecta movimientos inesperados dentro del contenido de una página (Home, Secciones, Publicaciones) cuando los recursos externos cargan de forma asincrónica o los elementos DOM se agregan dinámicamente.


Esto puede ser una imagen, un video, un widgets insertado desde redes sociales, un anuncio publicitario, tamaño de fuente que no tienen una altura definida. La carga de estos ocurrirá cuando el navegador solicite al servidor la extracción de la información externa, y pueden tardarse desde 1 a 30 segundos dependiendo de muchos factores internos y externos, pero principalmente del ancho de banda de la conexión del usuario y del servidor.

Entonces, el CLS calcula el desplazamiento promedio que tiene una URL y lo califica como Bueno (verde), Necesita Optimización (naranja) y Pobre (rojo).

Si tu contenido está en verde o debajo del 0.1 de calificación tendrá un puntaje en la calificación algorítmica de posicionamiento alto a considerar; si lo tienes entre 0.1 y 0.25 no está mal pero puedes optimizar, en cambio si lo tienes sobre el 0.25 tu contenido aunque tenga 5 mil palabras y hayas hecho las mejores prácticas de SEO no tendrán un posicionamiento clave definido.

En Google Search Console lo podrás ver en la sección Core Web Vitals (Métricas Web Principales). En Google PageSpeed Insights lo verás en colores y valor numérico.

El Cumulative Layout Shift se calcula sólo si existe un movimiento inesperado. Por ejemplo, si el usuario hace clic en una ventana y esta se desplaza, es un cambio esperado por lo tanto, no habrá mala calificación.

La medición ocurre dentro de los primeros 5 segundos cuando toda la página cargó por completo.

La calificación del Cumulative Layout Shift depende de todas las áreas que intervienen en un contenido, por ejemplo, editorial, diseño gráfico, comercial, tecnológico. Medir responsables es fácil cuando se hacen diversas pruebas y se detecta que elemento no tiene el atributo height.

Cómo impacta el CLS en el departamento editorial

La mayoría de los sitios web de noticias y blogs, suelen complementar una publicación con widgets de YouTube, Twitter, Instagram, TikTok, por mencionar los más comunes; y descuidan que el exceso de carga asincrónica afecta directamente al Cumulative Layout Shift, porque lo primero que carga es lo propio del sitio y el usuario comienza a leer, a medida que pasan los segundos, estos widgets comienzan a imprimirse en la publicación y el desplazamiento de los párrafos previos a la lectura del usuario provoca que el contenido se mueva.

Google busca que esto no suceda y ha desarrollado una métrica para medirlo e incluirlo en el factor de posicionamiento.

Por lo tanto, el equipo editorial, debe asumir que la baja calificación del CLS cuando se trate de widgets externos, es de responsabilidad del editor y no del equipo de desarrollo y/o comercial.

Este problema se soluciona editando el código del widget poniendo una altura o height al mismo, de esta manera, en la carga del DOM, se respetará la altura y no importará cuanto tarde en cargar, ya que cuando esto suceda, el contenido no se desplazará.

Cómo impacta el CLS en el departamento comercial

Del mismo modo que sucede con la redacción editorial, los bloques de anuncios publicitarios también hacen estragos en el Cumulative Layout Shift, ya que la mayoría de los encargados de la publicidad programática y venta directa, define más de un formato publicitario para ganar en la subasta y obtener los mejores anunciantes.

Peor será la calificación cuando toda la carga publicitaria es responsiva y automática, ya que los algoritmos publicitarios con base a la visibilidad, mostrarán ahí los anuncios, desplazando los párrafos.

Esto se soluciona definiendo también la altura de ese espacio, y sin importar la velocidad de lectura del usuario, el espacio estará reservado para ese anuncio y no recorrerá la lectura. Obviamente, esto implica un mayor trabajo de análisis e interpretación de las mejores posiciones en el detalle de la publicación, y quizás los ingresos se verán disminuidos mientras no se mapea correctamente las mejores posiciones.

Cómo impacta el CLS en el departamento de desarrollo web

No basta con configurar un CMS para que se vea bonito el Home, sus secciones y el detalle de las publicaciones. Como tampoco configurar una CDN como CloudFlare para que todo marche perfecto y el peso de los archivos se distribuyan balanceadamente, como tampoco que los archivos CSS y JS carguen rápido.

El equipo de desarrollo es un área de soporte vital para el área editorial y comercial, no al revés. Por lo tanto, ellos deben conocer las dimensiones de los widgets ya sean verticales u horizontales para que definan con reglas la altura de estos widget y evitar que un redactor o un especialista en publicidad se equivoque con la definición del height.

Cómo mejorar el Cumulative Layout Shift

Todos los sitios web pueden tener una calificación excelente en CLS si respetan los principios rectores que Google impone para que tengan un mejor ranking.

Siempre incluya atributos de tamaño en sus imágenes y elementos de video, o reserve el espacio requerido con algo como 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.

Nunca inserte contenido sobre contenido existente, excepto en respuesta a una interacción del usuario. Esto garantiza que se esperan los cambios de diseño que ocurran. En pocas palabras, olvídate de los pop-ups y elementos flotantes que provoquen confusión y error de clic o dedo al usuario.

Carlos Puelma