Cumulative Structure Shift (CLS) es una herramienta de Google Elementos esenciales de la Net Métrica que mide un evento de experiencia del usuario.
CLS se convirtió en un issue 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 los elementos de una página internet 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 se desplazan pueden generar una mala experiencia de usuario.
Una puntuación CLS baja (por debajo de > 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 se produce un cambio de diseño acumulativo:
- Imágenes sin dimensiones.
- Anuncios, incrustaciones e iframes sin dimensiones.
- Contenido inyectado dinámicamente.
- Fuentes internet que provocan FOIT/FOUT.
- Animaciones CSS o JavaScript.
Las imágenes y los vídeos deben tener las dimensiones de alto y ancho declaradas en el código HTML. En el caso de las imágenes adaptables, asegúrese de que los distintos tamaños de imagen para las distintas ventanas gráficas utilicen la misma relación de aspecto.
Analicemos 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 la descargan. Como resultado, al encontrar una
Una vez que se descarga la imagen, el navegador debe recalcular el diseño y asignar espacio para que la imagen encaje, lo que provoca que otros elementos de la página se desplacen.
Al proporcionar atributos de ancho y alto en el Etiqueta: le 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 un espacio de 970×90, puede cargar un anuncio de 970×250 y provocar un desplazamiento.
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 cuestión de equilibrio: o bien debe cargar anuncios con el mismo tamaño y beneficiarse de un mayor inventario y CPM más altos, o bien cargar anuncios de múltiples 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 internet.
Por ejemplo, las publicaciones en X (antes Twitter), que cargan el contenido de un artículo, pueden tener una altura arbitraria dependiendo de la longitud del contenido de la publicación, lo que provoca que el diseño cambie.
Por supuesto, estos generalmente se encuentran debajo del pliegue y no cuentan para la carga inicial de la página, pero si el usuario se desplaza lo suficientemente rápido para llegar al punto donde se encuentra la publicación X y aún no se ha cargado, entonces provocará un cambio de diseño y contribuirá a su métrica CLS.
Una forma de mitigar este cambio es darle la propiedad CSS min-height 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, por lo que podemos asignar previamente espacio.
Otra forma de solucionar esto es aplicar una regla CSS a la etiqueta div principal que contiene el tweet para fijar 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, puedes tomar una captura de pantalla del tweet y vincularlo.
Fuentes basadas en la internet
Las fuentes internet descargadas pueden provocar lo que se conoce como destello de texto invisible (FOIT).
Una forma de evitarlo es utilizar fuentes precargadas.
y usando font-display: swap; propiedad css en @font-face en la regla.
@font-face {
font-family: Inter;
font-style: regular;
font-weight: 200 900;
font-display: swap;
src: url('https://www.instance.com/fonts/inter.woff2') format('woff2');
}Con estas reglas, cargas las fuentes internet lo más rápido posible y le indicas al navegador que use la fuente del sistema hasta que cargue las fuentes internet. Tan pronto como el navegador termina de cargar las fuentes, intercambia las fuentes del sistema con las fuentes internet cargadas.
Sin embargo, aún puede haber un efecto llamado Destello de texto sin estilo (FOUT), que es imposible de evitar cuando se usan fuentes que no son del sistema porque lleva un tiempo hasta que se carguen las fuentes internet 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 suficientemente rápida, las fuentes internet pueden cargarse lo suficientemente rápido y eliminar el notable efecto FOUT.
Por lo tanto, utilizar fuentes del sistema siempre que sea posible es una gran estrategia, pero puede que no siempre sea posible debido a las pautas de estilo de la marca o a requisitos de diseño específicos.
Animaciones CSS o JavaScript
Al animar la altura de elementos HTML a través de CSS o JS, por ejemplo, se expande un elemento verticalmente y se contrae empujando el contenido hacia abajo, lo que provoca un cambio de diseño.
Para evitarlo, utilice transformaciones CSS asignando espacio para el elemento que se va a animar. Puede ver la diferencia entre la animación CSS, que provoca un desplazamiento hacia la izquierda, y la misma animación, que utiliza CSS transformación.
Ejemplo de animación CSS que provoca CLSCó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 = ( Affect 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 whole que ocupa el elemento, desde la ubicación que ocupaba en la ventana gráfica cuando se renderizó por primera vez hasta la ubicación ultimate cuando se renderiza 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 denomina 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 authentic hasta la posición ultimate.
En el ejemplo anterior, el elemento de la página se movió un 25%.
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 un poco más de matemática y otras consideraciones. Lo importante es que la puntuación es una forma de medir un issue 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 qué significa y cómo funciona es clave, ya que se ha convertido en parte del issue de clasificación Core Net Vitals.
Más recursos:
Crédito de la imagen destacada: BestForBest/Shutterstock