Obtén información sobre nuestros planes para mejorar la métrica de Cambio de diseño acumulado y envíanos tus comentarios.
El Cambio de diseño acumulado (CLS) es una métrica que mide la estabilidad visual de una página web. La métrica se denomina cambio de diseño acumulativo porque la puntuación de cada cambio individual se suma a lo largo de la vida útil de la página.
Si bien todos los cambios de diseño son experiencias del usuario deficientes, se acumulan más en las páginas que están abiertas por más tiempo. Por eso, el equipo de métricas de velocidad de Chrome se propuso mejorar la métrica CLS para que sea más neutral en cuanto al tiempo que se pasa en una página.
Es importante que la métrica se enfoque en la experiencia del usuario durante todo el ciclo de vida de la página, ya que descubrimos que los usuarios suelen tener experiencias negativas después de la carga, mientras se desplazan o navegan por las páginas. Sin embargo, recibimos inquietudes sobre el impacto de esto en las páginas de larga duración, que el usuario suele tener abiertas durante mucho tiempo. Existen varios tipos diferentes de páginas que suelen permanecer abiertas por más tiempo. Algunas de las más comunes son las aplicaciones de redes sociales con desplazamiento infinito y las aplicaciones de una sola página.
Un análisis interno de páginas de larga duración con puntuaciones altas de CLS descubrió que la mayoría de los problemas se debían a los siguientes patrones:
- Desplazamientos infinitos que cambian el contenido a medida que se desplaza el usuario.
- Los controladores de entrada tardan más de 500 ms en actualizar la IU en respuesta a una interacción del usuario, sin ningún tipo de marcador de posición o patrón de esqueleto.
Si bien animamos a los desarrolladores a mejorar esas experiencias del usuario, también estamos trabajando para mejorar la métrica y buscamos comentarios sobre posibles enfoques.
¿Cómo decidiríamos si una nueva métrica es mejor?
Antes de sumergirnos en el diseño de métricas, queríamos asegurarnos de evaluar nuestras ideas en una amplia variedad de páginas web y casos de uso reales. Para empezar, diseñamos un pequeño estudio de usuarios.
En primer lugar, registramos videos y seguimientos de Chrome de 34 recorridos de los usuarios por varios sitios web. Cuando seleccionamos los recorridos del usuario, nos enfocamos en lo siguiente:
- Una variedad de diferentes tipos de sitios, como sitios de noticias y de compras.
- Una variedad de recorridos del usuario, como la carga inicial de la página, el desplazamiento, las navegaciones de una aplicación de una sola página y las interacciones del usuario.
- Una variedad de cantidad e intensidad de cambios de diseño individuales en los sitios
- Pocas experiencias negativas en los sitios, aparte de los cambios de diseño.
Pedimos a 41 de nuestros colegas que miraran dos videos a la vez y calificaran cuál de los dos era mejor en términos de cambio de diseño. A partir de estas calificaciones, creamos un orden de clasificación ideal de los sitios. Los resultados de la clasificación de usuarios confirmaron nuestras sospechas de que nuestros colegas, como la mayoría de los usuarios, se sienten muy frustrados por los cambios de diseño después de la carga, en especial durante el desplazamiento y la navegación de una sola página en la app. Durante estas actividades, observamos que algunos sitios ofrecen experiencias del usuario mucho mejores que otros.
Como registramos los seguimientos de Chrome junto con los videos, teníamos todos los detalles de los cambios de diseño individuales en cada recorrido del usuario. Los usamos para calcular los valores de métricas para cada idea en cada recorrido del usuario. Esto nos permitió ver cómo cada variante de métrica clasificaba los recorridos de los usuarios y qué tan diferentes eran los de la clasificación ideal.
¿Qué ideas de métricas probamos?
Estrategias de ventanas
A menudo, las páginas tienen varios cambios de diseño agrupados, ya que los elementos pueden cambiar varias veces a medida que se agrega contenido nuevo por partes. Esto nos llevó a probar técnicas para agrupar turnos. Para lograrlo, observamos tres enfoques de renderización en ventanas:
- Ventanas de saltos de tamaño constante
- Ventanas deslizantes
- Ventanas de sesión
En cada uno de estos ejemplos, la página tiene cambios de diseño de gravedad variable a lo largo del tiempo. Cada barra azul representa un solo cambio de diseño, y la longitud representa la puntuación de ese cambio. En las imágenes, se ilustran las formas en que las diferentes estrategias de ventanas agrupan los cambios de diseño a lo largo del tiempo.
Ventanas de saltos de tamaño constante
El enfoque más simple es dividir la página en ventanas de fragmentos de igual tamaño. Estas ventanas se llaman ventanas de saltos de tamaño constante. Notarás que, en el gráfico anterior, la cuarta barra parece que debería agruparse en la segunda ventana de deslizamiento, pero, como todas las ventanas tienen un tamaño fijo, se encuentra en la primera. Si hay ligeras diferencias en los tiempos de carga o en las interacciones de los usuarios en la página, los mismos cambios de diseño pueden caer en diferentes lados de los límites de la ventana de desplazamiento.
Ventanas deslizantes
Un enfoque que nos permite ver más agrupaciones posibles de la misma longitud es actualizar continuamente el período potencial a lo largo del tiempo. La imagen anterior muestra una ventana deslizante a la vez, pero podemos observar todas las ventanas deslizantes posibles o un subconjunto de ellas para crear una métrica.
Ventanas de sesión
Si quisiéramos enfocarnos en identificar áreas de la página con ráfagas de cambios de diseño, podríamos comenzar cada ventana en un cambio y seguir aumentándola hasta encontrar una brecha de un tamaño determinado entre los cambios de diseño. Este enfoque agrupa los cambios de diseño y omite la mayor parte de la experiencia del usuario sin cambios. Un posible problema es que, si no hay brechas en los cambios de diseño, una métrica basada en ventanas de sesión podría crecer de forma no delimitada al igual que la métrica actual de CLS. También lo probamos con un tamaño de ventana máximo.
Tamaños de ventana
La métrica puede brindar resultados muy diferentes según el tamaño real de las ventanas, por lo que probamos varios tamaños diferentes:
- Cada cambio como su propia ventana (sin ventanas)
- 100 ms
- 300 ms
- 1 segundo
- 5 segundos
Resúmenes
Probamos muchas formas de resumir las diferentes ventanas.
Percentiles
Analizamos el valor máximo de la ventana, así como el percentil 95, el percentil 75 y la mediana.
Promedio
Analizamos el valor promedio de la ventana.
Presupuestos
Nos preguntamos si tal vez existía alguna puntuación mínima de cambio de diseño que los usuarios no notarían, y podríamos simplemente contar los cambios de diseño que superen ese "presupuesto" en la puntuación. Por lo tanto, para varios valores potenciales de "presupuesto", analizamos el porcentaje de cambios por encima del presupuesto y la puntuación total de cambios por encima del presupuesto.
Otras estrategias
También analizamos muchas estrategias que no incluían ventanas, como el cambio de diseño total dividido por el tiempo en la página y el promedio de los peores N cambios individuales.
Los resultados iniciales
En total, probamos 145 definiciones de métricas diferentes en función de las permutaciones de las ideas anteriores. Para cada métrica, clasificamos todos los recorridos del usuario según su puntuación en la métrica y, luego, clasificamos las métricas según qué tan cerca estaban de la clasificación ideal.
Para obtener un modelo de referencia, también clasificamos todos los sitios según su puntuación actual de CLS. CLS obtuvo el puesto 32, empatado con otras 13 estrategias, por lo que fue mejor que la mayoría de las permutaciones de las estrategias anteriores. Para garantizar que los resultados fueran significativos, también agregamos tres ordenamientos aleatorios. Como se esperaba, los pedidos aleatorios tuvieron un peor rendimiento que todas las estrategias probadas.
Para comprender si podríamos estar sobreajustando el conjunto de datos, después de nuestro análisis, grabamos algunos videos y registros nuevos de cambio de diseño, los clasificamos manualmente y observamos que las clasificaciones de las métricas eran muy similares para el conjunto de datos nuevo y el original.
En las clasificaciones, se destacaron algunas estrategias diferentes.
Las mejores estrategias
Cuando clasificamos las estrategias, descubrimos que tres tipos de estrategias encabezaban la lista. Cada uno tuvo aproximadamente el mismo rendimiento, por lo que planeamos continuar con un análisis más detallado de los tres. También nos gustaría escuchar los comentarios de los desarrolladores para comprender si hay factores fuera de la experiencia del usuario que debamos tener en cuenta cuando decidamos entre ellos. (Consulta a continuación cómo enviar comentarios).
Percentiles altos de ventanas largas
Algunas estrategias de ventanas funcionaron bien con tamaños de ventanas largos:
- Ventanas deslizantes de 1 segundo
- Las ventanas de sesión se limitan a 5 segundos con un intervalo de 1 segundo
- Ventanas de sesión sin límite con un intervalo de 1 segundo
Todos ellos se clasificaron muy bien en el percentil 95 y en el máximo.
Sin embargo, para tamaños de ventanas tan grandes, nos preocupaba usar el percentil 95. A menudo, solo observábamos entre 4 y 6 ventanas, y tomar el percentil 95 de eso implica mucha interpolación. No está claro qué hace la interpolación en términos del valor de la métrica. El valor máximo es mucho más claro, por lo que decidimos seguir adelante con la verificación del máximo.
Promedio de ventanas de sesión con intervalos largos
El promedio de las puntuaciones de todas las ventanas de sesión sin límite con intervalos de 5 segundos entre ellas tuvo un buen rendimiento. Esta estrategia tiene algunas características interesantes:
- Si la página no tiene brechas entre los cambios de diseño, termina siendo un período de sesión largo con la misma puntuación que el CLS actual.
- Esta métrica no tomaba en cuenta directamente el tiempo inactivo, sino que solo observaba los cambios que se producían en la página y no los momentos en que la página no cambiaba.
Percentiles altos de ventanas cortas
La ventana deslizante máxima de 300 ms obtuvo una clasificación muy alta, al igual que el percentil 95. Para el tamaño de ventana más corto, hay menos interpolación del percentil que los tamaños de ventana más grandes, pero también nos preocupaba las ventanas deslizantes "repetir"; si un conjunto de cambios de diseño ocurre en dos marcos, hay varias ventanas de 300 ms que los incluyen. Tomar el máximo es mucho más claro y sencillo que tomar el percentil 95. Por lo tanto, decidimos seguir adelante con la verificación del máximo.
Estrategias que no funcionaron
Las estrategias que trataban de observar la experiencia "promedio" del tiempo transcurrido sin cambios de diseño y con cambios de diseño tuvieron un muy bajo rendimiento. Ninguno de los resúmenes de mediana o percentil 75 de ninguna estrategia de ventanas clasificó bien los sitios. Tampoco la suma de cambios de diseño a lo largo del tiempo.
Evaluamos varios “presupuestos” diferentes para los cambios de diseño aceptables:
- Porcentaje de cambios de diseño por encima de un presupuesto determinado. Para diversos presupuestos, todos estos tenían un ranking bastante deficiente.
- Cambio de diseño promedio por encima de un exceso La mayoría de las variaciones de esta estrategia tuvieron un rendimiento bajo, pero el exceso promedio durante una sesión larga con un intervalo grande tuvo un rendimiento casi tan bueno como el promedio de las ventanas de sesión con intervalos largos. Decidimos avanzar solo con la última opción porque es más simple.
Próximos pasos
Análisis a mayor escala
Hemos implementado las principales estrategias mencionadas anteriormente en Chrome, de modo que podamos obtener datos sobre el uso en el mundo real de un conjunto mucho más grande de sitios web. Planeamos utilizar un enfoque similar de clasificación de sitios según las puntuaciones de sus métricas para realizar el análisis a mayor escala:
- Clasifica todos los sitios por CLS y por cada métrica candidata nueva.
- ¿Qué sitios se clasifican de manera más diferente según el CLS y cada candidato? ¿Detectamos algo inesperado cuando miramos estos sitios?
- ¿Cuáles son las mayores diferencias entre las métricas candidatas nuevas? ¿Alguna de las diferencias se destaca como ventajas o desventajas de un candidato específico?
- Repite el análisis anterior, pero agrupa los datos por el tiempo dedicado a cada carga de página. ¿Vemos una mejora esperada para las cargas de páginas de larga duración con un cambio de diseño aceptable? ¿Vemos algún resultado inesperado para las páginas de corta duración?
Comentarios sobre nuestro enfoque
Nos encantaría recibir comentarios de los desarrolladores web sobre estos enfoques. Estos son algunos aspectos que debes tener en cuenta cuando consideres los nuevos enfoques:
Qué se mantendrá igual
Queremos aclarar que muchas cosas no cambiarán con el nuevo enfoque:
- Ninguna de nuestras ideas de métricas cambia la forma en que las puntuaciones de cambio de diseño para se calculan los fotogramas individuales, solo la forma en que resumimos varios fotogramas. Esto significa que la API de JavaScript para los cambios de diseño seguirá siendo la misma, y los eventos subyacentes en los seguimientos de Chrome que usan las herramientas para desarrolladores también seguirán siendo los mismos, por lo que los rectángulos de cambio de diseño en herramientas como WebPageTest y las Herramientas para desarrolladores de Chrome seguirán funcionando de la misma manera.
- Seguiremos esforzándonos para facilitar la adopción de las métricas para los desarrolladores, incluidas las que se encuentran en la biblioteca web-vitals, la documentación en web.dev y la información en nuestras herramientas para desarrolladores, como Lighthouse.
Compensaciones entre las métricas
Una de las estrategias principales resume las ventanas de cambio de diseño como un promedio, y el resto informa la ventana máxima. En el caso de las páginas que están abiertas durante mucho tiempo, es probable que el promedio informe un valor más representativo, pero, en general, es probable que sea más fácil para los desarrolladores actuar en una sola ventana. Pueden registrar cuándo ocurrió, los elementos que cambiaron, etcétera. Nos encantaría recibir comentarios sobre qué aspectos son más importantes para los desarrolladores.
¿Te resultan más fáciles de entender las ventanas deslizantes o de sesión? ¿Las diferencias son importantes para ti?
Cómo dejar comentarios
Puedes probar las nuevas métricas de cambio de diseño en cualquier sitio con nuestras implementaciones de ejemplo de JavaScript o nuestro clon de la extensión de Métricas web esenciales.
Envía tus comentarios por correo electrónico a nuestro grupo de Google web-vitals-feedback con el asunto "[Layout Shift Metrics]". Esperamos con ansias tu opinión.