Qué es el Cumulative Layout Shift (CLS) y cómo afecta al SEO

Google Core Web Vitals

Cumulative Layout Shift (CLS) es uno de los tres factores que forman los Core Web Vitals, un nuevo tipo de métrica que Google utiliza para analizar la usabilidad y experiencia de usuario de un sitio web y que se ha convertido en uno de los nuevos factores de posicionamiento SEO.

El Cumulative Layout Shift es una de las tres métricas que conforman los Core Web Vitals de Google y que se encarga de medir la usabilidad de una página web durante su carga.

CLS es el cambio repentino e inesperado de los elementos de una página web que sucede durante la carga. Un claro ejemplo de esto es cuando, al acceder a una página web se quiere pinchar sobre un botón, pero de repente este cambia de posición y se pulsa otro elemento. Ciertos elementos, como las imágenes, los vídeos, los formularios de contacto o los botones suelen ser los principales causantes de este repentino movimiento.

Google considera el CLS como un signo de mala experiencia de usuario, ya que muchas veces estos «saltos» repentinos llevan a los usuarios a pinchar sobre elementos como enlaces o botones que les redirigen a otras páginas web, lo que pueden resultar molesto o frustrante. Por lo que los sitios web con una puntuación de CLS baja se posicionarán peor en Google.

¿Qué causa CLS y cómo solucionarlo?

De acuerdo con la información que Google ofrece sobre los Core Web Vitals, existen cinco razones principales que causan el CLS: imágenes sin las dimensiones correctas, anuncios y «iframes» sin el tamaño correcto, contenido inyectado dinámico, «web fonts» y acciones de red DOM.

En este sentido, para solucionar los problemas de las dimensiones de las imágenes y vídeos, es necesario identificar el alto y ancho declarándolas en el HTML. En cuanto a las imágenes responsivas, es necesario asegurarse de que todas las imágenes para las diferentes vistas utilicen la misma relación de aspecto, para lo que es posible utilizar herramientas como AspectRatioCalculator.com.

En el caso de los anuncios y «iframes» la solución pasa por crear un estilo para el contenedor, es decir, crear un estilo para el elemento HTML «div» que contiene el anuncio, declarando también la altura y anchura concreta.

En cuanto a las Web Fonts, que pueden causar FOIT («Flash of invisible text», es decir, un espacio con texto invisible) o FOUT («Flash of Unstyled Text», es decir un espacio con texto sin formato), la mejor solución posible es utilizar un «rel=»preload»» en el enlaces de la fuente.

En cuanto al contenido inyectado o incrustado, por ejemplo, cuando en WordPress se incrusta un tuit o un vídeo de YouTube, no existe una posible solución, por lo que es recomendable no utilizar este tipo de funcionalidad.

¿Cómo se calcula el CLS?

Google utiliza las siguientes métricas:

-«Impact Fraction»: Esta métrica se encarga de medir cuánto espacio ocupa el elemento inestable en la ventana gráfica (la porción de página web visible en un dispositivo móvil o navegador de escritorio). Para ello mide lo que ocupa el elemento antes de la carga y lo que ocupa tras la renderización. Por tanto, si un elemento ocupa un 50% del espacio gráfico antes de la carga y un 25% después, el «Impact Fraction» total será del 75%.

-«Distance Fraction»: Es la cantidad de espacio que el elemento de la página web se ha movido desde la posición original a la final. En el ejemplo anterior, este se habría movido un 25%.

¿Cómo se calcula el CLS total? Pues para ello habría que multiplicar ambas métricas: 0,75 x 0,25= 0,1875.

En este sentido, no es necesario comprender las operaciones matemáticas que Google realiza para medir este factor. Al contrario, lo más importante para mejorar la puntuación de CLS de un sitio web es comprender cuáles son los factores que causan una puntuación baja y solucionarlos.3

Jaume Vicent

Redactor y especialista en SEO y marketing de contenidos. Friki de las redes sociales y de las nuevas tecnologías.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    • TreceBits te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Manuel Moreno Molina (TreceBits) como responsable de esta web.
    • La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para gestionar la solicitud que realizas en este formulario de contacto.
    • Legitimación: Consentimiento del interesado.
    • Como usuario e interesado te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround Spain S.L. (proveedor de hosting de TreceBits). SiteGround Spain S.L. está ubicado en la UE, cuyo nivel de protección son adecuados según Comisión de la UE. Ver política de privacidad de SiteGround Spain S.L.
    • Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control.
    • Puedes consultar la información adicional y detallada sobre Protección de Datos en nuestra política de privacidad.