Cumulative layout shift

Cumulative Layout Shift

Cumulative Layout Shift (CLS) es una métrica que mide cuánto se mueven los elementos visibles en una página mientras ésta se carga o cuando el usuario interactúa. Evalúa esos desplazamientos inesperados en el diseño, por ejemplo cuando una imagen o anuncio aparece de repente y empuja el contenido ya visible. Es importante porque esos movimientos pueden provocar clics involuntarios, confusión y una sensación de falta de estabilidad en la página. Un valor bajo indica estabilidad visual; cuanto menor sea, mejor será la experiencia para el visitante. Las causas frecuentes incluyen imágenes o marcos sin dimensiones explícitas, anuncios que se insertan sin reservar espacio y fuentes que reconfiguran el texto al cargarse. Para reducir estos cambios es recomendable reservar espacio con atributos de tamaño o con CSS (por ejemplo aspect-ratio), usar marcadores o contenedores para anuncios y cargar fuentes de forma que no reajusten el diseño una vez ya visibles. También conviene evitar insertar elementos nuevos por encima del contenido existente sin una acción directa del usuario y preferir transformaciones CSS para animaciones en lugar de alterar el flujo del documento. Mantener la estabilidad visual mejora la confianza, facilita la lectura y reduce errores al interactuar, especialmente en dispositivos móviles.