Cumulative Layout Shift (CLS)

Definición de Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) es una métrica de Core Web Vitals que cuantifica la estabilidad visual de una página web midiendo los cambios de diseño inesperados que ocurren durante todo el ciclo de vida de una página. Específicamente, CLS mide la ráfaga más grande de puntuaciones de cambio de diseño por cada movimiento inesperado de elementos visibles entre fotogramas renderizados. Cuando el contenido de la página se mueve inesperadamente —como cuando un anuncio carga en la parte superior de la página y empuja el texto hacia abajo, o cuando las imágenes se renderizan sin dimensiones predefinidas— los usuarios experimentan inestabilidad visual que interrumpe su flujo de lectura y puede provocar clics accidentales en elementos incorrectos. Google designó oficialmente a CLS como un factor de ranking en junio de 2021, convirtiéndolo en una métrica crítica tanto para la experiencia del usuario como para la optimización en motores de búsqueda. Una buena puntuación CLS es 0.1 o inferior, lo que indica una mínima interrupción visual, mientras que las puntuaciones entre 0.1 y 0.25 necesitan mejora, y las puntuaciones superiores a 0.25 se consideran deficientes.

Contexto y Antecedentes Históricos

La introducción de Cumulative Layout Shift representa un cambio significativo en cómo la comunidad de rendimiento web mide la experiencia del usuario. Antes de CLS, la mayoría de las métricas de rendimiento se centraban en la velocidad de carga y la interactividad, pasando por alto la frustración causada por el movimiento inesperado de elementos de la página. La investigación de Google reveló que más del 70% de los usuarios experimentan cambios de diseño regularmente, y estos cambios se correlacionan directamente con mayores tasas de rebote y menor participación. La métrica fue desarrollada por el Web Incubation Community Group (WICG) y formalizada a través de la API de Inestabilidad de Diseño (Layout Instability API), que proporciona a los navegadores una forma estandarizada de detectar y reportar cambios de diseño. Cuando Google anunció Core Web Vitals en mayo de 2020, CLS se convirtió en una de las tres métricas principales junto con Largest Contentful Paint (LCP) e Interaction to Next Paint (INP). La métrica ha evolucionado desde su introducción —originalmente medía el cambio de diseño total durante toda la vida de una página, y fue refinada en mayo de 2021 para usar un enfoque de ventana de sesión, que refleja mejor la experiencia real del usuario al centrarse en la peor ráfaga de inestabilidad en lugar de penalizar páginas con cambios menores distribuidos a lo largo de su ciclo de vida. Esta evolución demuestra el compromiso de Google de crear métricas que reflejen genuinamente la frustración del usuario en lugar de mediciones técnicas arbitrarias.

Explicación Técnica: Cómo Funciona CLS

Cumulative Layout Shift opera mediante un sistema de cálculo sofisticado que combina dos componentes principales: la fracción de impacto y la fracción de distancia. La fracción de impacto mide qué porcentaje del área del viewport se ve afectada por elementos inestables —elementos que cambian su posición inicial entre dos fotogramas renderizados. Por ejemplo, si un elemento ocupa el 50% del viewport en un fotograma y luego se desplaza, y la unión de sus posiciones anterior y actual cubre el 75% del viewport, la fracción de impacto es 0.75. La fracción de distancia mide qué tan lejos se ha movido el elemento inestable en relación con la dimensión más grande del viewport (ancho o alto). Si un elemento se mueve hacia abajo un 25% de la altura del viewport, la fracción de distancia es 0.25. La puntuación final de cambio de diseño se calcula multiplicando estos dos valores: 0.75 × 0.25 = 0.1875. Los cambios de diseño individuales se agrupan luego en ventanas de sesión —ráfagas de cambios que ocurren dentro de 1 segundo entre sí, con una duración máxima de ventana de 5 segundos. La métrica CLS reporta la ventana de sesión con la puntuación acumulada más alta, no la suma de todos los cambios. Este enfoque de ventanas evita que las páginas con muchos cambios pequeños sean penalizadas injustamente en comparación con páginas con una gran ráfaga de inestabilidad.

