El CLS o Cumulative Layout Shift es una métrica de rendimiento que mide la estabilidad visual de una página web. En términos sencillos, cuantifica cuánto se mueven o «saltan» los elementos de tu web mientras la página está cargando. ¿Alguna vez has intentado hacer clic en un enlace o un botón y, justo en ese milisegundo, un anuncio o una imagen ha cargado, desplazando todo el contenido hacia abajo y haciendo que pulses en el lugar equivocado? Eso es un CLS alto.
Esta métrica es el tercer pilar de los Core Web Vitals de Google y es vital porque una web que «baila» durante la carga genera una sensación de falta de pulido y frustración inmediata en el usuario.
¿Por qué el CLS es crítico para tu web?
El problema de la inestabilidad visual es que es un error de diseño y desarrollo que afecta directamente al comportamiento del usuario:
- Experiencia de Usuario (UX): Los cambios de diseño inesperados son molestos y pueden llevar a acciones accidentales (como comprar algo que no querías o borrar un elemento). Una web estable es una web que transmite profesionalidad y confianza.
- Posicionamiento SEO: Al ser un factor oficial de los Core Web Vitals, un CLS alto puede penalizar tu posicionamiento en Google. El buscador prefiere premiar a las webs que ofrecen una experiencia visual predecible y fluida.
- Tasa de conversión: Un usuario que se distrae o se irrita porque el botón de «añadir al carrito» se mueve de sitio justo antes de hacer clic es un usuario que abandona la página.
El baremo del CLS
A diferencia de otras métricas, el CLS no mide tiempo (ms), sino una puntuación de impacto de movimiento:
- Buena (Good): 0,1 o menos. Es el objetivo. La web apenas tiene movimientos perceptibles al cargar.
- Necesita mejorar (Needs Improvement): Entre 0,1 y 0,25. Se producen movimientos que el usuario puede notar fácilmente.
- Pobre (Poor): Superior a 0,25. La web es inestable y la experiencia de navegación es frustrante.
¿Cómo evitar que tu web «baile» al cargar?
El CLS casi siempre es consecuencia de elementos sin un tamaño definido o que se insertan de forma dinámica. La solución pasa por la planificación:
- Define dimensiones en imágenes y vídeos: Siempre, siempre, establece los atributos width y height en tus imágenes. Esto reserva el espacio necesario en el navegador antes de que la imagen se descargue, evitando que el contenido de alrededor se desplace.
- Reserva espacio para el contenido dinámico: Si vas a cargar un anuncio, un banner o un widget de redes sociales, envuélvelo en un contenedor (un div en tu código) con una altura fija mínima. Así, cuando el widget cargue, no empujará el resto del diseño.
- Carga las fuentes con cuidado: El texto puede cambiar de tamaño o forma cuando se carga una tipografía web personalizada (FOIT/FOUT). Asegúrate de usar técnicas como font-display: swap o ajustar las fuentes de reserva para que el cambio de diseño sea mínimo.
- Cuidado con las inserciones tardías: Evita inyectar contenido nuevo (pop-ups, banners, noticias de última hora) por encima de lo que ya se está mostrando, a menos que sea una respuesta directa a una interacción del usuario.
En resumen, el CLS es la métrica de la «calma visual». Una web con un CLS bajo es una web sólida, donde cada elemento sabe dónde está y se queda ahí, permitiendo que el usuario lea, navegue y convierta sin sobresaltos.
¡Es el toque final para pasar de una web que funciona a una web que realmente da gusto usar!
