Métrica de Desplazamiento Cumulativo del Diseño (CLS): cómo identificar y eliminar los desplazamientos no deseados

¿También te molesta cuando un anuncio en la web desplaza el texto que estás leyendo? ¿Te enfadas cuando el contenido salta justo antes de hacer clic y terminas haciendo clic donde no querías?

Estas situaciones indeseadas al usar la web se llaman desplazamientos del diseño (layout shift). Todos los desplazamientos en una página se suman en la métrica de Desplazamiento Cumulativo del Diseño, abreviada como CLS.

Vamos a profundizar en esta métrica.

Familiarízate con la métrica CLS#

El objetivo al optimizar el CLS es asegurar la mayor estabilidad visual durante el renderizado de la página y también durante la navegación del usuario en la página. Esto ayuda a las personas a consumir el contenido de la página con mayor facilidad.

Técnicamente, la definición es algo más compleja: el CLS indica la suma de los desplazamientos del diseño (layout shift) en el peor intervalo de cinco segundos durante el uso de la página.

Esta métrica forma parte de los Core Web Vitals, utilizados por Google para medir la calidad de las páginas web. Los Core Web Vitals también son uno de los factores considerados, entre otros, en la clasificación de los resultados de búsqueda.

El límite para el valor de la métrica CLS es 0,1#

Si deseas que el Desplazamiento Cumulativo del Diseño esté en la zona verde aceptable, el valor de la métrica debe ser inferior a 0,1. Si lo logras, habrás triunfado.

Si tu CLS está entre 0,1 y 0,25, estás en la zona naranja y necesitarás mejoras.

Si las mediciones de los usuarios revelan un valor superior a 0,25, Google evaluará tu CLS como insatisfactorio.

	Buena	Requiere mejora	Mala
CLS	< 0,1	0,1 - 0,25	> 0,25

La importancia de un buen puntaje CLS#

La métrica de Desplazamiento Cumulativo del Diseño (CLS) puede ser importante incluso para tu sitio web:

• El CLS influye en el SEO y el costo de la publicidad debido a su inclusión en los Core Web Vitals.
• Optimizar el CLS aumentó en un 15 % el número de visualizaciones de páginas de Yahoo! JAPAN News por sesión. Más detalles en el estudio de caso en Web.dev.
• Un aumento del 10 % en la tasa de conversión también se logró en el sitio web Mail.ru al optimizar esta métrica, ver estudio.
• El CLS también influye en el puntaje de Lighthouse. En las herramientas Lighthouse, desde la versión 10, la métrica CLS contribuye al puntaje total (LPS) con un peso del 25 %, al igual que la métrica LCP.

Algunos de nuestros clientes, después de optimizar el CLS, han visto un aumento en el tráfico, entre otras mejoras.

En un sitio web de contenido, logramos alcanzar los "Core Web Vitals en verde" después de la optimización. Tras la implementación de la actualización de la Experiencia en la Página por parte de Google, se produjo un aumento significativo en el tráfico.

¿Cómo se calcula exactamente el CLS?#

Primero, definamos qué implica un desplazamiento de diseño.

Desplazamiento Cumulativo del Diseño

1. Los desplazamientos individuales del diseño se calculan a partir del tamaño total del área afectada (Impact Fraction) y la distancia del desplazamiento del elemento inestable (Distance Fraction) en los ejes X e Y.
2. En el ejemplo de la imagen a continuación, el tamaño del elemento inestable es aproximadamente el 90 % del viewport.
3. El elemento se desplazó un 4 % de la altura total del viewport. La expresión de la distancia del desplazamiento es, por lo tanto, 0,04.
4. En este ejemplo, el tamaño total del área afectada es 0,9 y la distancia del desplazamiento es 0,04.
5. El desplazamiento del diseño en este caso es 0,04 * 0,9 = 0,036.

Sin embargo, puede haber más elementos como estos en una página, de ahí el "Cumulativo" en el nombre de la métrica.

Llega la "ventana de sesión"#

