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 un comentario

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: TreceBits S.L. (TreceBits)
Finalidad: Que puedan comentar las noticias publicadas
Legitimación: Consentimiento del interesado. Satisfacción del interés legítimo del Responsable.
Destinatarios: No se cederán a terceros salvo obligación legal.
Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, limitación, oposición y demás derechos legalmente establecidos a través del siguiente e-mail: [email protected].
Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos aquí.