5 recomendaciones para optimizar la CLS de tu web

28 Jun, 2021   |   de Asler Cedeño   |   Posicionamiento web

Desde la aparición de las Core Web Vitals en Google Search Console, los webmasters se han dado la tarea de mejorar las métricas necesarias para perfeccionar la experiencia de usuario. Por ello, en este post te indico las principales recomendaciones para optimizar la CLS de tu web, un parámetro que puede frustrar a los visitantes de tu sitio online.

¿Qué es la CLS de tu web?

El CLS o Cumulative Layout Shift es el cambio de diseño acumulativo que se centra en la experiencia de usuario dentro de una página web. Se trata de un parámetro que mide el movimiento o los cambios inesperados de los contenidos que se visualizan en el navegador de tu audiencia objetivo.

Esta métrica puede resultar frustrante para tus lectores, debido a que impide la correcta visualización de los elementos en cuestión de segundos. Aunado a ello, es capaz de ocasionar algunos problemas si los usuarios esperan un elemento específico para interactuar con él, tal como un botón, imagen, video, anuncio, etc. Debido a que al intentar hacer clic en este, puede realizar tal acción en otro lugar, debido a la inestabilidad visual.

Para que la experiencia de usuario a nivel de visualización sea buena el CLS debe tener un puntaje igual o por debajo de 0,1. Con ello garantizas que los elementos que se encuentran en tu página web no se muevan ocasionando distracciones o malos ratos a tus lectores.

Si el CLS es mayor a 0,1, además de la mala experiencia de usuario, es posible que esto cause que tus lectores dejen tu web y no regresen. Por ello, la importancia de mantener un puntaje bajo, de cara a mantener tu reputación y alcanzar tus objetivos.

Recomendaciones para optimizar la CLS de tu web

Aquí te detallo las mejores recomendaciones para optimizar la CLS de tu web con éxito y lograr que tus lectores tengan una agradable experiencia de usuario.

1. Automatiza la relación de aspecto incluyendo atributos height y width

La primera recomendación consiste en incluir atributos height y width en elementos de imagen y vídeo, de tal manera que los tamaños se adapten según los requerimientos. Esto significa, valores máximos a considerar pero que pueden ser dinámicos según se acceda desde un ordenador o móvil.

Los navegadores más actuales establecen la relación de aspecto más adecuada para los recursos multimedia que se muestran a tus lectores. Esto permite que tanto las imágenes como los videos se visualicen de manera correcta, sin que se muevan o cambien de diseño repentinamente. El código empleado se identifica por la siguiente secuencia:

Img {relación de aspecto: attr (ancho)/attr (alto):}

Con ayuda del código anterior se puede predecir una relación de aspecto de acuerdo a los atributos de ancho y alto que establezcas, ideal para uso en ordenador o equipos móviles. Esto permite que se mida la altura en función del valor width que coloques, pero se realice el ajuste de manera dinámica

Por otro lado, algunas veces hace falta que establezca atributos de ancho y alto para imágenes adaptables. Esto es muy útil sobre todo en dispositivos móviles y para ello debes usar el siguiente código:

<img width = “800” height = “800” src = “prueba.jpg”>

2. Ten cuidado con el contenido dinámico

El contenido dinámico se refiere a los elementos que pueden reflejar algún movimiento dentro de la web, como los anuncios, formularios, entre otros. Éstos se deben manejar de manera adecuada, sobre todo cuando aparece por encima de texto estático, porque pueden ocasionar cambios de diseño.

Para que el contenido dinámico inyectado se muestra de manera adecuada es necesario que reserves espacio suficiente en la ventana de visualización con mucha anticipación. En este caso debes emplear una interfaz de usuario esqueleto y un marcador de posición, para evitar los movimientos inesperados ni activen el contenido del sitio online.

3. Emplea valores Font:display con fuentes personalizadas

