Abres una web, vas a pulsar un botón y, en el último momento, todo se desplaza porque arriba se carga un anuncio o una imagen. Resultado: has pulsado otra cosa sin querer. Un fastidio. Ese es exactamente el problema que Google mide con el CLS: Cumulative Layout Shift.
¿Qué valores de CLS son buenos?
- Menos de 0,1: bien. La página se mantiene estable mientras carga.
- De 0,1 a 0,25: regular. Los visitantes lo notan.
- Más de 0,25: mal. Resulta molesto y Google penaliza tu posicionamiento.
¿Qué provoca un CLS alto?
- Imágenes sin dimensiones: si tu HTML no indica el tamaño de una imagen, el navegador deja un hueco vacío y no lo rellena hasta que la imagen ha cargado. Todo lo que hay debajo baja de golpe.
- Anuncios que se cargan después: muy habitual en webs de noticias, y a menudo el principal culpable.
- Fuentes que se cargan más tarde: el texto aparece primero con una fuente del sistema y luego cambia a tu propia fuente. Si el tamaño es distinto, el texto se desplaza.
- Vídeos o iframes incrustados sin tamaño fijo
¿Qué puede hacer tu desarrollador web?
Acciones concretas:
- Indicar siempre
widthyheighten imágenes e iframes - Reservar el espacio de los anuncios con una altura de contenedor fija
- Usar
font-display: swapcon una buena fuente de respaldo - Cargar primero y sin interrupciones el contenido de la zona visible (above the fold)
¿Por qué es un factor de posicionamiento?
Google incluye el CLS entre las «Core Web Vitals». Desde 2021 cuenta oficialmente para el posicionamiento. Entre dos webs con el mismo contenido, la que tiene un CLS de 0,05 gana a la que tiene un CLS de 0,4.