Has entrado a una web, has empezado a leer un artículo y justo cuando ibas a pulsar un enlace, el contenido se ha desplazado hacia abajo y has pulsado un anuncio. Eso es un layout shift. Cuando ese desplazamiento se acumula durante la carga de la página, tienes un problema de CLS: Google lo mide, lo registra y lo usa como señal de calidad.
El CLS (Cumulative Layout Shift) es probablemente la métrica de Core Web Vitals más fácil de entender y la más molesta para los usuarios. A diferencia del LCP o el INP, que miden tiempos de carga e interacción, el CLS mide estabilidad visual. Y un sitio rápido con contenido que salta es peor experiencia que un sitio lento pero estable.
Qué es el CLS y por qué Google lo penaliza
El CLS cuantifica los desplazamientos inesperados de elementos visibles durante la vida de la página. No mide todos los movimientos, solo los que el usuario no ha provocado. Si pulsas un botón y el contenido se expande, eso no cuenta. Si una imagen carga tarde y empuja el texto hacia abajo, eso sí.
Google establece tres umbrales para el CLS en el percentil 75 de datos de campo:
- Bueno: 0.1 o inferior.
- Necesita mejoras: entre 0.1 y 0.25.
- Pobre: superior a 0.25.
El CLS forma parte del conjunto de Core Web Vitals junto con el LCP y el INP. Un CLS alto no solo afecta al posicionamiento; afecta directamente a la experiencia de usuario, a la tasa de rebote y a la percepción de profesionalidad de tu sitio.
La fórmula del CLS combina dos factores: la fracción del viewport que se ha visto afectada por el desplazamiento (impact fraction) y la distancia que se ha desplazado el elemento (distance fraction). Un elemento grande que se mueve mucho genera más CLS que un elemento pequeño que se desplaza levemente.
Cómo medir el CLS: herramientas y qué reportan
Existen herramientas de laboratorio (simulan la carga en condiciones controladas) y de campo (datos de usuarios reales). Para el CLS, los datos de campo son más fiables porque capturan desplazamientos que ocurren después de la carga inicial, durante la interacción del usuario.
PageSpeed Insights muestra ambos tipos de datos. Los datos de campo vienen del Chrome UX Report (CrUX) y representan la experiencia real de los usuarios que visitan tu sitio con Chrome. Los datos de laboratorio vienen de Lighthouse y simulan una carga en condiciones específicas.
Chrome DevTools — pestaña Performance. Graba la carga de la página y busca los bloques marcados como “Layout Shift” en el timeline. Cada bloque muestra qué elementos se desplazaron, cuánto CLS aportaron y en qué momento de la carga ocurrió.
Layout Shift Regions en DevTools. Activa esta opción desde el menú de Rendering en DevTools. Cada vez que un elemento cambia de posición, se resalta visualmente con un borde azul. Es la forma más intuitiva de identificar qué está causando CLS en tiempo real.
Google Search Console — informe de Core Web Vitals. Agrupa tus URLs por rendimiento de CLS y muestra tendencias históricas. No identifica el elemento específico, pero señala qué plantillas de página o secciones del sitio tienen problemas.
Web Vitals Extension. Muestra el CLS acumulado en tiempo real mientras navegas por tu sitio. Útil para detectar layout shifts que ocurren durante la interacción, no solo durante la carga.
Las causas más frecuentes de CLS alto
Imágenes y videos sin dimensiones
Cuando una imagen no tiene atributos width y height definidos, el navegador no sabe cuánto espacio reservar hasta que la descarga. Mientras tanto, renderiza el resto del contenido. Cuando la imagen finalmente carga, empuja todo el contenido inferior hacia abajo. Según datos del HTTP Archive, esta es la causa más frecuente de CLS, afectando al 63% de las webs con puntuación alta.
Anuncios y banners dinámicos
Los espacios publicitarios que se rellenan con JavaScript después de la carga inicial son culpables frecuentes. Un banner de Google Ads que aparece entre el título y el primer párrafo empuja todo el contenido visible y genera un layout shift significativo.
Fuentes web con FOUT
El Flash of Unstyled Text ocurre cuando el navegador muestra texto con una fuente de sistema y después la reemplaza por la fuente personalizada cuando termina de descargarla. Si las métricas de ambas fuentes son diferentes (height, width, spacing), el cambio de fuente provoca desplazamientos en los bloques de texto.
Contenido inyectado dinámicamente
Banners de cookies, barras de notificación, pop-ups de newsletter y cualquier elemento que se inserte en el DOM después del renderizado inicial puede causar CLS si desplaza contenido existente. Esto es especialmente problemático cuando el elemento se inserta en la parte superior de la página.
Iframes sin dimensiones
Los iframes (como embeds de YouTube o mapas de Google) sin dimensiones explícitas se comportan igual que las imágenes sin dimensiones: el navegador no sabe cuánto espacio reservar hasta que el contenido del iframe carga.
Cómo corregir CLS causado por imágenes sin dimensiones
La solución es reservar espacio para cada imagen antes de que se descargue. Hay tres formas de hacerlo:
Atributos width y height en el HTML. La forma más directa. Define los atributos directamente en la etiqueta <img>. Los navegadores modernos calculan el aspect ratio a partir de estos atributos y reservan el espacio correspondiente, incluso si el CSS modifica el tamaño final con width: 100%.
CSS aspect-ratio. La propiedad aspect-ratio es la solución moderna para reservar espacio. Aplica aspect-ratio: 16/9 (o la proporción que corresponda) al contenedor o directamente a la imagen. El navegador reserva el espacio antes de descargar el recurso.
Contenedores con padding-top (legacy). Antes de aspect-ratio, la técnica estándar era usar un contenedor con padding-top porcentual (padding-top: 56.25% para 16:9). Funciona pero es menos legible que aspect-ratio. Si tu proyecto necesita compatibilidad con navegadores antiguos, esta técnica sigue siendo válida.
Para cada tipo de imagen en tu sitio, la regla es la misma: el navegador debe conocer las dimensiones antes de iniciar la descarga. Esto se aplica a imágenes hero, thumbnails, avatares, iconos SVG con tamaño variable y cualquier recurso visual que ocupe espacio en el layout.
Mantener el LCP bajo control y el CLS dentro de umbrales saludables son objetivos complementarios: optimizar imágenes con dimensiones explícitas y formatos modernos mejora ambas métricas simultáneamente.
Cómo corregir CLS causado por anuncios y banners
Los anuncios son el caso más difícil porque no controlas el contenido que se carga, pero sí controlas el espacio que se le reserva.
Contenedores con dimensiones fijas. Define un <div> con las dimensiones exactas del formato publicitario antes de que el script de ads lo rellene. Para un banner de 728x90, el contenedor debe tener min-height: 90px y width: 728px (o el equivalente responsive). El espacio existe desde el primer renderizado y el anuncio se carga dentro sin desplazar nada.
Posición fixed o sticky para anuncios adhesivos. Los anuncios que deben permanecer visibles durante el scroll (sticky headers, footers adhesivos) deben usar position: sticky o position: fixed. Estos posicionamientos sacan el elemento del flujo del documento y no causan layout shifts cuando aparecen o desaparecen.
Evitar inserción de anuncios above-the-fold. Si el anuncio se carga con retraso y se inserta entre contenido visible, el CLS será alto. Coloca los anuncios en posiciones que no desplacen contenido crítico o asegúrate de que el espacio está reservado desde el HTML estático.
Placeholder visual. Mientras el anuncio carga, muestra un placeholder con un fondo gris claro o un esqueleto de carga que mantenga las dimensiones del espacio reservado. Esto no solo previene CLS sino que indica al usuario que algo va a aparecer en ese espacio.
Para webs que dependen de ingresos publicitarios, mantener un CLS bajo requiere disciplina en la implementación, pero el impacto en experiencia de usuario y en velocidad web percibida justifica el esfuerzo técnico.
Preguntas frecuentes sobre CLS
¿Qué CLS es aceptable según Google?
Google clasifica el CLS en tres niveles: bueno (0.1 o inferior), necesita mejoras (entre 0.1 y 0.25) y pobre (superior a 0.25). El objetivo es mantener el CLS en 0.1 o menos en el percentil 75 de los datos de campo.
¿Los anuncios de Google Ads siempre causan CLS?
No necesariamente. Los anuncios causan CLS cuando no se reserva espacio para ellos antes de que carguen. La solución es definir un contenedor con las dimensiones exactas del anuncio usando CSS (min-height o aspect-ratio) para que el espacio exista antes de que el anuncio se cargue.
¿Cómo sé qué elemento está causando el CLS?
En Chrome DevTools, abre la pestaña Performance, graba la carga de la página y busca los eventos Layout Shift en el timeline. Cada uno muestra qué elementos se movieron y cuánto CLS aportaron. También puedes activar Layout Shift Regions en el menú de rendering para ver los cambios en tiempo real.
Si tu sitio tiene un CLS superior a 0.1 y no consigues identificar o corregir las causas, necesitas un diagnóstico técnico que analice los layout shifts en datos de campo y de laboratorio. Contacta con nosotros para auditar la estabilidad visual de tu web y aplicar las correcciones necesarias para cumplir con los umbrales de Core Web Vitals.
Comparte este artículo
Si te ha resultado útil este contenido, compártelo con tus colegas.
Preguntas Frecuentes
¿Con qué frecuencia publican contenido nuevo?
Publicamos artículos nuevos semanalmente, enfocados en las últimas tendencias de SEO técnico, casos de estudio reales y mejores prácticas. Suscríbete a nuestro newsletter para no perderte ninguna actualización.
¿Los consejos son aplicables a cualquier tipo de sitio web?
Nuestros consejos se adaptan a diferentes tipos de sitios: ecommerce, blogs, sitios corporativos y aplicaciones web. Siempre indicamos cuándo una técnica es específica para cierto tipo de sitio o requerimientos técnicos.
¿Puedo implementar estas técnicas yo mismo?
Muchas técnicas básicas puedes implementarlas tú mismo siguiendo nuestras guías paso a paso. Para optimizaciones avanzadas o auditorías completas, recomendamos consultar con especialistas en SEO técnico como nuestro equipo.
¿Ofrecen servicios de consultoría personalizada?
Sí, ofrecemos servicios de consultoría SEO técnica personalizada, auditorías completas y optimización integral. Contáctanos para discutir las necesidades específicas de tu proyecto y cómo podemos ayudarte.
