Cambio Acumulativo de Diseño (CLS)
La métrica Cambio Acumulativo de Diseño (CLS, por sus siglas en inglés) mide la estabilidad general del diseño de su sitio. Un sitio que cambia su diseño de forma inesperada durante la carga de la página puede provocar errores accidentales del usuario y distracción.
El Cambio Acumulativo de Diseño (CLS) ocurre cuando los elementos cambian de posición después de ser renderizados inicialmente por el DOM. En este ejemplo, un botón se renderizó en pantalla después del bloque de texto, causando que este último se desplace hacia abajo. Al calcular el CLS, se considera tanto el impacto como la distancia del desplazamiento.
Los elementos que cambian de posición cuando nuevos elementos se renderizan en pantalla afectan el CLS.
La puntuación individual de cambio de diseño de cada elemento solo se contabiliza en el CLS si ocurre un movimiento inesperado. Si se agrega un nuevo elemento al DOM o un elemento existente cambia de tamaño, no se considera como cambio de diseño si los elementos cargados mantienen su posición.