El desplazamiento acumulativo del diseño es una de estas métricas clave que mide el “salto” de un sitio web y cómo se mueve inesperadamente a medida que se cargan los elementos. Veamos con más detalle cómo funciona esta métrica y cómo puedes asegurarte de que tu propio sitio web sigue las mejores prácticas para que te clasifiques mejor en los motores de búsqueda y ofrezcas a tus usuarios una mejor experiencia.
El cambio de diseño acumulativo (o CLS) es una medida de cuánto cambia una página web inesperadamente durante su vida. Por ejemplo, si un visitante de un sitio web carga una página y, mientras la está leyendo, se carga un banner y la página salta hacia abajo, eso constituiría una gran puntuación CLS.
Los cambios de página se producen cuando el contenido se carga a diferentes velocidades y hace que el diseño cambie y altere lo que el espectador está viendo. Los anuncios que se cargan lentamente, los vídeos de tamaño desconocido que aparecen de repente o los elementos del DOM que se añaden dinámicamente son causas potenciales de CLS.
Los sitios web que se cargan a trozos o con un comportamiento inesperado harán que sus visitantes busquen otro sitio web para navegar. Y si se quedan, es probable que una puntuación alta de CLS provoque problemas de usabilidad, como la elección de una opción incorrecta, la salida demasiado temprana o la pérdida de partes de su sitio web.
En el caso más común, el usuario que está visitando la página está listo para hacer clic en un elemento, pero mientras tanto la carga modifica la posición y lleva a la persona a “equivocarse” y hacer clic en otra cosa, a menudo incluso en un anuncio o una ventana emergente.
Como se observa, el usuario quiere hacer clic en el botón para variar el orden, pero la aparición repentina e inesperada de una ventana emergente modifica el diseño de la página y desplaza los elementos más abajo de la posición anterior. Así pues, el toque que primero acabaría en el “no”, en realidad aterriza en la confirmación del carrito, lo que provoca una frustración (y probablemente también bastantes molestias e irritación).
Otro tipo de problema puede ocurrir al leer un artículo: en lugar de permitir que la operación se complete sin interrupción, el texto u otros elementos cambian y el usuario pierde la referencia visual de su lectura, teniendo que agitar la página para encontrar el párrafo en el que estaba realmente.
“La mayoría de las veces este tipo de experiencias son sólo molestas, pero en algunos casos pueden causar verdaderos daños”, escriben Philip Walton y Milica Mihajlija en web.dev, y añaden que “un CLS bajo ayuda a garantizar que la página sea agradable” para los usuarios.
El Cumulative Layout Shift es una métrica de Core Web Vital y mide la estabilidad visual de la página. La estabilidad visual se calcula en función de cuántos cambios de diseño inesperados se producen sin interactuar con la página. Cada vez que el contenido se desplaza – no porque haya hecho clic en un enlace y demás – cuenta como un cambio de diseño.
¿Cuántas veces has estado leyendo un artículo y el contenido se ha desplazado hacia abajo debido a unos nuevos anuncios? O, ¿alguna vez has intentado hacer clic en un botón y has acabado haciendo clic en otro enlace porque una nueva imagen grande ha desplazado de repente el contenido hacia abajo?
Los elementos cambian de posición por diferentes motivos. Por ejemplo, una nueva imagen o un anuncio que se carga por encima del pliegue (en la parte superior de la página) obliga a algún contenido a bajar y ocupar otra sección de la página.
Por eso, el Desplazamiento Acumulado del Diseño es una de las tres métricas de Core Web Vitals que evalúan la experiencia de usuario de una página. Junto con la mayor pintura de contenido y el primer retardo de entrada, CLS formará parte del factor de clasificación de la experiencia de la página en junio de 2021.
Este desplazamiento de la disposición se puede mitigar reservando espacio para los espacios publicitarios, eliminando los desplazamientos reservando el mayor tamaño posible para el espacio publicitario o eligiendo el mejor tamaño posible del espacio publicitario basándose en datos históricos.
Por lo tanto, si usted asigna un estilo a la división de div, imagen o vídeo en un WordPress o a cualquier elemento del sitio web con una medida específica de altura y anchura, su anuncio se limitará únicamente a las dimensiones mencionadas.
Se trata de una ventaja para los editores, ya que el nuevo sistema de puntuación es más justo, sobre todo para las páginas web que están abiertas durante mucho tiempo o que emplean el scroll infinito y que recibían una puntuación injusta por ello.
Shreoshe es una redactora de contenidos con más de 6 años de experiencia y ha trabajado anteriormente en nichos académicos y de viajes. En su etapa actual como gestora de contenidos SEO, ayuda a las empresas a dar voz a sus marcas.