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.
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.
Google califica el Core Layout Shift en un espectro de una experiencia "buena" a "mala" para los usuarios:
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") .
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:
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:
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.
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.
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.
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.
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.
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.
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.
Para encontrar el tamaño final de tu contenido incrustado después de que se cargue:
Algunas plataformas, como YouTube, ya incluyen dimensiones en su código de inserción.
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.
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.
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.
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).
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.
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.
