CLS (Cumulative Layout Shift) es una métrica de Core Web Vitals que mide la estabilidad visual de una página a través de la suma de cambios de diseño inesperados que ocurren durante la vida útil de la página.
Un "cambio de diseño" ocurre cuando un elemento visible cambia de posición de un marco renderizado al siguiente sin una causa iniciada por el usuario. Cada cambio se puntúa por impacto (cuánto se movió la ventana gráfica) y distancia (qué tan lejos se movieron las cosas); CLS es la suma de todos esos cambios. Umbrales de 2026: ≤ 0.1 bueno, ≤ 0.25 necesita mejora, > 0.25 pobre.
Soluciones comunes de CLS para comercio electrónico: siempre establece atributos width y height en imágenes para que los navegadores reserven espacio; reserva espacio para contenido incrustado (iframes, anuncios, videos) con dimensiones explícitas o CSS de relación de aspecto; evita reflujo por cambio de fuente utilizando size-adjust en @font-face o font-display: optional; no inyectes banners o ventanas emergentes sobre contenido existente; asegúrate de que los cargadores de esqueleto coincidan con las dimensiones del contenido cargado que están reemplazando.
CLS es a menudo el Core Web Vital más fácil de corregir y el más impactante para la calidad percibida: incluso pequeños cambios de diseño se sienten poco profesionales.