CLS es la métrica que previene la frustración de estar a punto de hacer clic en un botón y que se mueva porque una imagen ha cargado tarde. Google la mide con una fórmula que combina impacto y distancia del movimiento.
Clasificación
- Bueno: ≤ 0,1
- Necesita mejora: entre 0,1 y 0,25
- Malo: > 0,25
Causas típicas
- Imágenes sin dimensiones: el navegador no reserva espacio, cuando carga empuja todo
- Banners de cookies o ads que aparecen tarde en la parte superior
- Fuentes que cambian el tamaño del texto al cargar (FOUT: Flash of Unstyled Text)
- Contenido inyectado por JS arriba del DOM existente
- Iframes sin dimensiones fijas
Cómo arreglarlo
- Siempre width y height en imágenes, incluso si luego las re-escalas con CSS. El navegador reserva el espacio proporcional.
font-display: swap+ preload de las fuentes críticas- Banner de cookies que no empuje contenido: mejor sobre-impreso (fixed/sticky) que en flujo normal
- Ads con tamaño reservado antes de que carguen
- Skeleton screens mientras carga contenido dinámico, con dimensiones que coincidan con el contenido final
- No modificar el DOM arriba del viewport tras la carga inicial
Next.js y CLS
El componente next/image obliga a dar width y height (o fill con un contenedor dimensionado), lo cual reduce CLS significativamente. Es una de las razones para usarlo siempre en vez de <img>.
Medir CLS
- PageSpeed Insights
- Chrome DevTools > Performance > capa Layout Shifts
- WebPageTest con opción Chrome User Experience Report
Errores de diagnóstico comunes
- Medir solo en desktop rápido y olvidar móvil lento donde el CLS es mucho peor
- No considerar que el CLS se acumula durante los primeros 5 segundos de visita
- Pasar con CLS de 0,12 pensando que está ok (está en zona amarilla)
Incluimos CLS en cada auditoría. Pide la tuya gratis.