Al emplear fuentes personalizadas puedes ocasionar algunos retrasos en la visualización de las mismas. Esto ocasiona que se muestra una fuente alternativa mientras se carga la que deseas. Al ocurrir, genera un destello de textoque puede confundir a tus lectores y ocasionar cambios de diseño.

Para evitar cualquier problema que puedan generar las fuentes personalizadas, una de las alternativas es usar cualquiera de los valores Font:display tales como block, swap, auto, fallbackyoptional.

4. Usa valores de dimensiones en incrustaciones y anuncios

Una de las recomendaciones para mejorar la problemática de los cambios del diseño es establecer dimensiones cuando se usen anuncios e incrustaciones. Debido a que estos últimos se emplean muy a menudo como parte de las estrategias de marketing y para obtener un mayor porcentaje de leads. Sin embargo, pueden generar desajustes en los cambios de diseño y con ello una mala experiencia de usuario.

Para evitar los problemas ocasionados por las incrustaciones y anuncios es necesario que reserves espacio estático para estos elementos publicitarios. De esta manera, al reservar el tamaño adecuado, cuando se carguen estos últimos no van a perjudicar el contenido.

También es fundamental que si tienes espacio publicitario disponible no contraigas el espacio asignado en caso de que un marcador de posición no muestre un anuncio. Esto evita que puedan aparecer formatos repentinos en la pantalla ocasionando movimientos inesperados.

5. Mejora la respuesta HTTP

Si un servidor ofrece respuesta muy lenta a las interacciones del usuario, se pueden observar cambios de diseño en el contenido. Para ello, es importante que utilices el que se encuentre más cerca de tu público objetivo. De esta forma la carga de los elementos puede reducir su tiempo, evitando los saltos de contenidos.

6. Desactiva las animaciones

Algunas veces las animaciones desencadenan cambios de diseño sobre todo cuando se activan automáticamente al cargar una página web. Para evitar esto, es importante que las mismas tengan transiciones que proporcionen un contexto y continuidad estables. De este modo, puedes probar que cargue todo el contenido prioritario y de último aquel que sea dinámico.

Las recomendaciones para optimizar la CLS de tu web pueden mejorar la experiencia de usuario, evitando que ciertos elementos se muevan repentinamente. Algunos de los mejores son utilizar atributos de alto y ancho, tener cuidado con el contenido dinámico, usar valores de dimensiones en anuncios e incrustaciones, mejorar la respuesta del servidor y desactivar las animaciones. Además, tienes la posibilidad de comprobar si esta métrica ha bajado su valor, con ayuda de recursos como PageSpeed de Google o cualquier otro similar.

Asler Cedeño

Redactor e investigador con 3 años de experiencia. Actualmente trabajo como ingeniero químico, y como redactor de contenidos en Bloguero Pro.

Divulgación de los afiliados

Este artículo puede contener enlaces de afiliados. El autor podrá ganar un porcentaje de comisión por cada venta realizada. Lea aquí para más información.

Affiliate Disclosure

This article may contain affiliate links. The author may earn a percentage of commission for each sale made. Read this for more information.

Mensajes Relacionados
¿Qué es el Growth Hacking?

¿Quieres estar al tanto de la nueva tendencia global? El Growth Hacking es una nueva táctica para aumentar la autoridad de tu blog, con la que lograrás generar contenido irresistible para tus lectores.

Recomendaciones para optimizar Core Web Vitals en 2022

El Core Web Vitals en 2022 ofrece la posibilidad de medir la experiencia de los usuarios en tu sitio web y mejorarla cuando sea necesario. En este post te explicaremos cómo funciona.

Cómo usar Google Keyword Planner en tu keyword research

El gigante de los buscadores ofrece herramientas para hacer un uso efectivo de las palabras clave, es por ello que te presentamos cómo usar Google Keyword Planner en tu keyword research.

¿Qué es el Thin Content y cómo puede perjudicar tu web?

Muchas veces se habla del Thin Content pero pocos saben a lo que se refiere. Es una manera de calificar el contenido que publicas en tu sitio web cuando no cumple con los requerimientos.