Cumulative Layout Shift (CLS) es una métrica de Google Core Web Vitals que mide un evento de experiencia del usuario.

CLS se convirtió en un factor de clasificación en 2021 y eso significa que es importante comprender qué es y cómo optimizarlo.

¿Qué es el cambio de diseño acumulativo?

CLS es el cambio inesperado de elementos de una página web en una página mientras un usuario se desplaza o interactúa en la página.

Los tipos de elementos que tienden a provocar cambios son fuentes, imágenes, vídeos, formularios de contacto, botones y otros tipos de contenido.

Minimizar CLS es importante porque las páginas que cambian pueden provocar una mala experiencia de usuario.

Una puntuación CLS baja (inferior a > 0,1) es indicativa de problemas de codificación que se pueden resolver.

¿Qué causa los problemas de CLS?

Hay cuatro razones por las que ocurre el cambio de diseño acumulativo:

• Imágenes sin dimensiones.
• Anuncios, incrustaciones e iframes sin dimensiones.
• Contenido inyectado dinámicamente.
• Fuentes web que causan FOIT/FOUT.
• Animaciones CSS o JavaScript.

Las imágenes y videos deben tener las dimensiones de alto y ancho declaradas en el HTML. Para imágenes responsivas, asegúrese de que los diferentes tamaños de imagen para las diferentes ventanas gráficas utilicen la misma relación de aspecto.

Profundicemos en cada uno de estos factores para comprender cómo contribuyen al CLS.

Imágenes sin dimensiones

Los navegadores no pueden determinar las dimensiones de la imagen hasta que las descargan. Como resultado, al encontrarse con un<img>Etiqueta HTML, el navegador no puede asignar espacio para la imagen. El siguiente vídeo de ejemplo lo ilustra.

Una vez descargada la imagen, el navegador necesita recalcular el diseño y asignar espacio para que la imagen encaje, lo que hace que otros elementos de la página se desplacen.

Al proporcionar atributos de ancho y alto en la etiqueta , informa al navegador la relación de aspecto de la imagen. Esto permite que el navegador asigne la cantidad correcta de espacio en el diseño antes de que la imagen se descargue por completo y evita cambios inesperados en el diseño.

Los anuncios pueden causar CLS

Si carga anuncios de AdSense en el contenido o en la tabla de clasificación encima de los artículos sin el estilo y la configuración adecuados, el diseño puede cambiar.

Este es un poco complicado de manejar porque los tamaños de los anuncios pueden ser diferentes. Por ejemplo, puede ser un anuncio de 970×250 o 970×90, y si asigna espacio de 970×90, puede cargar un anuncio de 970×250 y provocar un cambio.

Por el contrario, si asigna un anuncio de 970×250 y carga un banner de 970×90, habrá mucho espacio en blanco a su alrededor, lo que hará que la página se vea mal.

Es una compensación: debe cargar anuncios del mismo tamaño y beneficiarse de un mayor inventario y CPM más altos o cargar anuncios de varios tamaños a expensas de la experiencia del usuario o la métrica CLS.

Contenido inyectado dinámicamente

Este es el contenido que se inyecta en la página web.

Por ejemplo, las publicaciones en X (anteriormente Twitter), que se cargan en el contenido de un artículo, pueden tener una altura arbitraria dependiendo de la longitud del contenido de la publicación, lo que hace que el diseño cambie.

Por supuesto, generalmente están en la mitad inferior de la página y no cuentan con la carga inicial de la página, pero si el usuario se desplaza lo suficientemente rápido como para llegar al punto donde se coloca la publicación X y aún no se ha cargado, causará una cambie el diseño y contribuya a su métrica CLS.

Una forma de mitigar este cambio es dar la propiedad CSS de altura mínima promedio a la etiqueta div principal del tweet porque es imposible saber la altura de la publicación del tweet antes de que se cargue para que podamos preasignar espacio.

Otra forma de solucionar este problema es aplicar una regla CSS a la etiqueta div principal que contiene el tweet para corregir la altura.

#tweet-div {
max-height: 300px;
overflow: auto;
}

Sin embargo, aparecerá una barra de desplazamiento y los usuarios tendrán que desplazarse para ver el tweet, lo que puede no ser lo mejor para la experiencia del usuario.