Medición de CLS y Umbrales de Puntuación

Google ha establecido umbrales de rendimiento CLS claros para ayudar a los propietarios de sitios web a comprender su rendimiento de estabilidad visual. Una puntuación CLS de 0.1 o inferior se considera “Buena” y representa el objetivo que los propietarios de sitios deben esforzarse por alcanzar. Las puntuaciones entre 0.1 y 0.25 se clasifican como “Necesita Mejora”, lo que indica que, aunque la página no está fallando, los esfuerzos de optimización mejorarían significativamente la experiencia del usuario. Cualquier puntuación CLS superior a 0.25 se considera “Deficiente” y sugiere una inestabilidad visual sustancial que probablemente frustra a los usuarios e impacta negativamente las métricas de participación. Estos umbrales se miden en el percentil 75 de las cargas de página, segmentados tanto en dispositivos móviles como de escritorio, asegurando que la métrica refleje la experiencia de la mayoría de los usuarios en lugar de estar sesgada por valores atípicos. La investigación que respalda estos umbrales implicó analizar millones de experiencias de usuario reales y correlacionar la severidad del cambio de diseño con métricas de satisfacción del usuario. La puntuación de rendimiento de Lighthouse asigna el 25% de su peso total a CLS, lo que lo convierte en un componente significativo de la evaluación general del rendimiento de la página. Comprender estos umbrales es esencial para priorizar los esfuerzos de optimización —las páginas con puntuaciones CLS superiores a 0.25 deben abordarse de inmediato, mientras que aquellas entre 0.1 y 0.25 deben incluirse en los planes de optimización continuos.

Tabla Comparativa: CLS vs. Métricas de Rendimiento Relacionadas

Causas Comunes de Puntuaciones CLS Deficientes

Imágenes y videos sin dimensiones especificadas representan una de las causas más prevalentes de cambios de diseño. Cuando los desarrolladores no incluyen atributos de ancho y alto en las etiquetas HTML de imágenes, los navegadores no pueden asignar espacio para estos elementos hasta que se carguen por completo. Esto hace que el contenido circundante se desplace inesperadamente al renderizarse la imagen. De manera similar, anuncios, incrustaciones e iframes sin dimensiones predefinidas causan con frecuencia inestabilidad en el diseño, particularmente los anuncios de terceros donde los desarrolladores tienen control limitado sobre las dimensiones finales. El contenido inyectado dinámicamente —como banners que aparecen después de cierto tiempo, widgets de publicaciones relacionadas o secciones de comentarios que se expanden— puede empujar el contenido existente si no se reserva espacio previamente. Las fuentes web que causan FOIT (Flash de Texto Invisible) o FOUT (Flash de Texto sin Estilo) ocurren cuando las fuentes personalizadas cargan y se renderizan de manera diferente a las fuentes de respaldo, causando reflujo de texto y cambios de diseño. Las animaciones implementadas incorrectamente que usan propiedades CSS como top, left, bottom, right o box-shadow desencadenan recálculos de diseño en lugar de usar transformaciones aceleradas por GPU. El JavaScript de terceros que carga de forma asíncrona puede inyectar elementos visuales de manera impredecible, y la carga diferida sin marcadores de posición adecuados hace que el contenido se desplace cuando las imágenes finalmente cargan mientras los usuarios se desplazan. Comprender estas causas permite a los desarrolladores implementar soluciones específicas en lugar de intentar optimizaciones amplias e ineficaces.

Mejores Prácticas para Optimizar CLS

