What causes poor Cumulative Layout Shift

Imagínate que estás navegando por la web, tratando de leer un artículo que te ha despertado interés. Quizás estés leyendo un resumen de la última serie de éxito o poniéndote al día con los titulares del día. Abres la página y comienzas a leer el contenido mientras se carga el resto de la página, llegas al final del párrafo inicial, cuando de repente aparece una imagen y empuja el texto que estabas leyendo en medio y fuera de la pantalla de tu dispositivo.

Peor aún, estabas a punto de hacer clic en un enlace para ver otra historia que sonaba interesante y el salto repentino hizo que en su lugar hicieras clic en un botón para suscribirte a un boletín.

Ahora tienes que retroceder una página, esperar a que se cargue de nuevo y luego desplazarte para tratar de encontrar el enlace que deseabas.

Lo que acabas de experimentar se conoce como un "cambio de diseño" y es el problema exacto que Google está tratando de medir y puntuar utilizando Core Web Vital conocida como cambio de diseño acumulativo, o Cumulative Layout Shift.

Una breve introducción al cambio de diseño acumulativo

El cambio de diseño acumulativo (CLS por su sigla en inglés) es una forma de medir y cuantificar la cantidad de elementos de contenido (texto, imágenes, anuncios, video, etc.) que cambian a medida que se carga la página.



Como se mencionó anteriormente, es parte de las métricas de experiencia del usuario de Google conocidas como Core Web Vitals, que son un conjunto de métricas diseñadas para medir y evaluar cómo las personas del mundo real experimentan una página en web.

La puntuación CLS de una página nos dice qué tan visualmente estable es la página a medida que carga contenido visible para el usuario midiendo y puntuando cada vez que un elemento de la página (como texto, imagen, video, anuncio, etc.) se mueve mientras está visible en la pantalla de un usuario. Los cambios que ocurren fuera de la pantalla no son visibles para los usuarios y, por lo tanto, no contribuyen al CLS.

¿Qué es una buena puntuación CLS?

Google califica el Core Layout Shift en un espectro de una experiencia "buena" a "mala" para los usuarios:

  • Bueno: una puntuación CLS de 0,1 o menos
  • Necesita mejorar: una puntuación CLS entre 0,1 y 0,25
  • Deficiente: una puntuación CLS superior a 0,25

Cumulative layout shift scoring spectrum from good to poor

Cómo funciona el cambio de diseño acumulativo

La puntuación de cambio de diseño acumulativo funciona midiendo cuánto hace cada cambio de diseño que el contenido de una página se mueva y sumándolo para obtener una puntuación para toda la página (de ahí la puntuación de cambio de diseño “acumulativo”).

Los cambios de diseño individuales se puntúan midiendo cómo los elementos inestables afectan lo que los usuarios ven durante un cambio de diseño (llamado "fracción de impacto"), así como qué tan lejos en la pantalla se mueve un elemento inestable durante un turno (llamado "fracción de distancia") .

  • Fracción de impacto: esta medida es la suma de la cantidad de espacio visible que ocupa un elemento de la página cuando se carga por primera vez y la cantidad de espacio que ocupa después de su desplazamiento.
  • Fracción de distancia: esta medida se ve en la mayor distancia, en relación con el tamaño de la pantalla, un cambio de diseño hace que un elemento se mueva en la página.

Para obtener el puntaje de un solo cambio de diseño, solo necesitas multiplicar la fracción de impacto por la fracción de distancia.

Luego, Google asigna una única puntuación CLS para una página sumando la puntuación de cada cambio de diseño detectado en la página.

Escenario 1: En el primer marco, la página carga un bloque de texto que ocupa el 25% de la página visible. En el siguiente cuadro, carga un segundo elemento que ocupa el 50% de la pantalla. La unión del espacio visible ocupado por el elemento inestable es del 75%, lo que hace que la fracción de impacto sea de 0,75. Dado que el bloque de texto se movió el 50% de la pantalla visible, la fracción de distancia es 0.50. Usando la fórmula, la puntuación para este cambio de diseño es 0.375




Escenario 2: En el primer marco, la página carga texto que ocupa el 50% de la pantalla visible. En el siguiente cuadro, un segundo elemento que ocupa el 25% de la pantalla se carga encima del texto. Entre los dos marcos, el elemento de texto inestable ocupa el 75% de la pantalla visible, lo que hace que la fracción de impacto sea de 0,75. Dado que el bloque de texto se movió hacia abajo un 25% de la pantalla visible, la fracción de distancia es 0.25, lo que hace que la puntuación total del diseño sea 0.1875.




