Cambio de diseño acumulado (CLS): Cómo impacta tu SEO y la experiencia del usuario

La manera como reaccionan los elementos de diseño durante la carga de la página es uno de los problemas más comunes en los sitios web que encontramos en Internet, sea de grandes o pequeñas empresas.

Aunque en Colombia ya estamos acostumbrados a comportamientos como la carga lenta o imágenes desproporcionadas, otros problemas comunes, como los cambios acumulativos de diseño, pueden llegar a ser muy frustrantes.

En este artículo, exploraremos en detalle qué es el CLS, por qué es importante para el SEO, cómo afecta la experiencia del usuario y qué estrategias se pueden implementar para mejorar esta métrica y, en consecuencia, optimizar el rendimiento de tu sitio web. Además, analizaremos algunas herramientas útiles para medir y optimizar el CLS.

¿Qué es el Cumulative Layout Shift (CLS)?

El cambio de diseño acumulado, conocido por sus siglas CLS, es una métrica de rendimiento web que mide la cantidad de movimientos inesperados que experimenta una página web durante su carga. En términos sencillos, evalúa cuánto «saltan» los elementos de la página mientras se está cargando, lo que puede generar una experiencia frustrante para el usuario.

Imagen de referencia tomada de https://nitropack.io/

Un valor alto de Cambio de Diseño Acumulado indica que los elementos de la página se mueven significativamente durante la carga. Esto puede ser causado por imágenes sin dimensiones especificadas, anuncios que se cargan tardíamente o la inserción dinámica de contenido.

Para ofrecer una buena experiencia de usuario, los sitios web deben esforzarse por tener un puntaje de CLS de 0.1 o menos.

Un puntaje de CLS bajo (de 0.1 o menos) indica una página es estable y cuenta con poco o ningún desplazamiento inesperado de los elementos de la página.

Un puntaje alto (mayores a 0.25)  sugiere que los elementos en la página se mueven mucho mientras la página se carga. Por ejemplo, los botones, las imágenes, los títulos, o textos que se mueven al momento que vas a hacer clic o simplemente se desplazan desde su ubicación inicial

Cómo se calcula el CLS en un sitio web

El puntaje de CLS se calcula con la distancia entre la carga inicial del elemento y el espacio que recorre al terminar la carga del sitio.

La fracción de impacto mide cuánta área de la ventana gráfica se ve afectada por elementos inestables entre dos fotogramas. Se calcula como la unión de las áreas visibles de todos los elementos inestables para el fotograma anterior y el fotograma actual, como una fracción del área total de la ventana gráfica.

La fracción de distancia mide la distancia que han recorrido los elementos inestables, en relación con la ventana gráfica. Es la mayor distancia que ha recorrido cualquier elemento inestable en el fotograma (ya sea horizontal o verticalmente) dividida por la mayor dimensión de la ventana gráfica (ancho o alto, la que sea mayor).

Estos cambios inesperados pueden ser frustrantes para el usuario, afectando negativamente su experiencia de navegación.

¿Por qué es importante el CLS para el SEO?

Google considera la experiencia del usuario (UX) como un factor clave en su algoritmo de clasificación. Un sitio web con un alto CLS puede resultar en una mala experiencia para el usuario, lo que puede aumentar la tasa de rebote y disminuir el tiempo de permanencia en la página. Estos factores negativos pueden afectar el SEO y reducir la visibilidad de tu sitio en los resultados de búsqueda.

En otras palabras, el CLS es una de las Métricas Web Principales (Core Web Vitals) que Google utiliza para evaluar la calidad de un sitio web. Ignorar el CLS puede resultar en una penalización en el ranking de búsqueda.

«Un alto CLS puede llevar a una mayor tasa de rebote, impactando negativamente la clasificación de SEO.»

¿Cómo afecta el CLS a la experiencia del usuario?

Los cambios inesperados en el diseño pueden interrumpir la interacción del usuario con la página, causando frustración y confusión.

Imagina que estás a punto de hacer clic en un botón, y de repente, este se mueve debido a la carga de un anuncio. Este tipo de interrupciones afecta negativamente la usabilidad y la percepción de tu sitio web.

Una buena Experiencia de Usuario (UX) se traduce en mayor tiempo de permanencia en la página, menor tasa de rebote y mayor probabilidad de conversión. Al mejorar el CLS, estás invirtiendo en la satisfacción de tus usuarios y, por ende, en el éxito de tu negocio.

Cómo mejorar el CLS para optimizar el SEO

La clave para mejorar el CLS y, por ende, la clasificación de SEO, es garantizar que los elementos de la página web no cambien de posición durante la carga. Aquí hay algunas estrategias:

Especifica las dimensiones de las imágenes y videos

Al incluir los atributos width y height en tus etiquetas <img> y <video>, reservas el espacio necesario para estos elementos antes de que se carguen, evitando desplazamientos inesperados.

Reserva espacio para los anuncios

Si utilizas anuncios en tu sitio web, asegúrate de reservar un espacio específico para ellos. Esto evitará que los anuncios empujen el contenido hacia abajo cuando se carguen.

Evita insertar contenido nuevo por encima del contenido existente

Si necesitas insertar contenido de forma dinámica, hazlo solo en respuesta a una interacción del usuario, como un clic en un botón.

Optimiza las fuentes web

Utiliza «font-display: optional» para evitar el cambio de fuente durante la carga de la página. Considera precargar las fuentes personalizadas para que estén disponibles lo antes posible.

Revisa las animaciones y transiciones

Asegúrate de que las animaciones y transiciones no causen desplazamientos inesperados. Utiliza las propiedades transform y opacity para animar elementos en lugar de cambiar su tamaño o posición.

Implementar estas estrategias no solo mejorará el Cambio de Diseño Acumulado de tu sitio web, sino que también contribuirá a una mejor Usabilidad Web y una experiencia de usuario más satisfactoria.

Herramientas para medir y optimizar el CLS

Existen varias herramientas que te ayudarán a medir y optimizar el CLS de tu sitio web:

• Google PageSpeed Insights: Esta herramienta gratuita de Google te proporciona un análisis detallado del rendimiento de tu página web, incluyendo el CLS, y te ofrece recomendaciones específicas para mejorarla.
• Lighthouse: Integrada en las herramientas para desarrolladores de Google Chrome, Lighthouse te permite auditar el rendimiento, la accesibilidad, el SEO y las prácticas recomendadas de tu sitio web.
• WebPageTest: Esta herramienta te permite probar la velocidad de tu sitio web desde diferentes ubicaciones y navegadores, y te proporciona información detallada sobre el CLS y otras métricas de rendimiento.

Utiliza estas herramientas para identificar las áreas de mejora en tu sitio web y realizar un seguimiento del progreso de tus optimizaciones.

El Cumulative Layout Shift (CLS) es una métrica esencial en la práctica del SEO. 

Al optimizar el CLS, no solo mejorarás la experiencia del usuario, sino que también aumentarás tu visibilidad en los resultados de búsqueda de Google. Implementar las estrategias y utilizar las herramientas mencionadas en este artículo te permitirá crear un sitio web más rápido, estable y atractivo para tus usuarios.