Especificar dimensiones explícitas para todos los medios es la estrategia de optimización CLS fundamental. Cada imagen, video y contenido incrustado debe incluir atributos de ancho y alto en el HTML, permitiendo a los navegadores reservar el espacio adecuado antes de que el contenido cargue. Para diseños responsivos, las cajas de relación de aspecto CSS mantienen relaciones de ancho a alto consistentes en diferentes tamaños de pantalla usando la propiedad aspect-ratio o técnicas de padding-bottom. Reservar espacio para contenido dinámico a través de marcadores de posición CSS asegura que los anuncios, widgets y otros elementos cargados dinámicamente no causen cambios cuando aparecen. Usar transformaciones CSS en lugar de propiedades de diseño para animaciones previene los recálculos de diseño —transform: translate() y transform: scale() deben reemplazar a top, left y cambios de dimensiones. Precargar fuentes web críticas y configurar font-display: optional o font-display: fallback evita que el texto sea invisible o cause cambios de diseño durante la carga de fuentes. Evitar la inserción de contenido sobre el contenido existente previene empujar elementos que los usuarios están leyendo o con los que están interactuando activamente. Implementar carga diferida adecuada con marcadores de posición asegura que las imágenes carguen en el espacio reservado en lugar de causar cambios. Diferir JavaScript de terceros para que cargue debajo del pliegue o después de la interacción del usuario evita la inyección inesperada de contenido en el viewport principal. Estas prácticas, cuando se implementan sistemáticamente, típicamente reducen las puntuaciones CLS de rangos deficientes (>0.25) a rangos buenos (≤0.1).

Impacto de CLS en la Experiencia del Usuario y Métricas de Negocio

Los cambios de diseño impactan directamente la satisfacción del usuario y los resultados comerciales de maneras medibles. Los estudios demuestran que los cambios de diseño inesperados hacen que los usuarios pierdan su lugar mientras leen, lo que lleva a mayores tasas de rebote y menor tiempo en la página. En contextos de comercio electrónico, los cambios de diseño pueden hacer que los usuarios hagan clic accidentalmente en productos o enlaces incorrectos, resultando en frustración y abandono del carrito. Una investigación de Relive mostró que reducir los cambios de diseño a prácticamente cero mejoró la experiencia del cliente y aumentó las tasas de conversión en un 5%, mientras que otro caso de estudio demostró una mejora del 41% en CLS que condujo a un aumento del 10% en las tasas de conversión. La investigación de la API de Inestabilidad de Diseño indica que los usuarios que experimentan cambios de diseño significativos tienen 2-3 veces más probabilidades de abandonar una página antes de completar su acción prevista. Más allá de la experiencia del usuario, el algoritmo de ranking de Google recompensa explícitamente a las páginas con buenas puntuaciones CLS, lo que significa que optimizar la estabilidad visual proporciona tanto beneficios inmediatos para la experiencia del usuario como ventajas SEO a largo plazo. Las páginas con puntuaciones CLS deficientes pueden ver una visibilidad reducida en los resultados de búsqueda, particularmente para palabras clave competitivas donde múltiples páginas tienen buenos Core Web Vitals. El efecto acumulativo de la optimización CLS —mejora de la experiencia del usuario, mayores tasas de conversión y mejores rankings de búsqueda— lo convierte en un objetivo de optimización de alto retorno de inversión para la mayoría de los sitios web.

CLS en Diferentes Contextos: Datos de Laboratorio vs. Datos de Campo

Los datos de laboratorio y los datos de campo a menudo muestran diferencias significativas en las mediciones de CLS, creando confusión para los desarrolladores que intentan optimizar. Las herramientas de laboratorio como Lighthouse y PageSpeed Insights miden CLS solo durante la carga inicial de la página en un entorno sintético controlado, capturando típicamente solo los cambios de diseño visibles en el primer viewport. Este enfoque no captura los cambios de diseño que ocurren mientras los usuarios se desplazan, interactúan con menús o activan la carga de contenido dinámico. Los datos de campo de Chrome User Experience Report (CrUX) capturan experiencias reales de usuario a través de todas las interacciones durante todo el ciclo de vida de la página, incluyendo cambios que ocurren durante el desplazamiento y después de interacciones del usuario. Esto explica por qué una página puede mostrar una buena puntuación CLS en Lighthouse pero una puntuación deficiente en el informe de Core Web Vitals de Search Console —los datos de campo incluyen cambios que la prueba de laboratorio nunca encontró. Las soluciones de Monitoreo Real de Usuario (RUM) proporcionan información detallada sobre cuándo y dónde ocurren los cambios de diseño para visitantes reales, incluyendo patrones específicos de dispositivos y cambios basados en desplazamiento. Los desarrolladores deben priorizar los datos de campo cuando estén disponibles, ya que reflejan la experiencia genuina del usuario, mientras usan los datos de laboratorio para identificar y depurar problemas específicos. La discrepancia entre los datos de laboratorio y los de campo resalta la importancia del monitoreo continuo en lugar de pruebas puntuales, asegurando que los esfuerzos de optimización aborden experiencias de usuario del mundo real en lugar de escenarios de prueba sintéticos.