Si ninguno de los métodos sugeridos funciona, puede tomar una captura de pantalla del tweet y vincularlo.

Fuentes basadas en web

Las fuentes web descargadas pueden provocar lo que se conoce como destello de texto invisible (FOIT).

Una forma de evitarlo es utilizar fuentes precargadas.

<link rel="preload" href="https://www.example.com/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

y usando font-display: swap; propiedad CSS en @font-face en-regla.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
   font-display: swap;
   src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
}

Con estas reglas, carga fuentes web lo más rápido posible y le indica al navegador que use la fuente del sistema hasta que cargue las fuentes web. Tan pronto como el navegador termina de cargar las fuentes, intercambia las fuentes del sistema con las fuentes web cargadas.

Sin embargo, aún puede tener un efecto llamado Flash of Unstyled Text (FOUT), que es imposible evitar cuando se utilizan fuentes que no son del sistema porque las fuentes web tardan algún tiempo en cargarse y las fuentes del sistema se mostrarán durante ese tiempo.

En el vídeo a continuación, puedes ver cómo se cambia la fuente del título provocando un desplazamiento.

La visibilidad de FOUT depende de la velocidad de conexión del usuario si se implementa el mecanismo de carga de fuentes recomendado.

Si la conexión del usuario es lo suficientemente rápida, las fuentes web pueden cargarse lo suficientemente rápido y eliminar el notable efecto FOUT.

Por lo tanto, utilizar fuentes del sistema siempre que sea posible es un excelente enfoque, pero puede que no siempre sea posible debido a las pautas de estilo de la marca o requisitos de diseño específicos.

Animaciones CSS o JavaScript

Al animar la altura de los elementos HTML mediante CSS o JS, por ejemplo, se expande un elemento verticalmente y se reduce al empujar el contenido hacia abajo, lo que provoca un cambio en el diseño.

Para evitarlo, utilice transformaciones CSS asignando espacio para el elemento que se está animando. Puede ver la diferencia entre la animación CSS, que provoca un desplazamiento hacia la izquierda, y la misma animación, que utiliza una transformación CSS.

Ejemplo de animación CSS que causa CLS

Cómo se calcula el cambio de diseño acumulativo

Este es un producto de dos métricas/eventos llamados “Fracción de impacto” y “Fracción de distancia”.

CLS = ( Impact Fraction)×( Distance Fraction)

Fracción de impacto

La fracción de impacto mide cuánto espacio ocupa un elemento inestable en la ventana gráfica.

Una ventana gráfica es lo que ves en la pantalla del móvil.

Cuando un elemento se descarga y luego se desplaza, el espacio total que ocupa el elemento, desde la ubicación que ocupaba en la ventana gráfica cuando se representa por primera vez hasta la ubicación final cuando se representa la página.

El ejemplo que utiliza Google es un elemento que ocupa el 50% de la ventana gráfica y luego desciende otro 25%.

Cuando se suman, el valor del 75 % se denomina fracción de impacto y se expresa como una puntuación de 0,75.

Fracción de distancia

La segunda medida se llama fracción de distancia. La fracción de distancia es la cantidad de espacio que el elemento de la página se ha movido desde la posición original hasta la posición final.

En el ejemplo anterior, el elemento de la página se movió un 25%.

Entonces, ahora la puntuación de diseño acumulativa se calcula multiplicando la fracción de impacto por la fracción de distancia:

0,75 x 0,25 = 0,1875

El cálculo implica algo más de matemáticas y otras consideraciones. Lo que es importante sacar de esto es que la puntuación es una forma de medir un factor importante de la experiencia del usuario.

A continuación se muestra un vídeo de ejemplo que ilustra visualmente qué son los factores de impacto y distancia:

Comprender el cambio de diseño acumulativo

Comprender el cambio de diseño acumulativo es importante, pero no es necesario saber cómo hacer los cálculos usted mismo.

Sin embargo, comprender lo que significa y cómo funciona es clave, ya que se ha convertido en parte del factor de clasificación de Core Web Vitals.

Más recursos:

Crédito de la imagen destacada: BestForBest/Shutterstock