Desplazamiento de diseño acumulativo (CLS)

¿Qué es el desplazamiento de disposición acumulativo (CLS)?

El cambio de diseño acumulativo (CLS) es una métrica de Core Web Vitals desarrollada por Google para medir la estabilidad visual de una página web. Cuantifica el total de todos los cambios de diseño inesperados que se producen durante toda la vida útil de la página. Los cambios de diseño se producen cuando un elemento visible cambia de posición de un fotograma a otro.

Cómo se mide el CLS

Las puntuaciones CLS oscilan entre 0, que representa ausencia de desplazamiento, y valores superiores a 0, que indican diversos grados de inestabilidad. La fórmula tiene en cuenta la fracción de impacto y la fracción de distancia de cada desplazamiento, calculando cuánto se mueven los elementos y qué parte de la ventana cubren.

Interpretación de la puntuación CLS

• Bien: 0 - 0,1
• Necesita mejorar: 0.1 - 0.25
• Pobre: por encima de 0,25

¿Por qué es importante el CLS?

CLS es fundamental para la experiencia del usuario, ya que los cambios inesperados en el diseño pueden provocar su frustración. Por ejemplo, si un usuario está a punto de hacer clic en un botón y el diseño cambia, provocando que haga clic en otra cosa sin querer, la experiencia de usuario puede ser mala y se pueden perder conversiones.

Causas comunes de un CLS deficiente

1. Imágenes sin dimensiones:

   • Incluir imágenes en el HTML sin especificar su anchura y altura puede provocar cambios en el diseño, ya que el navegador no sabe cuánto espacio debe asignar inicialmente.

2. Anuncios, incrustaciones e iframes sin dimensiones:

   • Estos elementos pueden cargarse dinámicamente y provocar desplazamientos del diseño si sus dimensiones no se especifican de antemano.

3. Contenido inyectado dinámicamente:

   • Añadir contenido por encima del contenido existente en el DOM puede empujar elementos hacia abajo, provocando desplazamientos.

4. Fuentes web que causan FOIT/FOUT:

   • Flash of Invisible Text (FOIT) y Flash of Unstyled Text (FOUT) pueden causar cambios en el diseño cuando el navegador carga fuentes web.

Buenas prácticas para minimizar el CLS

1. Incluir atributos de tamaño en imágenes y vídeos:

   • Defina siempre la anchura y la altura de las imágenes y los vídeos en el HTML para reservar espacio en la maqueta antes de que se carguen.

2. Reservar espacio para anuncios e incrustaciones:

   • Utiliza CSS para definir las dimensiones de los espacios publicitarios, iframes e incrustaciones para evitar cambios de diseño cuando se cargan.

3. Evite inyectar contenido de forma dinámica sobre el contenido existente:

   • Añada nuevos contenidos debajo del pliegue o dentro de contenedores que ya tengan un espacio reservado.

4. Utilice estrategias de carga de fuentes:

   • Utiliza la propiedad CSS font-display para controlar cómo se muestran las fuentes web y minimizar los desplazamientos debidos a FOIT/FOUT.

5. Utilice CSS Transform para animaciones:

   • Utilice la propiedad transform en lugar de arriba, abajo, izquierda o derecha para animar elementos sin provocar cambios en el diseño.

Conclusión

El desplazamiento acumulativo del diseño (CLS) es una métrica vital para garantizar una experiencia de usuario estable y visualmente atractiva. Si conoce los factores que contribuyen a los cambios de diseño y aplica las mejores prácticas para minimizarlos, podrá mejorar la puntuación CLS de su página web y aumentar la satisfacción general del usuario.

Para obtener más información sobre la mejora de CLS y de otros Core Web Vitals, consulta la documentación de Google sobre Web Vitals.