CLS y Monitoreo en Plataformas de IA

A medida que sistemas de IA como ChatGPT, Perplexity, Google AI Overviews y Claude generan cada vez más resúmenes y citas de contenido web, la estabilidad visual de los sitios web citados cobra relevancia para las plataformas de monitoreo de IA. Cuando los sistemas de IA citan o hacen referencia a tu sitio web, los usuarios que hacen clic para acceder a tu dominio experimentan de primera mano el rendimiento CLS de tu página. Las puntuaciones CLS deficientes pueden impactar negativamente la experiencia del usuario para el tráfico referido por IA, aumentando potencialmente las tasas de rebote y reduciendo el valor de las citas de IA. Herramientas de monitoreo como AmICited rastrean cómo aparece tu dominio en las plataformas de IA, y comprender el rendimiento CLS se convierte en parte de una estrategia integral de monitoreo de marca. Los sitios web con excelentes puntuaciones CLS proporcionan una mejor experiencia de usuario para todas las fuentes de tráfico, incluyendo visitantes referidos por IA, reforzando la importancia de la optimización de la estabilidad visual. A medida que el contenido generado por IA se vuelve más prevalente en los resultados de búsqueda, la conexión entre el rendimiento CLS y la presencia digital general se vuelve cada vez más importante para mantener la reputación de la marca y la satisfacción del usuario en todos los canales de tráfico.

Cómo Auditar tu Sitio en Busca de Problemas de CLS

Ejecuta esta auditoría siempre que las puntuaciones CLS en Search Console aumenten o antes de un rediseño importante. Comienza con datos de campo, no de laboratorio: abre el informe de Core Web Vitals de Search Console e identifica qué grupos de URL están en los umbrales “Necesita Mejora” o “Deficiente”, ya que esto refleja la experiencia real del usuario a través de CrUX en lugar de una prueba sintética de una sola página. Para cada página marcada, abre el panel de Rendimiento de Chrome DevTools, graba una carga de página y busca las entradas marcadas “Layout Shift” en la sección Experiencia —al hacer clic en cada una se muestra exactamente qué elemento del DOM se movió y cuánto, lo que te permite asignar las contribuciones de puntuación directamente a elementos específicos. Revisa cada etiqueta de imagen y video para verificar si faltan atributos de ancho/alto o una regla CSS de aspect-ratio; esta es la causa más común y se soluciona con dimensiones explícitas. Inspecciona los espacios de anuncios, incrustaciones y widgets de terceros para verificar el espacio reservado —si un contenedor no tiene una altura mínima establecida antes de que cargue el anuncio, empujará el contenido hacia abajo una vez que se renderice. Prueba el comportamiento de carga de fuentes web específicamente: compara CLS con la red limitada a 3G, ya que los cambios lentos de fuentes causados por la falta de font-display o precarga son una causa común de cambios que no aparecen en conexiones rápidas. Finalmente, revisa cualquier contenido inyectado dinámicamente —banners de cookies, barras promocionales o secciones de carga diferida— que aparezca sobre el contenido existente, ya que insertar contenido sobre el pliegue después del renderizado inicial es uno de los desencadenantes CLS de mayor impacto y requiere un marcador de posición o un tratamiento de posición fija en lugar de una inyección en el flujo.