Es importante tener en cuenta que el CLS se calcula a partir de toda la estancia del usuario en la página para el Informe de Experiencia de Usuario de Chrome.

Sin embargo, actualmente el puntaje total de CLS se limita al CLS máximo medido en una ventana de sesión restringida a 5 segundos con un intervalo de un segundo. Simplemente se toma el peor intervalo de cinco segundos:

Cálculo de la métrica CLS. Solo se toma una ventana, la peor. Aquí la Ventana de Sesión 1.

1. Los desplazamientos no deseados (layout shifts), ver descripción arriba, siempre se calculan en ventanas de sesión (session window) de hasta cinco segundos.
2. Si hay un segundo sin desplazamientos, la ventana se cierra antes de los cinco segundos.
3. Durante toda la duración de la visita a una URL específica, solo se selecciona la peor ventana (en la imagen, la primera). Esto se presenta como el puntaje de CLS para esta página.

El cálculo a lo largo de las sesiones individuales pretende evitar valores excesivamente altos de CLS en visitas donde el usuario permanece mucho tiempo en una URL.

Puedes encontrar más información sobre la medición de CLS en web.dev.

¿Cómo surge realmente el CLS?#

En la práctica, los desplazamientos no deseados son causados comúnmente por estas razones generales:

1. Desplazamientos causados por la carga paulatina de elementos dentro del contenido. Se trata de elementos que no tienen dimensiones definidas previamente, como imágenes o componentes JS.
2. Malas animaciones y desplazamientos de elementos mediante propiedades CSS. Evita las animaciones CSS que no soporten transformaciones.
3. No realizar un desplazamiento solicitado dentro de los 500 ms. Si no puedes renderizar el contenido a tiempo, al menos asegúrate de crear espacio para el nuevo contenido. Esto se aplica, por ejemplo, al paginado AJAX.

Cuidado con los elementos cargados asincrónicamente, como las imágenes. Tienden a desplazar.

Midiendo el CLS#

Informe de Experiencia de Usuario de Chrome#

Lo ideal es recoger datos sobre el CLS de casi todos tus visitantes usando el Informe de Experiencia de Usuario de Chrome. Este te devuelve para tu dominio el percentil 75 de los valores de CLS de todas las visualizaciones de páginas. Un vistazo más detallado de la distribución de valores se encuentra en el histograma.

Estos datos incluyen mediciones de usuarios con navegadores Chrome, tanto de escritorio como móviles. No se incluyen, por tanto, mediciones de usuarios de productos Apple, por ejemplo.

Los datos del Informe de Experiencia de Usuario de Chrome están disponibles en herramientas como nuestro test de velocidad de la web, PageSpeed Insights o la Consola de Búsqueda de Google.

Chrome DevTools#

Una excelente opción para desarrolladores y usuarios avanzados es medir el CLS de tu sitio web localmente. Medimos en cada página individual por separado. La herramienta ideal es Chrome, donde puedes activar la extensión Web Vitals y empezar a medir de inmediato.

Comienza midiendo el primer CLS en el primer viewport y avanza gradualmente con interacciones como desplazamientos y clics en los elementos del sitio web.

PageSpeed Insights o Lighthouse#

PageSpeed Insights o Lighthouse te miden el CLS en las páginas individuales de tu web en el primer viewport. Es un buen punto de partida, por ejemplo, para afinar los elementos básicos del diseño, desplazamientos en el menú, encabezado móvil, banners publicitarios alrededor del sitio, etc.

La desventaja es que miden el CLS solo en el primer viewport y nosotros queremos medir cumulativamente todos los desplazamientos.

Recomendaciones concretas para evitar desplazamientos del diseño#

Basados en nuestra consultoría de velocidad web, hemos seleccionado varios problemas recurrentes:

Siempre asigna tamaño a las imágenes y elementos asíncronos#

Asegúrate de que todas las imágenes en el sitio web tengan definida la anchura y altura mediante los atributos width y height. Los elementos asíncronos como componentes JS o publicidad, usa la propiedad CSS aspect-ratio.

