El Cumulative Layout Shift (CLS) es una de las métricas más importantes de los Core Web Vitals de Google. Mide la estabilidad visual de una página: cuánto se mueven los elementos mientras carga. Si alguna vez intentaste hacer clic en un botón y este “saltó” en el último segundo, has experimentado un mal CLS. Aunque suele asociarse a rediseños completos o cambios estructurales, la buena noticia es que se puede mejorar sin rehacer toda la web. En este artículo veremos cómo optimizar tu CLS paso a paso, aplicando correcciones rápidas y efectivas que mejoran la experiencia del usuario y el rendimiento SEO.
Qué es el CLS y por qué importa
El CLS evalúa los cambios inesperados en la posición de los elementos visibles en la pantalla. Se expresa como un número entre 0 y 1, donde 0 significa estabilidad perfecta y valores superiores a 0.25 indican una experiencia deficiente. Google utiliza esta métrica para determinar si una página ofrece una experiencia visual fluida o frustrante.
Un mal CLS afecta tanto al usuario como al posicionamiento. Desde el punto de vista de la UX, los movimientos inesperados generan desorientación, errores de clic y sensación de descontrol. Desde el punto de vista del SEO, Google lo considera un indicador de baja calidad. Mejorar el CLS, por tanto, es mejorar simultáneamente la usabilidad, la accesibilidad y el ranking de tu sitio.
Las causas más comunes del mal CLS
Antes de aplicar soluciones, hay que entender qué provoca los saltos de contenido. En la mayoría de los casos, los responsables son tres tipos de elementos:
- Imágenes sin dimensiones definidas. Cuando una imagen se carga sin un tamaño reservado, el navegador no sabe cuánto espacio debe ocupar y reacomoda el contenido una vez que la imagen aparece.
- Elementos dinámicos o tardíos. Publicidades, banners, fuentes externas o iframes que se cargan después del contenido principal pueden empujar el resto de la página hacia abajo.
- Cambios en el tamaño de texto o fuentes. Algunas tipografías personalizadas tardan en renderizarse; mientras tanto, el navegador muestra una fuente temporal y luego reajusta todo el layout.
A veces, los pequeños detalles —como un lazy load mal implementado o un widget de terceros— pueden sumar microcambios que terminan afectando significativamente el CLS total.
Cómo medir tu CLS actual
Antes de optimizar, necesitas saber desde dónde partes. Las herramientas más útiles para medir el CLS son:
- Lighthouse (en Chrome DevTools): analiza el CLS junto con las otras métricas de rendimiento y ofrece sugerencias automáticas.
- PageSpeed Insights: muestra los datos de laboratorio y los de campo (de usuarios reales), lo que permite detectar si el problema es global o puntual.
- Web Vitals Extension: una extensión gratuita de Chrome que monitoriza en tiempo real las métricas de experiencia del usuario.
Una puntuación de CLS inferior a 0.1 se considera buena; entre 0.1 y 0.25, mejorable; y superior a 0.25, mala. Saber exactamente qué elementos provocan los saltos te permitirá centrar esfuerzos donde más impacto tengan.
Soluciones rápidas sin rediseñar tu web
Mejorar el CLS no siempre implica modificar la estructura visual del sitio. En muchos casos, basta con introducir ajustes técnicos o de contenido. Estas son las acciones más efectivas:
1. Define siempre el ancho y alto de las imágenes.
Añade los atributos width y height o, mejor aún, usa CSS para definir proporciones con aspect-ratio. De esta forma, el navegador reserva el espacio antes de cargar la imagen, evitando reacomodos. Si usas un CMS como WordPress, asegúrate de que tus plantillas generen automáticamente tamaños definidos.
2. Reserva espacio para anuncios y elementos dinámicos.
Si tienes banners publicitarios o widgets de terceros, dales un contenedor fijo. Evita que el contenido se mueva cuando el anuncio se carga o cambia de tamaño. En su lugar, deja un área estática con altura definida y, si el elemento no se muestra, rellénala con un fondo neutro o una imagen de reemplazo.
3. Optimiza la carga de fuentes web.
Las fuentes personalizadas pueden provocar layout shifts si se aplican tarde. Usa font-display: swap para que el texto sea visible inmediatamente con una fuente alternativa, y define tamaños coherentes para evitar cambios drásticos cuando se cargue la fuente final.
4. Carga los elementos en orden lógico.
Asegúrate de que los scripts no bloqueen la renderización. Coloca los recursos críticos (CSS y JS esenciales) en la cabecera y los secundarios en el pie. Las animaciones o componentes que aparecen al hacer scroll deben tener un espacio reservado desde el inicio, incluso si se cargan después.
5. Reduce la dependencia de terceros.
Widgets de redes sociales, chatbots o reproductores embebidos pueden generar movimientos impredecibles. Si no son esenciales, carga su script de manera diferida o solo cuando el usuario los active.
6. Usa placeholders inteligentes.
Los skeleton loaders —bloques grises o de color neutro que simulan el contenido— ayudan a mantener el espacio mientras el recurso real se carga. Son una alternativa visualmente elegante y funcional que mejora la percepción de estabilidad.
7. Comprueba el comportamiento del contenido dinámico.
Los pop-ups, avisos de cookies o banners promocionales deben aparecer sin desplazar el contenido principal. Para ello, puedes usar animaciones superpuestas (overlay) o reservar su espacio desde el inicio.
Pequeñas optimizaciones con gran impacto
Cada corrección suma. En muchos casos, mejorar el CLS consiste en una serie de pequeños ajustes acumulativos más que en un gran cambio. Por ejemplo, un sitio puede reducir su CLS a la mitad simplemente al definir los tamaños de las imágenes y aplicar font-display: swap.
También puedes usar lazy loading responsable: activa la carga diferida solo en imágenes que realmente estén fuera del viewport. Si abusas de esta técnica, corres el riesgo de provocar saltos cuando el usuario hace scroll rápido y se cargan de golpe varios elementos.
Otro truco efectivo es mantener proporciones consistentes entre los componentes. Si un bloque de texto, una tarjeta o una imagen tienen alturas variables, el contenido adyacente tenderá a moverse. Establecer alturas mínimas uniformes reduce esos desplazamientos sutiles que afectan la puntuación global.
Monitorea los resultados a largo plazo
El CLS no es una métrica que se solucione una vez y se olvide. Cada actualización, cambio de plugin o inserción de nuevo contenido puede alterar el comportamiento visual. Por eso, es recomendable integrar el seguimiento de Web Vitals en tus herramientas de analítica, como Google Analytics 4 o Cloudflare Web Analytics.
Configura alertas para detectar variaciones significativas. Si notas un aumento repentino en el CLS, revisa los elementos nuevos: imágenes, anuncios o scripts externos suelen ser los culpables.
Mejorar el CLS no requiere rediseñar toda tu web. Requiere atención, método y pequeños ajustes inteligentes. Definir tamaños de imagen, controlar fuentes, reservar espacio para contenido dinámico y respetar la carga progresiva son pasos que marcan una gran diferencia en la experiencia del usuario.
Una interfaz estable transmite profesionalidad y confianza. Al eliminar los saltos visuales, no solo cumples con las exigencias de Google, sino que también ofreces una navegación más fluida, accesible y coherente. En definitiva, optimizar el CLS es una inversión en la estabilidad y credibilidad de tu sitio, y eso siempre se traduce en una mejor conversión y satisfacción del usuario.
