Los mejores consejos para corregir problemas de CLS en Search Console

Table of contents

CLS: el contexto

Cumulative Layout Shift mide el movimiento inesperado del diseño. Cada vez que un elemento visible cambia de posición mientras la página carga o se interactúa con ella, se calcula una puntuación de desplazamiento. La suma acumulada es el CLS.

Causas habituales:

• Imágenes o iframes sin atributos explícitos de width y height
• Anuncios que se expanden después de que el contenido circundante ya se ha renderizado
• Contenido insertado dinámicamente (banners, avisos de cookies, widgets de chat) colocado encima del contenido existente
• Fuentes web que provocan un destello y reflujo al cargar (FOUT/FOIT)
• JavaScript de terceros que añade elementos de interfaz tras el renderizado inicial

Relacionado: Cómo corregir problemas de LCP en Search Console

Cómo medir CLS

Google Search Console

El informe de Core Web Vitals de Search Console es el punto de partida. Muestra las páginas marcadas como “Deficiente” (CLS ≥ 0,25) o “Necesita mejoras” (0,1–0,25), agrupadas por tipo de problema. Usa este informe para obtener la lista de URLs afectadas.

PageSpeed Insights

PageSpeed Insights (PSI) muestra tanto datos de laboratorio (simulación Lighthouse) como datos de campo de usuarios reales a través del Chrome UX Report (CrUX). Los datos de campo son más relevantes para el posicionamiento — reflejan experiencias reales de usuario, no solo una prueba sintética.

PSI solo simula la ventana gráfica inicial en la carga, por lo que puede no detectar el CLS provocado por el desplazamiento o la interacción del usuario. Para esos casos, usa Chrome DevTools.

Chrome DevTools y la extensión Web Vitals

La extensión Web Vitals de Chrome (mantenida por Google) muestra las puntuaciones CLS en tiempo real mientras navegas e interactúas con una página. Es la forma más rápida de reproducir los desplazamientos de diseño manualmente. El panel Performance de Chrome DevTools también resalta los registros de desplazamiento con anotaciones que muestran qué elementos se movieron y cuánto.

Cómo corregir los problemas de CLS

Añadir width y height a todas las imágenes e iframes

Esta es la corrección de mayor impacto para la mayoría de los sitios. Sin dimensiones explícitas, el navegador no sabe cuánto espacio reservar mientras carga una imagen, de modo que el contenido inferior se empuja hacia abajo cuando la imagen aparece.

<!-- Mal: sin dimensiones -->
<img src="photo.jpg" alt="…">

<!-- Bien: las dimensiones explícitas permiten al navegador reservar espacio -->
<img src="photo.jpg" alt="…" width="800" height="450">

El CSS moderno (aspect-ratio) logra el mismo efecto para imágenes responsivas, pero establecer los atributos width y height directamente en el HTML es el enfoque más fiable y la mayoría de los frameworks modernos y los CMS lo gestionan automáticamente.

Reservar espacio para los anuncios

Los anuncios son la causa más frecuente de CLS alto en sitios monetizados. Las redes publicitarias sirven tamaños dinámicos y, si no se reserva espacio, la página se redistribuye cuando carga el anuncio.

1. Reserva un contenedor fijo (min-height que coincida con tu tamaño de anuncio más habitual) antes de que cargue la etiqueta del anuncio.
2. No colapses el contenedor si no se sirve ningún anuncio — un marcador de posición vacío evita un segundo reflujo.
3. Ten especial cuidado con los anuncios situados cerca de la parte superior de la ventana gráfica. Los anuncios no fijos insertados sobre el pliegue provocan las peores puntuaciones CLS.
4. Usa los datos históricos de impresiones de tu red publicitaria para determinar qué tamaños de anuncio son más comunes en cada posición y ajusta el contenedor en consecuencia.

Evitar insertar contenido encima del contenido existente

Los banners de consentimiento de cookies, las notificaciones y los widgets de chat que se cargan de forma asíncrona y aparecen encima del contenido existente son una fuente frecuente de CLS. Opciones:

• Cárgalos en una superposición de posición fija (no afectan al flujo del documento).
• Preasigna espacio en el diseño si deben aparecer en línea.
• Para los banners de cookies en particular, considera colocarlos en la parte inferior de la pantalla — evita el CLS por completo y es igualmente válido legalmente.

Corregir la carga de fuentes web (FOIT y FOUT)

FOIT (Flash of Invisible Text) ocurre cuando el navegador oculta el texto hasta que carga una fuente personalizada. FOUT (Flash of Unstyled Text) ocurre cuando primero se muestra una fuente alternativa y luego se intercambia — la diferencia en las métricas tipográficas provoca un desplazamiento de diseño.

La solución es font-display: swap combinado con <link rel="preload"> para las fuentes críticas:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap provoca FOUT (texto visible pero sin estilo) en lugar de FOIT (texto invisible), lo que es mejor para CLS porque el texto es visible de inmediato. Para reducir aún más el impacto en la métrica del intercambio, usa la propiedad CSS size-adjust para que las métricas de la fuente alternativa coincidan con las de la fuente personalizada — esto minimiza el reflujo cuando la fuente personalizada entra en acción.