No insertes componentes de terceros en el sitio sin placeholders#

Antes de inicializar sistemas publicitarios o plugins de redes sociales (Facebook, Instagram, TikTok), primero prepara el espacio usando un símbolo de marcador de posición (placeholder) o nuevamente usando la propiedad aspect-ratio. El tamaño del placeholder debe reservar un área similar al contenido generado por el plugin.

Aprovecha el BFcache#

Permitir al navegador utilizar el BFcache reducirá el puntaje CLS en tu sitio web. El navegador, al navegar por el historial, no tendrá que volver a renderizar la página y la mostrará desde la memoria, evitando así todos los desplazamientos durante el renderizado. Esta caché ha estado funcionando durante muchos años, pero recientemente en 2023 el navegador Chrome comenzó a soportarla tanto en móviles como en escritorios.

Optimiza tus fuentes personalizadas#

Reemplazar fuentes del sistema por fuentes personalizadas a menudo causa desplazamientos no deseados.

Aquí tienes algunas recomendaciones:

• Cuantos menos estilos y variantes, mejor.
• Comienza a descargar las fuentes lo antes posible.
• Para priorizar la descarga, utiliza preload.
• Usa exclusivamente el formato moderno WOFF2.
• Asegura la legibilidad del texto con la propiedad font-display incluso antes de que la fuente externa esté completamente cargada.
• Ajusta la coherencia entre la fuente externa y la fuente del sistema con size-adjust.

Responde al desplazamiento solicitado en 500 ms#

Si al hacer clic mediante JavaScript redibujas una parte de la página y el nuevo contenido tiene dimensiones diferentes al contenido original, se producirá un desplazamiento de los elementos circundantes. Este desplazamiento debe completarse en 500 ms.

Esto se aplica, por ejemplo, al paginado AJAX. Si no puedes entregar el nuevo contenido de manera segura en este tiempo en dispositivos más lentos, es necesario mover los elementos circundantes inmediatamente después del clic e insertar el contenido real en el espacio preparado más tarde.

Coloca el CSS en <head>#

Mantén los estilos CSS en el encabezado siempre que sea posible. Se procesarán al inicio de la carga de la página y todos a la vez. Añadir más propiedades CSS dentro del documento HTML puede provocar más desplazamientos del diseño debido al procesamiento gradual de estos estilos.

Reserva espacio para los iconos#

Si usas IconFont o un sprite SVG con una gran cantidad de iconos, este archivo puede tardar en descargarse. Solo después de cargar estos archivos voluminosos aparecerán los iconos en el sitio web y pueden empezar a desplazar el contenido. Siempre define las dimensiones de los iconos antes de su carga.

Anima solo con transform#

La propiedad de transformación CSS permite animar elementos sin que se produzcan desplazamientos del diseño. En lugar de cambiar las propiedades de altura y anchura, utiliza transform: scale(). Si deseas mover elementos, evita cambiar las propiedades top, right, bottom o left y usa transform: translate().

Bonus: cuidado con las barras de desplazamiento#

Si mides un CLS de 1,00 justo después de cargar la página y ya no sabes qué más optimizar, prueba con overflow-y: scroll. El procesamiento gradual de archivos HTML y CSS puede activar y desactivar la barra de desplazamiento lateral en la página.

Introduce este fragmento en los estilos CSS, puede ahorrarte muchas molestias al buscar más CLS.

html { height: 100%; overflow-y: scroll; }

La métrica CLS es parte de nuestra métrica unificada de velocidad, el puntaje PageSpeed.ONE (SPS).

Tenemos más sobre la optimización del CLS en un artículo separado.

Te podemos ayudar con el CLS#

En el sitio web de SIKO logramos mejorar la estabilidad del diseño 7 veces. La velocidad del sitio web es crucial para SIKO, pero el nuevo frontend basado en JavaScript presentaba problemas significativos con las métricas de experiencia del usuario Core Web Vitals.