Escenario 3: En el primer marco, la página carga un bloque de texto que es el 25% de la pantalla visible. En el segundo cuadro, se carga un segundo elemento que también es el 25% de la pantalla visible. La unión del espacio que ocupa el texto entre los dos fotogramas es del 50%, lo que hace que la fracción de impacto sea de 0,50. El elemento de texto se mueve hacia abajo un 25% de la pantalla, por lo que la fracción de distancia es 0,25, por lo que la puntuación para este cambio de diseño es 0,125.




Escenario 4: En el primer marco, la página carga un bloque de texto y una imagen, cada uno de los cuales ocupa el 25% de la altura de la pantalla visible. En el segundo fotograma, el bloque de texto se extiende hacia abajo otro 25%, haciendo que la unión de los elementos entre los dos fotogramas sea del 75%. Entonces, la fracción de impacto es 0,75. Sin embargo, en este escenario, ninguno de los elementos visibles se desplaza realmente de sus posiciones iniciales, por lo que la fracción de distancia es 0, lo que hace que la puntuación también sea 0.




Escenario 5: En nuestro último escenario, la página carga dos elementos, y ambos ocupan el 25% de la página visible. En el segundo marco, la página agrega un tercer elemento en la parte superior que ocupa el 25% de la página y expande un elemento al 50% de la pantalla visible. En total, el contenido ahora ocupa el 100% de la página, por lo que la fracción de impacto es 1. En este escenario, el elemento inestable (el bloque de texto) se movió en un cambio que representa el 25% del tamaño de la pantalla y otro cambio del 50% de la pantalla. Debido a que la fracción de distancia se basa en el desplazamiento más grande, la fracción de distancia para este desplazamiento es 0,50, por lo que la puntuación para este desplazamiento también es 0,50.



Si todos estos cambios ocurrieran al cargar una página para un usuario, la puntuación de cambio de diseño acumulativo para esta página sería 1,1875, lo que superará ampliamente el umbral para ser considerada una experiencia "mala" para los usuarios.

Ouch.

Estos escenarios destacan algunos puntos clave a tener en cuenta sobre cómo funcionan los cambios de diseño de puntuación:

  • Las diferencias aparentemente pequeñas en los cambios entre los fotogramas pueden tener un gran impacto en el puntaje.
  • Es mejor tener elementos grandes que cambian muy poco que tener elementos más pequeños que cambian mucho (obviamente, los elementos que no cambian en absoluto son los mejores).
  • No todos los cambios visibles contribuyen a CLS. Dejar espacio para que se carguen nuevos elementos te permite agregar nuevos elementos de contenido a una página sin afectar negativamente la experiencia del usuario o CLS.

Lo que debes saber sobre CLS para mejorar tu sitio web (¡con ejemplos reales!)

Como señalamos anteriormente, no todos los cambios de diseño son inherentemente malos o afectarán negativamente las puntuaciones de CLS. De hecho, como vimos en los escenarios hipotéticos anteriores, es perfectamente posible cargar elementos de contenido en la pantalla visible de un marco a otro sin que el contenido existente salte de un lado a otro.

También es posible utilizar cambios de diseño de tal manera que se creen los cambios esperados:

  • Cambios esperados: Cambios de diseño después de la interacción del usuario (hacer clic en el botón, escribir en un campo de búsqueda, etc.). Los cambios de diseño esperados no contribuyen a CLS.
  • Inesperados: Cambios que ocurren abruptamente y sin participación del usuario.

Las imágenes pueden causar problemas CLS fácilmente

Reserva espacio para imágenes especificando dimensiones en la etiqueta <img> o usando CSS. Hacerlo permite a los navegadores reservar espacio para estas imágenes mientras cargan el resto de la página

Cargar imágenes sin especificar sus dimensiones en el código significa que los navegadores no saben qué tan grandes serán hasta que comienzan a cargarla, por lo que deben cambiar el contenido para dejar espacio para ellas.

Web page with an image that causes page text to shift when it loads

La especificación de valores de altura y ancho para las imágenes en el código de la página permite a los navegadores reservar espacio para ellas y no tener que mover el contenido cuando se muestran las imágenes.

Page with space reserved for an image to eliminate layout shift

Los anuncios son los culpables habituales de los problemas de CLS

Evita colocar anuncios en la parte superior de una página. Considera reservar espacio para anuncios utilizando el mayor espacio publicitario posible.

Las redes publicitarias y los editores suelen mostrar anuncios en varios tamaños según el anuncio que desean mostrar en un momento determinado. Lamentablemente, esto significa que las dimensiones de un espacio publicitario no se establecen hasta que la página comienza a cargarse.

Loading ads causing a layout shift

Al igual que con las imágenes, puedes especificar las dimensiones de los anuncios en el código de tu página, lo que permite a los navegadores reservar espacio para ellos al representar la página. Utiliza las dimensiones para el tamaño de anuncio más grande permitido en tu sitio para asegurarte de que todos los anuncios posibles se carguen sin distorsión.

