¿Qué es el Desplazamiento de Diseño Acumulativo (DESA) y cómo solucionarlo?

El Desplazamiento acumulativo del diseño (CLS) es una métrica de Core Web Vitals definida por Google que mide la estabilidad visible de las páginas web.
Cuando se producen desplazamientos inesperados en la visualización del contenido durante la carga de una página web debido al cambio de tamaño de las imágenes, la visualización de anuncios, la animación, la renderización del navegador u otros elementos de script, dichos desplazamientos disminuyen la calidad de la experiencia del usuario.
Esto puede hacer que los visitantes se sientan confusos o que tengan que esperar a que se complete la carga de la página web, lo que lleva más tiempo.

El Desplazamiento de diseño acumulado (CLS) es el 15% de la puntuación PageSpeed total de una página web.
Los componentes Largest Contentful Paint (LCP) y First Input Delay (FID) se incluyen con CLS en la medición Core Web Vitals.
El Desplazamiento acumulativo del diseño (CLS) complementa a LCP y FID para proporcionar un equilibrio entre la carga rápida de las páginas web y una buena experiencia de usuario (UX).

Una gran parte del HTML, CSS, JavaScript y otros recursos pueden cargarse después de que el contenido de la vista inicial se haya mostrado completamente en el navegador web.
CLS garantiza que lo que se cargue después no altere la página de forma que perjudique la UX cuando los visitantes empiecen a navegar por la página.

El CLS es una puntuación sin unidades que se calcula promediando los factores de desplazamiento de la disposición en varias ventanas de sesión durante un máximo de 5 segundos.
La puntuación del desplazamiento de la disposición es el resultado de multiplicar la fracción de impacto por la fracción de distancia.
Google recomienda una puntuación CLS inferior a 0,1 para las valoraciones «buenas».

Potenciador 10Web es una de las mejores soluciones para automatizar la obtención de buenas puntuaciones CLS para una amplia gama de sitios web WordPress.
Utiliza las técnicas de optimización frontend y backend más eficaces, sin romper los sitios web.
10Web Booster garantiza puntuaciones CLS y CWV consistentemente altas, así como puntuaciones PageSpeed superiores a 90, tanto para móvil como para escritorio.

 

Definición: ¿qué es el CLS?

El Desplazamiento de diseño acumulativo (CLS) representa el 15% de la puntuación Google PageSpeed (que se calcula a partir de la combinación de seis factores ponderados entre sí) para ofrecer una representación del rendimiento de una página web para los usuarios.
Los factores utilizados en el cálculo de la puntuación Google PageSpeed por Lighthouse en la generación de informes SEO son:

• FCP (Primera Pintura de Contenido): 10%
• SI (Índice de velocidad): 10%
• LCP (Pintura de mayor contenido): 25%
• TTI (Tiempo de Interacción): 10%
• TBT (Tiempo Total de Bloqueo): 30%
• CLS (Turno de disposición acumulativo): 15%

La métrica CLS se introdujo en 2020 como parte de la norma Core Web Vitals.
En 2021, Google revisó el cálculo de la fracción de distancia a un límite de 5 segundos como máximo y cambió la ponderación de la variable CLS del 5% al 15% en las puntuaciones PageSpeed.

El algoritmo combina los desplazamientos de diseño y los grupos de desplazamientos que se producen durante pequeños intervalos limitados, llamados ventanas de sesión, mientras se carga la página.
También calcula una media de los factores de desplazamiento en cada ventana de sesión, ignorando las ventanas de sesión con desplazamientos muy pequeños.
Cuanto menor sea el tiempo en que se producen los desplazamientos y menor sea la distancia a la que se desplazan los elementos de la página web al ser visualizados por el navegador, mejor será la puntuación global.

La causa principal de los retrasos de CLS en la representación del contenido es la falta de declaraciones de tamaño CSS en el contenido de imagen y vídeo.
Como el navegador necesita descargar la imagen para recibir las relaciones de longitud y anchura, se producen retrasos en la velocidad total de carga de la página.
Cuando el navegador redimensiona los elementos de la página, provoca el característico efecto de desplazamiento del diseño.

