CLS de Google: Qué es y cómo afecta al SEO

Seguro que más de una vez te ha pasado que, mientras esperabas a que cargase una página web, los elementos de esta se movían de sitio, haciendo difícil pulsar sobre enlaces o botones. Pero, ¿por qué ocurre esto? Este cambio inesperado y repentino del contenido de una web es conocido como CLS o Cumulative Layout Shift, y afecta negativamente al SEO. Hoy te contamos cómo evalúa Google este factor, qué lo causa y cómo puedes solucionar este problema para subir unas cuantas posiciones en el buscador. ¡Vamos allá! 

Qué es el CLS

Google define la métrica CLS como la suma de las puntuaciones de todos los cambios inesperados de diseño que se han producido durante la vida útil de la página. 

Como hemos dicho antes, este pequeño problema de diseño web afecta es valorado negativamente por Google, ya que se ha convertido uno de los tres Core web vitals  o “métricas principales” que Google Search Console tiene en cuenta para el posicionamiento SEO de una página web. Estas métricas están formadas por el CLS, junto con el Largest Contenful Paint (LCP) y el First Input Display (FID), y analizan el tiempo de carga, la estabilidad del contenido y la interactividad de una web, es decir, tienen en cuenta la experiencia y entorno de usuario. 

Causas del CLS

Hay muchos elementos que pueden causar este problema, pero los más comunes suelen ser:

• Imágenes y vídeos sin dimensiones especificadas.
• Contenido inyectado dinámicamente como banners o ventanas de chat.
• Anuncios o iframes incrustados sin dimensiones especificadas.
• Algunos tipos de fuentes web que causan FOIT (flashes de texto visibile) o FOUT (flashes de texto sin estilo)
• Acciones que esperan una respuesta de red antes de actualizar el DOM (Modelo de Objetos de Documento)

Puntuación CLS

Google Search Console tiene un sistema propio de puntuación para calificar esta métrica, en el que, cuanto mayor sea esta puntuación, peor será la experiencia de usuario, tal como se indica en la imagen.

Cálculo del CLS

Pero, ¿de dónde sale esta puntuación? Pues bien, Google utiliza dos parámetros para el cálculo de la métrica. Estos son:

• Fracción de Impacto: este parámetro se refiere al espacio ocupado por el elemento inestable en la ventana gráfica de la web, por lo que se mide cuánto ocupa este elemento antes y después de la carga. Por ejemplo, si antes de la carga ocupa un 30% y después un 10%, el Impact Fraction total será de 40%. 
• Fracción de Distancia: este parámetro hace referencia a la cantidad de espacio que el elemento inestable se ha movido. En este caso, sería un 20%. 

Para calcular el CLS total, se multiplican estos dos parámetros. El resultado en nuestro caso sería 0.4 x 0.2 = 0.08, por lo que estaría dentro de los buenos resultados que espera Google. 

La puntuación CLS de tu página web se puede calcular mediante distintos enlaces, como Page Speed o Chrome User Experience Report. 

Soluciones para mejorar la puntuación CLS

Para conseguir mejorar la puntuación de esta métrica, se ha de descubrir el elemento causante del desajuste e implementar soluciones específicas para el elemento en cuestión. Algunas de ellas son: 

Especificar las dimensiones de las imágenes y vídeos

Debido a la popularización de los diseños responsive, muchas veces olvidamos fijar las dimensiones de una imagen o vídeo, ya que con el método CSS el ancho y el alto se asignan automáticamente cuando el navegador comienza a descargar la imagen. Por eso, para que el contenido multimedia no se mueva del sitio, podemos fijar la relación al aspecto para que el navegador calcule el espacio necesario para mostrar la imagen y reducir así el riesgo de movimientos no deseados.

Fijar dimensiones de anuncios y iframes

En el caso de iframes y anuncios, la solución es crear un estilo para el contenedor, es decir declarar la altura y anchura correcta para el elemento HTML <<div>>

Uso de valores font:display link rel=preload

Para solucionar los problemas de FOIT y FOUT, puedes fijar valores font:display como auto, swap, block, fallback y optional. Además, para conseguir un mejor resultado, también puedes determinar la precarga de las fuentes usando  <link rel=preload> .

Evitar cambios en el contenido dinámico

Se debe evitar a toda costa insertar contenido nuevo por encima del existente, excepto cuando es en respuesta a una interacción del usuario. Como ocurre con anuncios e imágenes, es muy aconsejable fijar las dimensiones y reservar el espacio que ocupará el contenido dinámico. 

Conclusión

El CLS es una métrica a la que Google da mucha importancia a la hora de posicionar nuestra página web. Algo tan sencillo como fijar las dimensiones de una imagen o un anuncio pueden ayudarte a aumentar tu visibilidad y a mejorar la experiencia de usuario de tu web, por lo que es muy recomendable realizar comprobaciones rutinarias de los valores de este tipo de métricas. 

¿Te gustaría saber más sobre las métricas principales de Google Search Console? ¡Cuéntanos!