Space reserved for ads to load prevents layout shifts

A tener en cuenta: Algunos sitios contraerán (ocultarán) un espacio publicitario si un anuncio no se carga (para evitar espacios en blanco). Debido a que esta acción ocurrirá después de que se cargue otro contenido, esto causará problemas CLS. Evita esta práctica para reducir la puntuación CLS.

El contenido incrustado puede sumar CLS y funciones

Cuando insertes contenido en tu sitio desde otra plataforma, calcula previamente el espacio necesario para el widget y agrega las dimensiones necesarias al código de inserción.

Los embeds te permiten agregar contenido de otras plataformas a tus páginas. Piensa en publicaciones de Facebook, tweets y videos de YouTube. Estas incorporaciones generalmente toman la forma de un fragmento de código que tú copias y pegas en tu sitio después de hacer clic en el botón "compartir". Este código debe poder manejar cualquier cosa, desde una sola línea de texto hasta párrafos de texto e imágenes completas o videos, por lo que no se especifican las dimensiones.

Loading embedded content from another platform shifts page text down

Al igual que con los anuncios y las imágenes, agregar dimensiones al código les dirá a los navegadores cuánto espacio necesitan reservar para ese elemento al calcular el diseño de la página.

Specifying dimensions in embed code reserves space for the content

Para encontrar el tamaño final de tu contenido incrustado después de que se cargue:

  • Haz clic derecho en la publicación, video o tweet de Facebook
  • Haz clic en "Inspeccionar"
  • El código de inserción del widget se resaltará en azul claro. Haz clic en el triángulo para ver el código de inserción completo.
  • Las dimensiones finales del contenido aparecerán en el código.
  • Agrega las dimensiones finales al código de inserción que agregaste a tu sitio.

Algunas plataformas, como YouTube, ya incluyen dimensiones en su código de inserción.

El contenido dinámico es común, pero puede conducir a un CLS deficiente

No insertes contenido dinámico por encima del contenido existente a menos que sea en respuesta a una interacción del usuario. Si necesita estar en la parte superior, reserva espacio para él usando un marcador de posición con altura y ancho establecidos para evitar cambios inesperados.

El contenido dinámico es común en la web y, a menudo, se presenta en forma de botones de CTA, banners, widgets de "artículos relacionados", avisos de política de privacidad/RGPD, formularios de suscripción a boletines, etc. Por su propia naturaleza, el contenido dinámico no necesariamente conoce el dimensiones de lo que cargará hasta que el navegador lo descargue. Esto conduce a puntuaciones CLS más bajas cuando el navegador muestra el contenido.

Related articles widget loads above other content, causing page elements to shift down

Tu mejor solución es cargar contenido dinámico fuera de la pantalla, para que no cause cambios de diseño, o en la parte inferior de la pantalla para que no cambie otros elementos visibles.

Las fuentes personalizadas hacen que el texto parpadee y los diseños cambien

Utiliza fuentes estándar (también conocidas como "seguras para la web") que todos los navegadores modernos saben leer. Si necesitas utilizar una fuente personalizada, carga previamente la fuente para evitar destellos de texto o cambios de diseño. ==

Cuando usas una fuente personalizada en tu sitio, el navegador de un usuario tiene que descargar esa fuente antes de que pueda mostrar el texto. Esto provoca lo que se conoce como un "destello de texto invisible" (FOIT por su siglo en inglés), cuando el navegador muestra texto invisible hasta que puede mostrar la fuente personalizada.

A page showing a flash of invisible text

Un navegador puede decidir cargar texto en una fuente estándar hasta que haya descargado la personalizada, provocando lo que se conoce como un "destello de texto sin estilo" (FOUT).

A page showing a flash of unstyled text

Utiliza el atributo rel=”preload” en la etiqueta HTML que contiene el enlace a tu fuente personalizada. Este atributo le dice a los navegadores que descarguen la fuente antes de que comience a mostrar texto.

Comprueba si hay problemas de CLS en tu sitio web

Encontrar y abordar las causas de los problemas de cambio de diseño acumulativo en tus páginas es fundamental para proporcionar a tus usuarios una experiencia "agradable" cuando visitan tu sitio web. Pocas cosas frustran más a los usuarios y les hacen abandonar una página más que cuando el contenido cambia y salta abrupta e inesperadamente.

Además, dado que Core Web Vitals (y, por lo tanto, CLS) se está convirtiendo en un factor de posicionamiento en el algoritmo de Google, obtener un buen CLS puede ayudar a que tu sitio aparezca más alto en los resultados de búsqueda.