La publicidad, los iframes, las animaciones JavaScript y el contenido dinámico de una página web pueden provocar un efecto de desplazamiento del diseño en el navegador.
La fracción de impacto mide la cantidad de espacio vertical en la vista de página que el contenido desplaza al ser renderizado.
Este valor viene dado por el porcentaje de la vista que ocupan los elementos desplazados de la página una vez renderizados.

¿Qué es una buena puntuación en el CLS?

Google considera que una puntuación CLS «buena» es inferior a 0,1 para la clasificación PageSpeed.
Un valor CLS entre 0,1 y 0,25 se califica como «necesita mejorar».
En caso contrario, un valor CLS superior a 0,25 se califica como «deficiente».
A continuación, este valor se pondera como el 15% de la puntuación final de Google PageSpeed calculada por Lighthouse analytics.

Fines SEO

Una buena puntuación CLS es vital para la optimización de los motores de búsqueda.
Las pruebas de Google PageSpeed Insights se basan en el uso de Core Web Vitals y otras métricas para representar las velocidades de rendimiento de las páginas web.
Core Web Vitals y Cumulative Layout Shift forman parte del sistema de clasificación algorítmica de Google para las SERP, que incluye factores como palabras clave, títulos, URL y enlaces de otros sitios.

Core Web Vitals representa el 40% de la puntuación de Google PageSpeed cuando se aplican las métricas Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP).
John Mueller, de Google, declaró que el CWV es «un factor de clasificación, y… más que un criterio de desempate, pero tampoco sustituye a la relevancia».
Core Web Vitals es ahora un enfoque prioritario para la mejora del SEO.

Propósitos UX

Los desplazamientos de diseño esperados causados por JavaScript, AJAX o elementos de contenido de la página web (es decir, menús desplegables, carruseles o listas de contenido dinámico) no se incluyen como parte del cálculo CLS si forman parte de la interfaz gráfica de usuario y funcionan manualmente.
Los desarrolladores pueden revisar la analítica proporcionada por Lighthouse u otras utilidades y comprobar las puntuaciones de Google PageSpeed de sus páginas web para evaluar los resultados de CLS y obtener información sobre la UX.
La información analítica proporcionada por Google ayuda a corregir cualquier problema pendiente con una interfaz web basándose en recomendaciones de expertos.

¿Cómo se calcula el CLS?

La puntuación CLS se calcula mediante la fórmula puntuación del cambio de disposición = fracción de impacto x fracción de distancia.
The impact fraction measures the stability or instability of the current frame, which is taken as a fraction of the total viewport.
The average values of 5 session windows measured over 5 seconds are compiled by Lighthouse tests for impact and distance fractions.

Si una imagen renderizada dinámicamente y el contenido del texto desplazado ocupan el 70% de la ventana gráfica, el valor del impacto se traza como 0,70.
Si la cantidad de espacio visual que ocupa el texto desplazado se mide en el 50% de la ventana gráfica, la fracción de distancia se traza como 0,50.
La puntuación final del desplazamiento del diseño es de 0,35.

• La fracción de impacto representa el porcentaje de la ventana gráfica ocupado por los elementos renderizados y desplazados en la pantalla.
  El valor oscila entre 0 y 100, según el porcentaje de espacio ocupado por ambos elementos tras el desplazamiento.
• La fracción de distancia se define por el mayor de los desplazamientos (horizontal o vertical) de los elementos de contenido en la ventana gráfica.
  El valor va de 0 a 100 según el porcentaje de espacio de la ventana gráfica, es decir, dividido por la anchura o la altura de la ventana gráfica (la dimensión que sea mayor).

