Qué es el CLS y por qué molesta tanto

El CLS (Cumulative Layout Shift) mide cuánto "saltan" los elementos de una página mientras termina de cargar. Es esa experiencia de ir a tocar un botón y que de repente aparezca un banner arriba, todo baje, y acabes tocando otra cosa.

Molesta siempre, y en un formulario o un checkout cuesta ventas: la gente pulsa donde no quería y se frustra. Es uno de los tres Core Web Vitals.

BienMejorableMal
menos de 0,10,1–0,25más de 0,25

Las cuatro causas típicas

1. Imágenes sin dimensiones

Si la etiqueta <img> no dice cuánto mide, el navegador no reserva espacio. Cuando la imagen carga, empuja todo lo que hay debajo. Solución: poner siempre width y height (o aspect-ratio en CSS) en todas las imágenes y videos.

2. Anuncios, embeds e iframes sin espacio reservado

Un video de YouTube, un mapa de Google, un widget de reseñas, un banner de publicidad: aparecen de golpe y desplazan el contenido. Solución: reservar el hueco con su tamaño exacto antes de que carguen (un contenedor con altura fija o min-height).

3. Fuentes web que cambian el texto al cargar

El texto se ve primero con una fuente del sistema y luego "salta" a la fuente web, que tiene otro tamaño y espaciado. Solución: cargar las fuentes con font-display: swap y elegir una fuente de respaldo de tamaño parecido para que el salto sea mínimo.

4. Contenido que se inserta arriba después de cargar

Avisos de cookies, barras de promoción, mensajes de "envío gratis" que aparecen empujando la página hacia abajo. Solución: que aparezcan como una capa superpuesta (encima del contenido) o con su espacio ya reservado, no empujando.

El más fácil de todos. El 70% de los problemas de CLS se arreglan poniendo width y height a las imágenes. En WordPress y en la mayoría de plataformas se puede hacer desde el editor al insertar la imagen.

Cómo encontrar qué está saltando

  • PageSpeed Insights te da el valor de CLS y, en "Diagnósticos", suele señalar qué elemento concreto causa el salto ("Evita los cambios grandes de diseño").
  • Míralo en el móvil con conexión lenta (en las herramientas de desarrollo de Chrome puedes simular "3G lento"). Los saltos se ven claros cuando la carga es lenta.
  • Search Console → Core Web Vitals agrupa las URLs con CLS malo por plantilla, así sabes si es la home, las fichas o el blog.

Cuándo suele romperse

El CLS empeora casi siempre después de un cambio: instalar un plugin, añadir un chat, poner un banner de cookies nuevo, cambiar de tema. Revísalo en Search Console cada mes y siempre después de tocar algo en la web.

Cómo lo hacemos en ClikRank. Cada web que hacemos sale con dimensiones en todas las imágenes, espacio reservado para los embeds y los avisos como capa superpuesta. Es prevención barata. Si tu web tiene saltos, escríbenos.

Preguntas frecuentes

Mi CLS de laboratorio está en verde pero el de campo en rojo. ¿Por qué?

La prueba de laboratorio carga la página una vez, rápido. Los usuarios reales interactúan (hacen scroll, aceptan cookies, esperan anuncios), y ahí aparecen saltos que la prueba no ve. Guíate por el dato de campo.

¿El banner de cookies me está haciendo daño?

Si aparece empujando el contenido hacia abajo, sí. Debe aparecer como una barra fija o una ventana superpuesta que no mueva nada de lo que ya se ve.

¿Vale la pena obsesionarse con el CLS?

Si está en rojo, sí: es barato de arreglar y molesta a los usuarios. Si ya está en verde, tu tiempo rinde más en contenido y enlaces.