Cómo mejorar el CLS y evitar los desplazamientos de diseño
Aprende a mejorar el CLS corrigiendo imágenes, fuentes, elementos incrustados, anuncios y contenido dinámico que provocan desplazamientos inesperados.
Si el texto se mueve mientras lees, un botón cambia de posición o una imagen empuja el resto de la página hacia abajo al cargarse, tu web tiene un problema de estabilidad visual.
Estos movimientos inesperados se miden con el Cumulative Layout Shift (CLS), una de las Core Web Vitals de Google. Un resultado de 0,1 o menos es bueno y por encima de 0,25 se considera deficiente.
¿Qué es el CLS?
El CLS mide cuánto se desplazan inesperadamente los elementos visibles durante la visita. Por ejemplo, un anuncio puede aparecer encima de un enlace justo cuando alguien va a pulsarlo, o una imagen grande puede mover el artículo al terminar de cargarse.
La métrica se evalúa en el percentil 75 de las visitas, por separado en móvil y escritorio. Por eso refleja lo que experimentan los usuarios reales, no solo la velocidad de descarga de un recurso.
Causas más habituales
El navegador no conoce a tiempo el tamaño final de un elemento. Las causas típicas son imágenes sin dimensiones, vídeos e iframes sin espacio reservado, anuncios, widgets de terceros, cambios de fuente, banners insertados después de mostrar la página y contenido añadido con JavaScript sin un espacio previsto.
Reserva espacio para imágenes, vídeos y anuncios
Indica width y height en las imágenes para que el navegador reserve su proporción antes de descargarlas:
<img src="ejemplo.jpg" alt="Ejemplo" width="1200" height="800">La imagen seguirá siendo adaptable con max-width: 100%; height: auto. Para vídeos, mapas, formularios y contenido social, utiliza un contenedor con aspect-ratio: 16 / 9. Reserva también la altura esperada de cada espacio publicitario.
Controla el contenido dinámico y las fuentes
Avisos de cookies, promociones, resultados de búsqueda, recomendaciones y respuestas de APIs no deberían desplazar contenido que ya está visible. Reserva su espacio antes de renderizar o utiliza esqueletos y alturas mínimas previsibles.
Una fuente alternativa puede tener métricas distintas a la fuente web y cambiar los saltos de línea. Elige un fallback parecido, configura bien la carga y considera size-adjust antes de eliminar una fuente personalizada.
Evita animaciones que cambian el diseño
Animar top, left, width, height o margin modifica el layout. Para mover o escalar elementos, suele ser mejor usar transforms como transform: translateX(20px).
Cómo encontrar la causa
PageSpeed Insights, Lighthouse y Chrome DevTools ayudan a investigar. Los datos de campo representan dispositivos y redes reales; los datos de laboratorio sirven para depurar una implementación concreta. Prueba también el scroll, los menús, los avisos de consentimiento, la carga de más contenido y los widgets.
Un hosting más rápido no arregla automáticamente el CLS. Identifica primero el elemento que se mueve y después corrige su HTML, CSS, JavaScript, imagen o servicio externo.
Preguntas frecuentes
¿Qué puntuación de CLS es buena?
0,1 o menos es buena, entre 0,1 y 0,25 necesita mejoras y por encima de 0,25 es deficiente.
¿El lazy loading provoca CLS?
No por sí mismo. El problema aparece cuando no hay dimensiones o una proporción que permita reservar espacio.
¿Mejorar el CLS mejora el SEO?
Google utiliza las Core Web Vitals en sus sistemas de ranking, pero el CLS es solo una señal entre muchas.
Construye una web más estable
Quédate con una idea: siempre que sea posible, el navegador debe saber cuánto espacio necesita cada elemento antes de que aparezca. Reserva ese espacio, prueba las interacciones reales y revisa datos de campo y de laboratorio.