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.
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.
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.
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”>
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.
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.
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.
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.
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.
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.
This article may contain affiliate links. The author may earn a percentage of commission for each sale made. Read this for more information.
La estrategia SEO de un sitio web está compuesta por múltiples elementos, uno de los más importantes es el uso de enlaces internos, externos y de backlinks.
Atraer clientes es fundamental en cualquier estrategia y el principal objetivo del Inbound Marketing. Para lograrlo es preciso conocer muy bien a tus usuarios para darle el contenido que necesitan.
Conociendo qué es el l SEO negativo y cómo puede perjudicar el posicionamiento de tu blog, tendrás las herramientas para evitarlo.
¿Quieres saber quién es mejor entre el SEO vs SEM? Entonces necesitas leer el presente artículo para que tengas criterios al momento de elegir la estrategia a usar.