Roberto está mejorando el CLS

El movimiento inesperado del contenido de la página suele ocurrir cuando los recursos se cargan de forma asíncrona o cuando los elementos DOM se agregan de forma dinámica a la página antes del contenido existente. La causa de los cambios de diseño puede ser imágenes o videos con dimensiones desconocidas, fuentes que se renderizan más grandes o más pequeñas que su resguardo inicial, o bien anuncios o widgets de terceros que cambian de tamaño de forma dinámica.

Las diferencias entre el funcionamiento de un sitio durante el desarrollo y la forma en que lo experimentan los usuarios empeoran este problema. Por ejemplo:

El contenido personalizado o de terceros suele comportarse de manera diferente en desarrollo y en producción.

A menudo, las imágenes de prueba ya están en la caché del navegador del desarrollador, pero tardan más en cargarse para el usuario final.

Las llamadas a la API que se ejecutan de forma local suelen ser tan rápidas que los retrasos imperceptibles en el desarrollo pueden volverse sustanciales en la producción.

La métrica Desplazamiento del diseño acumulativo (CLS) te ayuda a abordar este problema midiendo la frecuencia con la que ocurre en los usuarios reales.

¿Qué es CLS?

El CLS es una medida del aumento de actividad más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que ocurre durante todo el ciclo de vida de una página.

Un cambio de diseño se produce cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente. (Más adelante en esta guía, se explican los detalles sobre cómo se calculan las puntuaciones de cambio de diseño individuales).

Una ráfaga de cambios de diseño, conocida como ventana de sesión, ocurre cuando uno o más cambios de diseño individuales se producen en rápida sucesión con menos de 1 segundo entre cada cambio y un máximo de 5 segundos para la duración total de la ventana.

El aumento más grande es la ventana de sesión con la puntuación acumulativa máxima de todos los cambios de diseño dentro de esa ventana.

Ejemplo de ventanas de sesión. Las barras azules representan las puntuaciones de cada cambio de diseño individual.

Precaución: Anteriormente, el CLS medía la suma total de todas las puntuaciones de cambio de diseño individuales que se producían durante toda la vida útil de la página. Para ver qué herramientas aún proporcionan la capacidad de realizar comparativas con la implementación original, consulta Evolución del cambio de diseño acumulativo en las herramientas web.

¿Cuál es una buena puntuación de CLS?

Para proporcionar una buena experiencia del usuario, los sitios deben esforzarse por tener una puntuación de CLS de 0.1 o menos. Para asegurarte de alcanzar este objetivo para la mayoría de los usuarios, un buen umbral para medir es el percentil 75 de las cargas de páginas, segmentadas entre los dispositivos móviles y las computadoras de escritorio.

Los valores buenos de CLS son de 0.1 o menos, los valores deficientes son superiores a 0.25 y los valores intermedios deben mejorarse.

Los valores de CLS buenos son 0.1 o menos. Los valores deficientes son superiores a 0.25.

Para obtener más información sobre la investigación y la metodología que respaldan esta recomendación, consulta Definir los umbrales de las métricas de las Métricas web esenciales.

Cambios de diseño en detalle

Los cambios de diseño se definen en la API de Layout Instability, que informa entradas layout-shift cada vez que un elemento visible dentro del viewport cambia su posición inicial (por ejemplo, su posición superior y a la izquierda en el modo de escritura predeterminado) entre dos fotogramas. Estos elementos se consideran elementos inestables.

Ten en cuenta que los cambios de diseño solo se producen cuando los elementos existentes cambian su posición inicial. Si se agrega un elemento nuevo al DOM o un elemento existente cambia de tamaño, no se cuenta como un cambio de diseño, siempre y cuando el cambio no haga que otros elementos visibles cambien su posición inicial.

Puntuación de cambio de diseño

Para calcular la puntuación de cambio de diseño, el navegador observa el tamaño del viewport y el movimiento de los elementos inestables en el viewport entre dos fotogramas renderizados. La puntuación de cambio de diseño es un producto de dos medidas de ese movimiento: la fracción de impacto y la fracción de distancia (ambas se definen a continuación).