Qué es el CLS
El CLS mide cuánto se mueven los elementos de tu página mientras carga, como cuando un botón se desplaza justo antes de que hagas clic en él, y penaliza la experiencia cuando esos saltos son grandes. También se conoce como «Cumulative Layout Shift» o «cambio de diseño inesperado».
Es como ir a coger un producto del estante de una tienda y que, justo cuando alargas la mano, otro empleado lo cambie de balda sin avisar: acabas cogiendo otra cosa por error. En una web, el CLS mide cuánto se desplazan visualmente los elementos (imágenes, botones, bloques de texto) después de que ya parecían haber cargado, normalmente porque algo (una imagen sin tamaño definido, un banner que aparece tarde) empuja al resto del contenido hacia abajo o hacia los lados.
Cómo funciona
- La página empieza a cargar y algunos elementos se muestran antes que otros.
- Si un elemento que todavía no ha cargado (una imagen, un anuncio, una fuente) no tiene un espacio reservado, el resto del contenido ocupa ese hueco mientras tanto.
- Cuando ese elemento por fin carga, empuja de golpe a todo lo que estaba a su alrededor, provocando un salto visual.
- Google mide cuánto se ha movido el contenido y qué proporción de la pantalla ha afectado ese movimiento.
- Cuantos más saltos grandes ocurran durante la visita, peor es la puntuación de CLS de esa página.
Ejemplo
Una tienda de juguetes online en Huelva tenía fichas de producto donde las imágenes no tenían un tamaño reservado en el diseño, así que el precio y el botón de compra se desplazaban hacia abajo justo cuando terminaba de cargar la foto. Varios clientes acababan pulsando «añadir a favoritos» en vez de «comprar» por ese desplazamiento de última hora. Fijamos el espacio exacto que debía ocupar cada imagen antes de que cargara, y los saltos desaparecieron por completo.
Señales de que te afecta
- Google Search Console marca tus páginas como «necesita mejora» o «mala» en CLS.
- Notas que el texto o los botones «saltan» de sitio un instante después de que la página parecía haber cargado.
- Clientes te comentan que han hecho clic sin querer en algo distinto a lo que buscaban.
- Usas banners, anuncios o avisos de cookies que aparecen con retraso sobre el resto del contenido.
Cómo lo resolvemos
Revisamos qué elementos de tus páginas provocan saltos visuales y les reservamos el espacio exacto que van a ocupar antes de que terminen de cargar, para que el resto del contenido no se mueva de sitio sin avisar. Si quieres que revisemos la estabilidad visual de tu web, en nuestro servicio de optimización WordPress nos encargamos de corregirla. El CLS es una de las tres métricas de Core Web Vitals, y conviene revisarlo también al activar lazy load en las imágenes, para que la carga diferida no provoque saltos nuevos. Las fuentes tipográficas personalizadas son otra causa habitual: si el texto cambia de una fuente genérica a la definitiva justo cuando esta termina de cargar, el tamaño de las letras puede variar y desplazar el resto del contenido; añadir la instrucción «font-display: swap» evita que el texto se quede invisible mientras tanto, aunque conviene combinarla con un buen ajuste de tamaños para no generar el propio salto que se quiere evitar.
Preguntas frecuentes
¿Por qué mis imágenes provocan saltos si cargan bien?
Porque «cargar bien» no es lo mismo que «tener su espacio reservado»: si el navegador no sabe de antemano qué tamaño va a tener la imagen, deja el espacio equivocado hasta que la imagen llega, y entonces todo se reajusta de golpe.
¿Los anuncios o banners de cookies siempre provocan CLS?
Solo si aparecen con retraso y no tienen un espacio reservado desde el principio; si se cargan desde el primer momento con su tamaño ya definido, no deberían mover nada.
¿El CLS afecta más al móvil o al ordenador?
Puede afectar a ambos por igual, aunque en móvil, al tener menos espacio en pantalla, un salto visual suele notarse más y es más fácil que provoque un clic equivocado.