¿Qué es el CLS (Cumulative Layout Shift)?

Definición

El CLS (Cumulative Layout Shift) es la métrica de los Core Web Vitals que mide la estabilidad visual de una página. Cuantifica cuánto se mueven inesperadamente los elementos visibles durante la carga.

¿Alguna vez intentó hacer clic en un botón y este "saltó" hacia abajo porque una imagen se cargó arriba? Eso es un layout shift. Es una de las experiencias más frustrantes para los usuarios y Google lo penaliza directamente.

Umbrales de Google

| Calificación | Puntuación | |:---|:---| | ✅ Bueno | ≤ 0.1 | | ⚠️ Necesita mejora | 0.1 – 0.25 | | ❌ Deficiente | > 0.25 |

Causas comunes de CLS alto

1. Imágenes sin dimensiones: No especificar width y height en las etiquetas img
2. Fuentes web (FOUT/FOIT): La tipografía cambia de una fuente a otra al cargar
3. Anuncios / embeds dinámicos: Banners que se insertan tarde y desplazan contenido
4. Contenido inyectado dinámicamente: Barras de cookies, pop-ups, widgets de chat
5. Componentes sin altura reservada: Secciones que cambian de tamaño tras la hidratación

Cómo optimizar el CLS

• Siempre definir dimensiones en imágenes y videos (width, height, aspect-ratio)
• Usar font-display: swap con fuentes pre-conectadas
• Reservar espacio para anuncios y embeds con contenedores de altura fija
• Usar next/image que automáticamente reserva espacio y previene shifts
• Evitar inyectar contenido encima del viewport después de la carga

En NexgenPixels diseñamos componentes con alturas reservadas desde el primer frame, logrando CLS consistentes de 0.01 — prácticamente invisibles.