CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) es una métrica de Core Web Vital que mide la estabilidad visual de una página durante su carga. En lugar de medir velocidad o capacidad de respuesta, CLS se enfoca en si el contenido visible se mueve inesperadamente durante y después del proceso de carga. Cada vez que un elemento cambia de posición sin interacción del usuario, el navegador registra la distancia y el tamaño del desplazamiento. Estas puntuaciones individuales se agrupan en ventanas de sesión, y la ventana de sesión más grande se convierte en la puntuación CLS de la página. Una puntuación de 0,1 o menos se considera buena, de 0,1 a 0,25 necesita mejora, y por encima de 0,25 es deficiente.

Los cambios inesperados del diseño degradan directamente la experiencia del usuario. Un lector que está a punto de pulsar un botón puede tocar accidentalmente el elemento equivocado cuando el contenido salta. Un espectador que recorre un documento puede perder completamente su posición. Estas frustraciones aumentan las [tasas de rebote](/glossary/bounce-rate) y reducen el tiempo en la página. Google utiliza CLS como uno de los tres [Core Web Vitals](/glossary/core-web-vitals) en su algoritmo de clasificación, por lo que las páginas con mala estabilidad visual enfrentan penalizaciones tanto de engagement como de SEO. Para los editores digitales que incrustan contenido interactivo como flipbooks, controlar el CLS es especialmente importante porque las incrustaciones de terceros son una de las fuentes más comunes de cambios de diseño.

El visor de FlipLink está diseñado para minimizar CLS reservando dimensiones fijas para el contenedor del [flipbook](/glossary/flipbook) antes de que el contenido de la página se cargue por completo. Las imágenes y los elementos interactivos se renderizan dentro de espacios preasignados para que el diseño no cambie cuando llegan los recursos. El renderizador de flipbook [Three.js](/glossary/three-js) y el visor de documentos [PDF.js](/glossary/pdf-js) se inicializan con un marco estable, evitando que la animación de paso de página cause saltos en el diseño. El código de [incrustación responsiva](/features/sharing-and-distribution) que genera FlipLink utiliza contenedores de relación de aspecto que reclaman inmediatamente el espacio correcto en la página anfitriona. Este diseño beneficia tanto al visor incrustado en tu sitio web como a la publicación alojada en go.fliplink.me.

CLS se mide utilizando dos componentes para cada cambio: **impact fraction** (el porcentaje del [viewport](/glossary/viewport) afectado) y **distance fraction** (cuánto se movió el elemento en relación con el viewport). La puntuación de layout shift para un solo fotograma es igual a impact fraction multiplicada por distance fraction. Los cambios que ocurren dentro de los 500 milisegundos posteriores a una entrada del usuario (como un clic o toque) se excluyen porque el usuario espera movimiento en respuesta a su acción. Chrome DevTools, Lighthouse, PageSpeed Insights y la biblioteca JavaScript Web Vitals informan CLS. Los datos de campo del Chrome User Experience Report (CrUX) proporcionan puntuaciones CLS reales recopiladas de visitantes reales.

CLS utiliza un enfoque de **ventana de sesión** para calcular la puntuación final. Una ventana de sesión es un grupo de layout shifts que ocurren dentro de un segundo entre sí, con una duración máxima de ventana de cinco segundos. La puntuación CLS de la página es la ventana de sesión individual más grande, no la suma de todos los cambios. Este método se actualizó en 2021 para reflejar mejor las páginas de larga duración y las aplicaciones de página única donde el contenido se carga progresivamente. Las causas comunes de CLS alto incluyen imágenes sin atributos de ancho y alto, anuncios o banners inyectados dinámicamente, fuentes web que provocan un destello de texto sin estilo (FOUT) e incrustaciones de terceros que se cargan de forma asíncrona sin espacio reservado.

**"CLS solo importa durante la carga inicial de la página."** CLS rastrea los cambios durante todo el ciclo de vida de la página, incluyendo los provocados por imágenes con carga diferida, contenido de scroll infinito o elementos insertados dinámicamente. Las aplicaciones de página única que intercambian contenido durante la navegación pueden acumular CLS si las transiciones no se manejan cuidadosamente. **"El objetivo es una puntuación CLS de 0."** Aunque cero es ideal, una puntuación de 0,1 o menos se considera buena. Perseguir el cero absoluto puede llevar a sobreingeniería. El objetivo práctico es mantener los cambios imperceptibles para los usuarios. **"CLS mide la velocidad de carga de una página."** CLS no tiene nada que ver con la velocidad. Una página puede cargarse en menos de un segundo y aun así tener un CLS terrible si los elementos saltan durante el renderizado. La velocidad se mide con [LCP](/glossary/lcp) y otras métricas de tiempo, no con CLS.