La puntuación CLS final se calcula multiplicando la fracción de impacto por la fracción de distancia.
A continuación, la proporción se combina con las demás métricas de Core Web Vitals para obtener la puntuación PageSpeed con una ponderación del 15%.
Las pruebas pueden realizarse a través de PageSpeed Insights, Chrome Dev Tools, Chrome User Experience Reports, CLI, o utilizando la función web-vitales Biblioteca JavaScript.

Datos de laboratorio

Al realizar el análisis de Google PageSpeed Insights de una página web, el script de Lighthouse utiliza datos de laboratorio para calcular las métricas de Core Web Vitals (CWV).
La página web y sus dependencias se descargan en un centro de datos para probarlas en condiciones simuladas para diferentes dispositivos de usuario y velocidades de conexión.
No se garantiza que sean reproducibles.

Datos de usuarios reales

Aunque Google no revela todos los factores que se combinan en su algoritmo de clasificación del motor de búsqueda, el cálculo de las puntuaciones PageSpeed para las visualizaciones de las SERP se basa en datos de usuarios reales procedentes de los Informes de experiencia de usuario de Chrome.
Cuando los usuarios optan por los informes del navegador, Google recopila sus datos de rendimiento en URL individuales a efectos de la clasificación de las páginas de búsqueda.

CLS en JavaScript

La página web-vitales La biblioteca JavaScript permite a los desarrolladores probar páginas web directamente y reproducir los resultados del Informe de experiencia de usuario de Chrome o de Page Speed Insights.
El script también modelará los resultados del Informe de velocidad de Search Console.
La API de inestabilidad del diseño, disponible para su descarga gratuita en GitHub, probará únicamente la puntuación del Desplazamiento acumulativo del diseño sin otras variables.

¿Qué afecta a la puntuación CLS?

La causa más común de un desplazamiento del diseño es el uso de imágenes, vídeos incrustados, iframes, animaciones JavaScript y otros elementos de contenido que no tienen una declaración específica de altura y anchura en CSS.
Sin especificaciones de tamaño, el navegador debe esperar a recibir los archivos para calcular y refactorizar la visualización para distintos tamaños de pantalla, lo que provoca que el efecto acumulativo de desplazamiento de la disposición se produzca en distintas ventanas de sesión de la ventana de visualización total de la página.

Las fuentes web cargadas más tarde, el contenido inyectado dinámicamente y las acciones DOM también pueden afectar negativamente a la puntuación del Desplazamiento del diseño acumulado.
Utiliza los análisis para depurar y corregir estos problemas.

¿Cómo utilizar correctamente las animaciones y las interacciones del usuario?

Para utilizar correctamente las animaciones y las interacciones con el usuario, Google recomienda utilizar transformaciones CSS y no cambiar las posiciones o tamaños de los elementos de una página web.
La representación de contenidos animados en el navegador web requiere un contexto y una continuidad específicos para evitar una espera en el cálculo de las dimensiones de las imágenes o las fuentes.

Asegúrate de establecer el tamaño de las imágenes en las animaciones con la misma relación de aspecto en todas las pantallas de los dispositivos.
Utiliza CSS para declarar por defecto la altura y anchura de todos los elementos de las animaciones de un sitio.

¿Cómo mejorar la puntuación CLS?

La mejor forma de mejorar la puntuación CLS es reconocer dónde se producen desplazamientos del diseño en el área de la ventana inicial y reducir su distancia y los factores de impacto (es decir, asegurarse de que los elementos más grandes no se desplazan).
Esto se hace declarando los tamaños CSS para las imágenes y el contenido incrustado, de modo que las áreas no sean desplazadas por el navegador al cargar.
Con este método, los navegadores reservan automáticamente espacio para los elementos de visualización sin que se produzca un desplazamiento del diseño.
También puedes declarar valores de tamaño para el contenido inyectado dinámicamente para evitar un desplazamiento del diseño.

Asegúrate de precargar las fuentes web para evitar los efectos Flash de Texto Invisible (FOIT) y Flash de Texto sin Estilo (FOUT).
Evita inyectar contenido dinámicamente en secciones de la página que provoquen un desplazamiento potencial del diseño por debajo de la ventana gráfica.
Utiliza la analítica para probar las páginas y aplicar los cambios de diseño y código recomendados por el informe PageSpeed Insights.

