Cómo reducir el Cumulative Layout Shift (CLS) y mejorar tu posicionamiento SEO
Si alguna vez has intentado hacer clic en un botón de una web y, justo antes de pulsar, el contenido ha saltado de sitio y has acabado en otra página... has sufrido en carne propia lo que Google mide como Cumulative Layout Shift (CLS). Esta métrica forma parte de los Core Web Vitals, el conjunto de indicadores que Google utiliza para evaluar la experiencia de usuario y que influye directamente en el ranking de búsqueda.
Reducir el Cumulative Layout Shift (CLS) no es solo una cuestión técnica: es una decisión de negocio. Un CLS elevado aumenta la tasa de rebote, daña la conversión y penaliza el posicionamiento SEO. En esta guía encontrarás las causas exactas, cómo diagnosticarlo y las acciones concretas que puedes implementar hoy mismo.
---
¿Qué es el Cumulative Layout Shift y por qué importa para el SEO?
El Cumulative Layout Shift mide la inestabilidad visual de una página durante su carga. En términos técnicos, calcula la suma de todas las puntuaciones de cambio de diseño inesperado que ocurren mientras el usuario interactúa con la página.
Google clasifica los resultados así:
- Bueno: CLS inferior a 0,1
- Necesita mejora: entre 0,1 y 0,25
- Malo: superior a 0,25
Desde mayo de 2021, los Core Web Vitals son un factor de ranking oficial. Según datos de Google, el 41 % de las páginas web analizadas en el informe CrUX (Chrome User Experience Report) tienen un CLS por encima del umbral recomendado. Eso significa que más de un tercio de los sitios activos están potencialmente penalizados por esta métrica.
Además, el impacto va más allá del SEO: estudios del propio Google muestran que mejorar los Core Web Vitals puede reducir el abandono de página hasta en un 24 % en algunos sectores, especialmente en e-commerce y medios de comunicación.
---
Causas más frecuentes del CLS elevado
Para reducir el Cumulative Layout Shift de forma eficaz, es imprescindible entender sus causas. La mayoría de los problemas se repiten en patrones reconocibles.
Imágenes y vídeos sin dimensiones declaradas
Cuando el navegador carga una imagen o un vídeo sin conocer de antemano su tamaño, reserva espacio cero. Al cargarse el recurso, el contenido circundante se desplaza. Es la causa número uno de CLS alto en webs corporativas.
Ejemplo práctico: Una tienda online con 200 fichas de producto que no declara width y height en sus etiquetas
La solución es tan sencilla como añadir las dimensiones explícitas:
`html
`
Fuentes web con FOUT o FOIT
Las fuentes personalizadas (Google Fonts, Adobe Fonts, fuentes propias) provocan dos problemas: FOUT (Flash of Unstyled Text) y FOIT (Flash of Invisible Text). Cuando la fuente personalizada se carga después del texto, el cambio de tipografía puede desplazar otros elementos.
Configurar font-display: optional o font-display: swap en el CSS, combinado con la precarga de fuentes críticas, reduce este efecto considerablemente.
Banners de cookies, anuncios y widgets de terceros
Los banners de consentimiento de cookies que se insertan dinámicamente en la parte superior de la página son una de las causas más comunes de CLS alto en sitios españoles, especialmente desde la entrada en vigor del RGPD. Un banner que aparece 500 ms después de la carga desplaza todo el contenido hacia abajo.
Lo mismo ocurre con los scripts de terceros: chatbots, banners publicitarios, widgets de redes sociales o formularios embebidos que se cargan de forma asíncrona sin un espacio reservado previamente.
Dato relevante: Según un análisis de HTTP Archive de 2023, los scripts de terceros son responsables de aproximadamente el 30 % de los problemas de CLS en sitios de mediana y gran escala.
Contenido inyectado dinámicamente
Los carruseles, sliders, acordeones y contenido generado vía JavaScript que se inserta en el DOM después del primer render son fuentes habituales de inestabilidad visual. Si el contenido se inyecta sin que el espacio esté previamente reservado, el CLS aumenta.
Animaciones CSS que modifican el flujo del documento
No todas las animaciones son iguales. Las que utilizan propiedades como top, left, margin o padding alteran el flujo del documento y contribuyen al CLS. Las animaciones basadas en transform y opacity, en cambio, no afectan al layout y son seguras.
---
Cómo diagnosticar el CLS de tu web
Antes de actuar, necesitas medir. Estas son las herramientas más fiables para diagnosticar el CLS y priorizar correcciones.
Google PageSpeed Insights
Es el punto de partida recomendado. Introduce la URL de tu página y obtendrás tanto los datos de campo (experiencia real de usuarios de Chrome en los últimos 28 días, vía CrUX) como los datos de laboratorio (simulación controlada). Ambas métricas son complementarias: los datos de campo reflejan la realidad, los de laboratorio ayudan a reproducir y depurar el problema.
Chrome DevTools: pestaña Performance
Graba una sesión de carga en Chrome DevTools y busca los Layout Shift en la línea de tiempo. Cada evento de desplazamiento queda registrado con su puntuación individual y el elemento responsable. Es la herramienta más precisa para identificar el nodo exacto del DOM que genera el problema.
Informe Core Web Vitals de Google Search Console
Google Search Console muestra el CLS agrupado por grupos de URLs similares en tu sitio. Si tienes un e-commerce con 5.000 fichas de producto con el mismo problema, aparecerán todas agrupadas bajo un mismo patrón, lo que facilita la priorización.
Web Vitals Extension (Chrome)
La extensión oficial de Google Web Vitals muestra el CLS en tiempo real mientras navegas por tu web. Útil para auditorías rápidas sin necesidad de abrir herramientas de desarrollo.
---
Estrategias prácticas para reducir el CLS
1. Reservar espacio para todos los recursos multimedia
La regla de oro es simple: nunca cargues un recurso sin que el navegador sepa cuánto espacio va a ocupar. Esto aplica a imágenes, vídeos, iframes y cualquier contenido embebido.
Para imágenes responsivas modernas, además de width y height, utiliza el atributo aspect-ratio en CSS:
`css
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
`
Para iframes (YouTube, Vimeo, mapas de Google), utiliza el patrón de contenedor con padding-bottom proporcional o, mejor aún, la propiedad aspect-ratio de CSS moderno.
2. Gestionar el banner de cookies correctamente
El error más habitual es insertar el banner de cookies en el de forma dinámica, desplazando el contenido. Las alternativas son:
- Posición fija o sticky (
position: fixed): el banner flota sobre el contenido sin desplazarlo. No contribuye al CLS porque no ocupa espacio en el flujo del documento. - Reservar el espacio en el HTML inicial: si el banner debe ocupar espacio, que ese espacio esté definido desde el servidor antes de que JavaScript lo rellene.
Esta corrección puede reducir el CLS en hasta 0,15 puntos en sitios que usan plataformas CMP (Consent Management Platform) mal configuradas.
3. Precargar fuentes críticas
Añade para las fuentes que se usan en el contenido visible above the fold:
`html
`
Combínalo con font-display: optional en tu @font-face para evitar cualquier cambio de tipografía si la fuente no se carga a tiempo. Si la experiencia de marca requiere la fuente personalizada sí o sí, usa font-display: swap y asegúrate de que la fuente de sistema de fallback tenga un tamaño similar para minimizar el desplazamiento.
4. Controlar los scripts de terceros
Los scripts de terceros deben cargarse con atributo defer o async, y los contenedores de sus salidas deben tener dimensiones fijas definidas en CSS antes de que el script se ejecute. Para anuncios programáticos (Google AdSense, DV360), utiliza siempre contenedores con min-height explícito:
`css
.ad-container {
min-height: 250px; / tamaño mínimo del banner /
width: 300px;
}
`
5. Usar content-visibility con cuidado
La propiedad CSS content-visibility: auto puede mejorar el rendimiento de renderizado en páginas largas, pero mal implementada puede generar CLS al cambiar la altura estimada del contenido diferido. Si la usas, combínala siempre con contain-intrinsic-size para dar una estimación de altura al navegador:
`css
.seccion-larga {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
`
6. Auditar los plugins y temas de CMS
Si tu web está construida sobre WordPress, Prestashop o cualquier CMS, muchos plugins añaden scripts y estilos que generan CLS sin que el equipo técnico lo sepa. Una auditoría periódica de los recursos de terceros cargados en tu web es imprescindible. Herramientas como Lighthouse o WebPageTest permiten identificar qué scripts de terceros contribuyen más al CLS.
---
El impacto real del CLS en el negocio
Más allá del ranking, el CLS tiene consecuencias económicas directas que los directores de marketing deben conocer.
E-commerce: Un CLS elevado en páginas de producto o en el proceso de checkout provoca clics accidentales, errores en formularios y abandonos de carrito. Según estimaciones de Google basadas en análisis de grandes retailers, reducir el CLS por debajo de 0,1 puede incrementar la tasa de conversión entre un 5 % y un 15 % dependiendo del sector.
Webs de captación de leads: Los formularios de contacto que se desplazan durante la carga hacen que el usuario pierda lo que estaba escribiendo o haga clic en el botón equivocado. La tasa de envío de formularios mejora directamente al estabilizar el layout.
Medios digitales y blogs: Los artículos de blog con anuncios mal configurados que desplazan el texto mientras se lee aumentan el porcentaje de rebote y reducen el tiempo en página, dos señales negativas para el SEO.
---
Plan de acción: prioridades para mejorar el CLS
Si partes de cero, este es el orden de prioridad recomendado para reducir el CLS de forma eficiente:
- Audita con PageSpeed Insights y Search Console para identificar las páginas y patrones más afectados.
- Corrige las dimensiones de imágenes en todas las plantillas del CMS (una sola corrección puede afectar a miles de páginas).
- Mueve el banner de cookies a posición fija y revisa la configuración de tu CMP.
- Precarga las fuentes críticas y ajusta
font-display. - Define contenedores fijos para anuncios y widgets de terceros.
- Revisa y actualiza plugins del CMS que inyecten contenido dinámico.
- Mide de nuevo y compara los datos de campo en Search Console tras 28 días.
Este proceso, bien ejecutado, puede llevar un CLS de 0,3 a por debajo de 0,1 en pocas semanas. No es un proyecto de meses: es un sprint técnico enfocado.
---
Conclusión
Reducir el Cumulative Layout Shift (CLS) es una de las inversiones con mayor retorno dentro del SEO técnico. Sus efectos son simultáneos: mejora el ranking en Google, aumenta la conversión, reduce el rebote y ofrece una experiencia de usuario que genera confianza en tu marca.
Las empresas que ya trabajan activamente en sus Core Web Vitals tienen una ventaja competitiva real frente a competidores que aún no han abordado estos problemas. El CLS es, además, uno de los más accionables: a diferencia del LCP o el FID, que a veces requieren cambios de infraestructura, la mayoría de los problemas de CLS se resuelven con ajustes de CSS, atributos HTML y una auditoría de scripts de terceros.
---
¿Quieres mejorar el CLS y el SEO técnico de tu web?
En Comunicua somos especialistas en SEO técnico y Core Web Vitals para empresas españolas. Realizamos auditorías completas de rendimiento web, identificamos los problemas que frenan tu posicionamiento y los resolvemos con un plan de acción claro y medible.
Si quieres que analicemos el CLS de tu web y te presentemos un diagnóstico gratuito, visita comunicua.com/contacto y cuéntanos tu caso. Tu competencia no espera.