CLS (Cumulative Layout Shift)

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

El CLS mide cuánto se desplazan inesperadamente los elementos visibles mientras una página se carga o se utiliza. La puntuación no tiene unidad y se calcula como la fracción de impacto (qué parte de la pantalla se ve afectada) multiplicada por la fracción de distancia (qué tanto se mueven los elementos). El CLS es una de las tres Core Web Vitals junto con el LCP y el INP, y una buena puntuación es 0.1 o inferior en el percentil 75; cualquier valor superior a 0.25 se considera deficiente.

¿Por qué es importante el CLS (Cumulative Layout Shift)?

Los saltos de diseño son directamente perjudiciales en una tienda online: un comprador está a punto de tocar “Comprar”, pero un banner o una imagen que se carga tarde desplaza el botón y el toque aterriza en otra cosa. Esto genera frustración, clics erróneos y desconfianza justo antes de la conversión. El CLS también forma parte de las señales de experiencia de página de Google, por lo que los valores persistentemente altos pueden arrastrar las posiciones hacia abajo. Una página estable se siente más rápida y profesional, incluso cuando la velocidad bruta es idéntica.

Casos de uso comunes

• Imágenes y vídeos sin dimensiones. Sin width/height o aspect-ratio, el navegador no puede reservar espacio con anticipación, por lo que el contenido salta cuando se carga el recurso; combina esto con un texto alternativo adecuado.
• Banners de cookies y ventanas emergentes. El contenido inyectado en la parte superior o en el medio de la página desplaza todo lo que está debajo.
• Widgets de aplicaciones. Bloques de reseñas, “vistos recientemente” y ofertas adicionales que se cargan después del resto alteran el diseño.
• Fuentes web. Cambiar de una fuente de respaldo a la fuente final puede hacer que el texto se reorganice y se desplace.
• Anuncios e iframes sin espacio reservado en el área por encima del pliegue.

Perspectiva de Shopify

En Shopify, la mayoría de los saltos de diseño provienen de aplicaciones y modificaciones del tema en lugar de la plataforma principal. Reserva siempre espacio para bloques dinámicos, establece dimensiones fijas en las imágenes de productos y carga banners de cookies y ventanas emergentes de forma que no desplacen el contenido. Mide el efecto con PageSpeed Insights o Lighthouse tanto en móvil como en escritorio, y sigue el informe de velocidad en Online Store dentro del panel de Shopify, que se basa en los datos de Google Lighthouse.