JavaScript de terceros

Los scripts de terceros (botones de compartir, widgets de comentarios, chat en vivo, popups de analítica) se cargan de forma asíncrona e inyectan elementos de interfaz después de que la página ya se ha renderizado. Para minimizar su impacto en CLS:

• Empuja los elementos visuales de terceros por debajo de la ventana gráfica inicial siempre que sea posible — el contenido más abajo en la página tiene más tiempo para cargar antes de que el usuario llegue a él.
• Predefine las dimensiones del contenedor antes de que se ejecute el script, para que el navegador ya sepa cuánto espacio reservar.
• Usa la pestaña Network de Chrome DevTools filtrada por orígenes de terceros para identificar qué scripts están contribuyendo a los desplazamientos de diseño.

Carga diferida y marcadores de posición

La carga diferida aplaza la carga de imágenes hasta que estén cerca de la ventana gráfica, lo que ahorra ancho de banda. Pero si no se establece un marcador de posición, el contenedor de la imagen colapsa a cero de altura y luego salta al abrirse cuando carga la imagen.

Asegúrate siempre de que los elementos con carga diferida tienen dimensiones explícitas o aspect-ratio definido mediante CSS, para que el navegador reserve el espacio correcto incluso antes de que cargue la imagen. Esto aplica tanto al atributo nativo loading="lazy" como a los cargadores diferidos basados en JavaScript.

CLS — Preguntas frecuentes 2026

¿Sigue siendo FID una señal de posicionamiento en 2026?

No. Google retiró oficialmente FID (First Input Delay) como Core Web Vital en marzo de 2024 y lo reemplazó con INP (Interaction to Next Paint). El trío CWV actual es LCP, INP y CLS. Actualiza cualquier documentación interna o herramienta que todavía haga referencia a FID.

¿Cuál es una buena puntuación CLS a la que apuntar?

Los umbrales de Google: por debajo de 0,1 es “bueno”; 0,1–0,25 es “necesita mejoras”; por encima de 0,25 es “deficiente”. Apunta a estar por debajo de 0,1. La puntuación se mide en el percentil 75 de las cargas de página en los datos de campo CrUX.

¿Afecta CLS al posicionamiento?

Sí, pero es una señal entre muchas. Los Core Web Vitals son un factor de posicionamiento relacionado con la experiencia de página desde mediados de 2021. Un CLS deficiente no hundirá una página sólida, pero puede ser el factor decisivo en un empate y perjudicará directamente las métricas de participación del usuario (tasa de rebote, profundidad de sesión) por sus propios méritos.

Mi puntuación en PSI muestra un CLS bueno, pero Search Console marca la página como deficiente — ¿cuál tiene razón?

Confía en Search Console (datos de campo) frente a los datos de laboratorio de PSI cuando haya conflicto. Las pruebas de laboratorio de PSI solo simulan la carga inicial de la ventana gráfica; pasan por alto el CLS provocado por el desplazamiento del usuario, el intercambio de fuentes en conexiones lentas o los anuncios cargados tras la interacción. Los datos de campo CrUX en Search Console reflejan a usuarios reales en condiciones reales.

Lecturas relacionadas:

• Cómo corregir problemas de LCP en Search Console
• Cómo optimizar la velocidad de tu sitio web
• Auditoría de SEO técnico

La versión resumida

Si lees esto porque el flujo de trabajo que describe te está quitando toda la semana, ese es exactamente el tipo de bucle para el que desarrollo agentes de IA. Dos plazas de desarrollo abiertas a la vez.

Actualizado para mayo de 2026

La historia de Google en 2026 son los AI Overviews en todas partes: el experimento SGE de 2023 se convirtió en una función predeterminada en mayo de 2024 y ahora aparece en aproximadamente el ~60% de las consultas informativas en EE. UU. Para operadores de SEO y publicidad:

• El CTR orgánico en consultas con AI Overviews ha caído entre un 15 y un 30% de media según estudios publicados de Ahrefs, Authoritas y similares (datos 2024–25).
• Google Ads rebautizó varias funciones de PMax como AI-powered Search; la interfaz de gestión de campañas ahora sugiere por defecto estrategias de puja con IA.
• Search Console añadió un filtro de “impresiones en AI Overview” a finales de 2025 — si algún artículo aquí hace referencia a los informes de GSC, el manual necesita una revisión.
• Los ingresos publicitarios de Google superaron los ~265.000 millones de dólares en 2024; Search sigue representando aproximadamente el 57% de los ingresos totales de Alphabet.

La respuesta a “cómo gana dinero Google” en 2026: siguen siendo los anuncios de Search (dominantes), pero los anuncios de YouTube, Cloud y las suscripciones (YouTube Premium + Google One) son líneas materiales ahora.