Cumulative Layout Shift (CLS)

Qué comprueba esta auditoría

Lee el CLS de PageSpeed Insights. CLS es una puntuación sin unidades: la suma acumulada de cada cambio de layout inesperado durante la carga, ponderada por cuánto se movió el viewport y a qué distancia.

Valor de CLS	Veredicto
≤ 0,1	Bueno
0,1-0,25	Mejorable
> 0,25	Pobre

Por qué importa

Una página que salta es una página frustrante. Pulsas un botón, la página se mueve, pulsas lo que no era. Estás leyendo un párrafo, carga un anuncio, el párrafo se desplaza. Los cambios de layout son una de las métricas más correlacionadas con el rebote.

CLS es el tercer Core Web Vital junto con LCP e INP. Es además el más fácil de arreglar una vez identificas los elementos culpables: la mayor parte del CLS viene de un puñado de patrones concretos.

Cómo solucionarlo

1. Reserva espacio para imágenes y embeds. Define siempre los atributos width y height (o aspect-ratio en CSS):

<img src="/hero.webp" width="1200" height="600" alt="..." />

El navegador reserva la caja antes de que la imagen cargue. Sin ello, la imagen aparece y el texto inferior se desplaza hacia abajo.

2. Reserva espacio para los anuncios. Si usas AdSense o similar, fija una altura mínima al contenedor que coincida con el tamaño de anuncio más común:

.ad-slot {
  min-height: 250px;
}

3. Evita que las webfonts carguen tarde. Usa font-display: swap (el texto se renderiza primero con la fuente de respaldo y cambia cuando llega la webfont: CLS pequeño) o font-display: optional (sin swap; mejor CLS, peor branding). Una woff2 auto-alojada con preload minimiza la ventana de swap.

4. No insertes contenido por encima de lo que ya hay. Los banners de cookies, los prompts de “suscríbete” y los toasts de “tienes una notificación nueva” que empujan el contenido hacia abajo = CLS garantizado. Posiciónalos como overlays (position: fixed).

5. Usa transforms de CSS para animaciones, no top/left. transform: translateY() no provoca cambios de layout. Animar top sí.

Preguntas frecuentes

¿Cómo se puntúa el CLS?

La puntuación es la peor ventana de 5 segundos de cambios de layout durante la sesión, no la suma de toda la vida útil. Google lo actualizó en 2021 para no penalizar desproporcionadamente las páginas largas.

¿Y los shifts iniciados por el usuario?

Los clics, taps y envíos de formulario que cambian el layout quedan excluidos del CLS durante 500 ms tras la interacción. Así que expandir un acordeón no cuenta, solo los shifts “sorpresa”.

¿Por qué mi CLS dispara en móvil pero no en escritorio?

Los viewports móviles son más estrechos, así que un shift de N píxeles supone una fracción mayor de la pantalla. Misma causa, mayor penalización. Prueba siempre en el perfil móvil de PageSpeed.