Un usuario intenta pulsar un botón en una página que todavía está cargando, y justo en ese instante aparece un banner publicitario que desplaza todo el contenido hacia abajo, haciendo que el clic caiga sobre otro elemento distinto al que se quería pulsar. Ese salto inesperado es exactamente lo que mide el CLS (Cumulative Layout Shift), una de las tres métricas que componen los Core Web Vitals de Google.
Qué cuantifica exactamente
El CLS mide la cantidad total de desplazamiento visual inesperado que sufre una página mientras carga, combinando qué proporción de la pantalla se ve afectada por cada salto y qué distancia se desplazan los elementos. Cuanto más bajo el valor, más estable visualmente se percibe la carga de la página; un valor alto indica una experiencia molesta e inestable.
Las causas más habituales de un mal CLS
- Imágenes o vídeos sin dimensiones definidas de antemano en el código, que empujan el contenido cuando finalmente terminan de cargar.
- Anuncios o banners que se insertan dinámicamente sin reservar previamente el espacio que van a ocupar.
- Fuentes tipográficas personalizadas que tardan en cargar y provocan un cambio de tamaño del texto al sustituir la fuente por defecto.
- Contenido insertado dinámicamente por encima de contenido ya visible, típico de banners de cookies mal implementados.
Por qué a Google le importa tanto un detalle aparentemente menor
Un desplazamiento inesperado no solo resulta molesto: puede provocar clics accidentales en elementos equivocados, como aceptar sin querer una suscripción de pago o hacer clic en un anuncio en lugar del botón que realmente se quería pulsar. Google lo trata como un indicador directo de mala experiencia de usuario, con el peso suficiente como para influir en el posicionamiento SEO.
Cómo se soluciona en la práctica
Reservar siempre un espacio fijo para imágenes y vídeos antes de que carguen, definiendo sus dimensiones en el propio código. Reservar espacio también para banners o elementos que se cargan de forma dinámica, en lugar de insertarlos sin previo aviso encima del contenido ya visible. Y cargar las fuentes tipográficas de forma que minimicen el cambio visual al sustituir la fuente temporal por la definitiva.