Para los anuncios, es posible mostrar la altura y la anchura de las secciones de la página utilizando declaraciones DIV con CSS.
También se recomienda añadir una imagen de visualización alternativa para los usuarios que navegan con bloqueadores de anuncios, con el fin de preservar el diseño y evitar posibles problemas de desplazamiento de la disposición.
Los sitios también deben declarar valores de altura y anchura para iframes y vídeos de YouTube.

Las animaciones que desplazan el contenido hacia arriba y hacia abajo debido a marcos de tamaño irregular son una de las peores causas de problemas de desplazamiento del diseño.
La normalización del tamaño de las diapositivas y la aplicación de reglas contextuales guiadas para las transiciones mejorarán la puntuación de la prueba CLS en la mayoría de las páginas.
Considera la posibilidad de adoptar marcos de visualización de animaciones y diapositivas que incluyan la altura y la anchura mediante CSS en los elementos.
Reserva el espacio de presentación y carga las animaciones en último lugar para obtener las mejores puntuaciones en el CLS.

Potenciador 10Web es una solución automatizada de optimización de sitios web frontend y backend para Google PageSpeed.
Puedes instalar el plugin y conectar tu sitio web al servicio Booster para la compresión de HTML/CSS, la minificación de JavaScript, la carga perezosa de imágenes/iframe/vídeos, la generación de CSS crítico, el redimensionamiento de imágenes específico para contenedores y otras técnicas que garantizarán un valor «bueno» de CLS en todas las páginas optimizadas, sin romperlas.
Esto mejorará el SEO en todas las URL del sitio web.

¿Cómo arreglar la puntuación CLS de los sitios WordPress?

Si tu sitio WordPress necesita más velocidad, 10Web Booster optimiza cualquier sitio WP en cualquier plataforma de alojamiento algorítmicamentesin necesidad de configurar manualmente los ajustes.
Otras soluciones de plugins para la mejora de la CLS en sitios WordPress disponibles tanto con licencias gratuitas como de suscripción son: WP Rocket, WP Super Cache, W3 Total Cache, Perfmatters y WP Fastest Cache.

Estos plugins gestionarán muchas opciones diferentes para la optimización de Google PageSpeed, como el almacenamiento en caché, la compresión, la minificación y la carga perezosa de imágenes.
Sin embargo, ten en cuenta que muchos de estos plugins pueden entrar en conflicto entre sí o ser difíciles de configurar con los mejores ajustes para un sitio web.
Es necesaria una elección cuidadosa para obtener una solución que consiga las mejores puntuaciones de forma independiente.

Google PageSpeed Insights extraerá datos de URL de recursos en caché y servidores CDN si están activos para los usuarios anónimos.
Los resultados de las pruebas de Core Web Vitals y otros cálculos de métricas serán diferentes para los usuarios registrados y los anónimos.
Para comprobar la velocidad de carga de las páginas de los usuarios registrados de los sitios de WordPress, es necesario desactivar el almacenamiento en caché o utilizar soluciones JavaScript/CLI para el análisis.
De esta manera, los desarrolladores pueden probar las ganancias de rendimiento adquiridas por la mayoría de las soluciones de almacenamiento en caché, así como optimizar las páginas para los miembros de la comunidad.

Para superar la prueba CLS y obtener automáticamente puntuaciones superiores a 90 en las páginas de WordPress, considera las ventajas de adoptar Potenciador 10Webs para sitios web de producción.
Supera las pruebas de Core Web Vitals con facilidad y mejora la puntuación de PageSpeed Insights de tu sitio web para la clasificación en los motores de búsqueda de Google implementando las mejores prácticas del sector en todas las URL.
10Web Booster es una solución completa para solucionar los problemas de Desplazamiento de Diseño Acumulativo para el SEO de WordPress.