En este nuevo artículo acerca de prácticas eficientes para el posicionamiento SEO, hablaremos de uno de los pilares de la búsqueda en Google, la Experiencia de Página: el CLS.
Se trata de una métrica fundamental para poder predecir el comportamiento de un sitio y saber qué calidad de experiencia de navegación ofrece a los usuarios que la visitan.
Puedes visitar nuestros artículos anteriores para estar al día acerca de todos los contenidos que tenemos para ayudarte a tener un buen posicionamiento para tu web.
¿Qué es el CLS?
El CLS (Cumulative Layout Shift) es una métrica de estabilidad visual que se utiliza para medir el desplazamiento no deseado de los elementos de la página web. Este concepto se relaciona con la experiencia de usuario, ya que reduce la confusión que puede surgir cuando los elementos de la página se mueven sin previo aviso. Esto también influye en el rendimiento SEO, por el hecho de que una mejor experiencia de usuario puede ayudar a mejorar la calificación de la página web en los motores de búsqueda.
Este sería el nombre en español para el CLS. El término se refiere a los cambios que sufre el diseño de una web en la medida que va cargando cada uno de los elementos interactivos del diseño web.
Ya habrás visitado alguna vez un sitio donde estás intentando leer un texto y de pronto el mismo desaparece para dejar espacio a una imagen, video, botón, etc. Esto sucede porque los elementos que deberían ir apareciendo deben ser descargados individualmente, por lo cual el diseño se va adaptando a medida que los mismos están disponibles.
¿Cómo se calcula el CLS?
Esta métrica representa la cantidad de modificaciones que tendrá que recibir el diseño del sitio para poder mostrar todos los elementos que existen en el mismo. Para representar esto en números, se usa un sistema de puntaje donde 1 representa al 100 % y se divide en decimales.
De esta manera, si tu CLS es de 0.5, tendrá que cambiar un 50 % del diseño para que puedan mostrarse todos los elementos interactivos de la home.
Al momento de calcular el puntaje final de CLS, es importante tener en cuenta que cada cambio se cuenta por separado. Así, cada imagen, video o anuncio que se vaya cargando, se contará como un nuevo evento de cambio. El puntaje final se calcula como un promedio total de todos los eventos de cambio que vayan sucediendo en la página.
No obstante, Google ofrece un “periodo de gracia de 500 milisegundos. Es decir, si una imagen se carga y suma un 5 % de CLS (lo que representaría un 0,05) y luego se carga un anuncio con un CLS de 3 % (0,03), no se contarán los primeros 500 milisegundos, por lo tanto, en vez de dar un total de 8%, daría en realidad un 6,5 % (0,065).
Este periodo de gracia no cuenta para eventos como, por ejemplo, scrollear en la página, ya que el usuario no espera que la web cambie mientras está navegando por la página y no es una experiencia grata, como habrás podido ver en alguna ocasión.
No todos los cambios son negativos
Hay eventos de cambio que no sumarán al puntaje de CLS. Estos eventos son aquellos que se mueven sobre capas, como por ejemplo, los botones e imágenes de un producto en una tienda online. Aunque cada elemento gráfico vaya apareciendo individualmente, no representan un cambio en el diseño de la web, y por ello, no se contabilizan en el promedio de CLS.
Cómo mejorar el CLS
Ahora que ya tienes una idea de qué es el CLS y cómo funciona, podemos pasar a lo importante: cómo mejorar el puntaje CLS.
Para saber primero cuál es tu puntaje de CLS, puedes recurrir a la fuente más confiable: Google Search Console. Esta es la herramienta oficial del buscador que reúne información sobre la experiencia de los usuarios en miles de sitios en toda la internet para crear estándares útiles que te permitan saber qué estás haciendo bien y qué podrías mejorar.
El puntaje ideal para CLS es de 0,1. Puedes ir al apartado de “Métricas Web Principales” para obtener un chequeo del funcionamiento de tu sitio y consejos útiles sobre lo que deberías hacer para mejorar la experiencia de los usuarios.
En este apartado, además del puntaje, encontrarás detalles sobre lo que está generando cambios incómodos en el diseño del sitio cuando ingresan los usuarios. Por lo general, los elementos que provocan cambios bruscos en el layout son:
Imágenes
Las imágenes son el primer elemento que provoca cambios en el diseño durante la carga de los elementos interactivos. El problema ocurre cuando las dimensiones de la imagen no están especificadas y, por lo tanto, el navegador no tiene manera de saber cuánto espacio debe asignar a la misma en el diseño de la interfaz.
La solución obvia sería especificar en el ancho y el alto, pero esto puede causar problemas ya que no todos los usuarios tienen el mismo tipo de pantalla y no todos los navegadores manejan las imágenes de la misma manera.
Por suerte, hoy en día las tecnologías digitales permiten que los navegadores sean más eficientes al momento de entender este tipo de datos. Definir las dimensiones de las imágenes como auto te ayudará a obtener una y eficiente. Otra manera de solucionar esto es usar un CMS como WordPress. Este entorno está diseñado para optimizar la experiencia de usuario y, por defecto, puede entender por sí sólo la mejor manera de servir imágenes. También puedes usar plugins que con un par de clicks harán todo el trabajo por ti.
iFrames y embebidos
Los iFrames son elementos dentro de tu web que provienen de otros sitios, como, por ejemplo, un video de YouTube. Estos elementos tienen sus propios códigos y comportamientos, pero, puedes controlar el espacio que ocuparán en tu sitio.
Al igual que con las imágenes, es importante que definas las dimensiones que tendrá el iFrame para que el navegador sepa de antemano cuánto espacio asignarle. Puedes hacer esto manualmente, de la misma manera que con las imágenes o, también, puedes usar WordPress. esto te facilitará mucho la tarea ya que existe una gran cantidad de herramientas sin coste que hacen este trabajo por ti.
Fuentes personalizadas
Las fuentes personalizadas son un problema particular en el CLS. Es un elemento mucho más difícil de manejar, puesto que no se pueden definir dimensiones específicas para cada letra que utilizas en tu texto. No obstante, cada una de las letras puede hacer que cambie el diseño del sitio para adaptarse a las características de la fuente.
Las fuentes personalizadas son elementos muy pesados y, por lo general, no son indispensables. Por ello, si el estilo de fuente que usas está generando problemas en los tiempos de carga del sitio, y puedes prescindir de ella, deberías definitivamente hacerlo.
Las fuentes con íconos son las que más problemas pueden causar, y este tipo de elementos gráficos deberían ser evitados por todos los medios posibles. Siempre es mejor usar archivos .svg para los íconos que puedas necesitar.
Ahora, si no puedes prescindir de tu fuente personalizada, existen algunas medidas que puedes tomar para que no afecten negativamente al rendimiento de tu sitio web.
Lo primero que puedes hacer es usar una etiqueta linkrel=preload en el encabezado del sitio. Por medio de esta etiqueta puedes hacer que las fuentes se carguen de antemano y así estén disponibles más rápido para mostrarse en el sitio.
Otra solución práctica es agregar una línea de código en tu fuente: Font-display: optional. Este sencillo código hará que, si la fuente tarda más de tres segundos en cargarse, el navegador deje de intentarlo y muestre la fuente por defecto.
Velocidad de carga
La velocidad de carga es un factor importante para mejorar la experiencia de usuario. La velocidad de la página web afecta a la usabilidad y a la satisfacción del usuario. Los lectores deben asegurarse de que su página web carga rápidamente para mejorar la experiencia de usuario y el SEO.
¿Tienes problemas con la carga de tu sitio web?
Si todavía tienes dudas con respecto al CLS y te gustaría recibir ayuda personalizada, puedes ponerte en contacto con nosotros. En Nomlogo contamos con el servicio exclusivo de consultor SEO experto para brindar asesoramiento y soporte técnico.
Puedes programar una cita para tener una llamada cara a cara con un experto y empezar a escalar en los puestos de los buscadores hoy mismo.
¡Ponte en contacto hoy mismo!
