Cumulative Layout Shift (CLS) y la salud SEO de tu sitio web

Seguimos con esta serie de contenidos orientados a ayudarte a comprender mejor el SEO y cómo optimizarlo para una mejor relación con los motores de búsqueda.
Hoy te presentaremos el últimos de los Core web vitals y se trata del Cumulative Layout Shift (CLS), que mide la estabilidad visual de las páginas de tu web.
Recuerda que esta estabilidad hace referencia a la capacidad de que la página no se mueva de forma inesperada durante la carga inicial.
En resumen, esta métrica calcula una puntuación para tu web con relación a si los elementos de tu web se mueven o no sin previo aviso y sin la interacción del usuario con las páginas.
De manera que, los problemas más graves que pueden afectar esta métrica en tu sitio web ocurren cuando un anuncio muy grande o una imagen de gran tamaño se carga por encima de la posición de desplazamiento actual.
¿Qué métricas influyen en las puntuaciones de Cumulative Layout Shift?
Una de las métricas más importantes relacionadas a esta puntuación es la fracción de impacto, que consiste en el área total de todos los elementos inestables en la ventana gráfica.
Si los elementos que cubren el 60% de la ventana gráfica sufren un desplazamiento durante la carga de la página, entonces la fracción de impacto es de 0,6.
La fracción de distancia es otra métrica que influye en las puntuaciones de Cumulative Layout Shift, y se trata de la mayor distancia desplazada por los elementos inestables en la ventana gráfica.
Para que la puntuación CLS de una web sea buena debe ser de 0,1.
¿Qué origina una baja puntuación de CLS?
Estas son las causas más comunes que deben atenderse si tu web tiene una puntuación baja en la Cumulative Layout Shif:
• El espacio de la página no está reservado para imágenes, iframes, anuncios, etc.
• El contenido se inyecta dinámicamente en el DOM, normalmente después de una solicitud de red para anuncios, widgets de redes sociales, etc.
• La carga de fuentes web provoca un notable Flash de Texto Invisible (FOIT) o Flash de Texto sin Estilo (FOUT).
¿Cómo se puede mejorar la puntuación?
Estas son las mejoras que pueden realizarse para optimizar los resultados en esta métrica:
• Añade atributos de anchura y altura a las etiquetas HTML <img> y <iframe>.
• También puedes utilizar la nueva propiedad CSS aspect-ratio para asegurarte de que se reserva el espacio adecuado en la página antes de que se descarguen los activos.
• De igual forma es necesario establecer las dimensiones adecuadas para los elementos contenedores que encierran contenidos de terceros que se cargan lentamente, como los anuncios y los widgets.
• Las imágenes y otros activos que aparecen hacia la parte superior de la página se solicitan lo antes posible: una precarga podría resultar útil.
• Reduce al mínimo el uso de las fuentes web y considera la posibilidad de utilizar las fuentes disponibles en el sistema operativo cuando sea posible.
• Carga las fuentes web y configura la visualización de fuentes CSS como opcional o de intercambio.
• Ayda mucho contar con una fuente de reserva de tamaño similar para minimizar el cambio de diseño.
Existen otras acciones con las que puedes mejorar la salud SEO de tu sitio web, contáctanos para conocer más.

Related posts

¿Que opinas sobre esto?