Has entrado en una web de empresa, empiezas a leer el titular y, de repente, el texto «salta» hacia abajo porque aparece un banner de cookies o una imagen sin dimensiones reservadas. Esa inestabilidad no es un detalle estético: mide CLS (Cumulative Layout Shift), uno de los Core Web Vitals que Google sigue usando como señal de experiencia en 2026.
Este artículo explica qué cuenta CLS, qué umbrales vigilar, cómo se relaciona con LCP e INP, y qué cambios concretos suelen estabilizar una web corporativa sin renunciar al diseño.
Qué es CLS y qué movimientos penaliza
CLS resume cuánto se mueven elementos visibles sin que el usuario interactúe. Cada desplazamiento inesperado suma puntuación; la métrica final es la suma de las peores «ventanas de sesión» durante la visita.
Suele dispararse por:
- Imágenes o vídeos sin
widthyheight(o ratio reservado con CSS). - Fuentes web que cambian el tamaño del texto al cargar (FOUT/FOIT).
- Banners, avisos legales o barras de cookies que se insertan encima del contenido.
- Anuncios o widgets de terceros que reservan espacio tarde.
- Contenido inyectado por JavaScript después del primer pintado.
La documentación de web.dev sobre CLS detalla qué desplazamientos entran en el cálculo y cuáles quedan fuera (por ejemplo, tras una interacción del usuario).
Umbrales: cuándo tu web está estable
Como referencia habitual de Core Web Vitals:
- Bueno: 0,1 o menos.
- A mejorar: entre 0,1 y 0,25.
- Pobre: por encima de 0,25.
Evalúa el percentil 75 de usuarios reales (Search Console, CrUX o Analytics con Web Vitals). Un test de laboratorio en PageSpeed ayuda a localizar el elemento que salta, pero no sustituye datos de campo si tu tráfico es estable.
CLS frente a LCP e INP
Core Web Vitals cubren carga percibida (LCP), estabilidad (CLS) y respuesta a interacciones (INP). Una home puede pintar el hero rápido y aun así frustrar si el menú sticky empuja el contenido o si el formulario de contacto «baila» al cargar una fuente.
Prioriza CLS cuando escuchas «la página se mueve sola», cuando los informes señalan imágenes sin tamaño, o cuando tras publicar una campaña nuevos scripts empeoran la experiencia en móvil.
Causas habituales en webs de empresa
- Hero o galería sin dimensiones en plantillas del CMS.
- Banner de cookies o aviso RGPD que ocupa espacio tras el primer render.
- Iconos o fuentes externas que cambian la altura de botones y menús.
- Embeds de vídeo o mapas sin contenedor con aspect-ratio fijo.
- Personalización con etiquetas que inyectan HTML en el
<head>o al inicio del body.
Los formatos WebP y AVIF reducen peso, pero no sustituyen reservar espacio: una imagen ligera sin tamaño sigue provocando CLS.
Cómo medir CLS con herramientas accesibles
- PageSpeed Insights: lista desplazamientos de layout en laboratorio.
- Chrome DevTools → Performance: eventos «Layout Shift» en la línea de tiempo.
- Search Console (Experiencia de página): tendencia CLS por URL en datos reales.
- Web Vitals extension o RUM: útil para comparar antes y después en home, contacto y landings de campaña.
Graba la sesión en móvil con red limitada: muchos saltos aparecen solo cuando el banner legal o el chat cargan unos segundos después del hero.
Acciones que suelen reducir CLS
Reservar espacio en imágenes y vídeos
Incluye width y height en HTML o usa aspect-ratio en CSS. Evita lazy loading mal aplicado al hero: el problema no es solo LCP, también el hueco vacío que luego se rellena.
Estabilizar tipografías
Usa font-display: swap o métricas de fallback (size-adjust) para que el texto no cambie de altura al cargar la fuente corporativa. Precarga solo las variantes que realmente usa la home.
Cookies, avisos y barras fijas
Reserva altura mínima con un placeholder o muestra el banner en una capa que no empuje el contenido principal (overlay o barra inferior). Planifica el aviso legal en el diseño, no como parche posterior al desarrollo.
Controlar scripts y widgets
Retrasa chat, mapas y etiquetas de marketing con la misma disciplina que en scripts de terceros. Si un widget necesita hueco, decláralo en el layout antes de que el script responda.
Contenido dinámico y listados
En blog o catálogo, usa skeletons con la altura aproximada del bloque final. La paginación y los filtros AJAX deben mantener fija la zona de resultados para no mover el pie de página.
Errores que empeoran el CLS sin que lo notes
- Insertar Google Fonts sin estrategia de fallback y sin reservar línea base.
- Cargar un slider que cambia la altura del bloque hero entre slides.
- Mostrar precios o stock vía API sin contenedor de altura mínima.
- Añadir un «top bar» de promoción en campaña sin actualizar el CSS global.
Checklist antes de dar por cerrada una mejora
- ¿PageSpeed o DevTools señalan el mismo elemento en escritorio y móvil?
- ¿Has comparado el percentil 75 en Search Console tras dos semanas?
- ¿LCP e INP siguen en verde en las mismas URLs críticas?
- ¿Has probado la ruta con banner de cookies aceptado y rechazado?
Conclusión
CLS responde a una pregunta directa: «¿Puedo leer y pulsar sin que la página me mueva el contenido?». En 2026, con más componentes de terceros y landings de campaña, ignorarlo es regalar microfrustraciones a quien ya llegó desde búsqueda o anuncio. Mide en tus URLs críticas, reserva espacio para imágenes, fuentes y avisos legales, y alinea marketing y desarrollo con el mismo rigor que dedicas al copy del hero.
Si quieres priorizar Core Web Vitals con impacto medible en conversión, en AATSOFT auditamos home y landings clave y proponemos cambios acotados a tu stack actual.
