Obtén información sobre nuestros planes para mejorar la métrica de Cambio de diseño acumulado y envíanos tus comentarios.
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, suman más en las páginas que están abiertas por más tiempo. Es por eso que el Equipo de métricas de velocidad de Chrome se propuso mejorar la métrica CLS para que fuera más neutral con respecto al tiempo que se pasa en una página.
Es importante que la métrica se centre en la experiencia del usuario durante todo el ciclo de vida de la página, ya que descubrimos que los usuarios a menudo tienen experiencias negativas después de cargar, mientras se desplazan o navegan por las páginas. Sin embargo, recibimos preocupaciones sobre cómo esto afecta a las páginas de larga duración, es decir, páginas que el usuario suele abrir 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 fueron causados por los siguientes patrones:
- Desplazamientos infinitos que cambian de contenido a medida que se desplaza el usuario
- Los controladores de entrada que 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 ni patrón de esqueleto
Si bien alentamos a los desarrolladores a mejorar esas experiencias del usuario, también trabajamos para mejorar la métrica y recibir 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.
Primero, grabamos videos y registros de Chrome de 34 recorridos de usuarios por varios sitios web. Para seleccionar los recorridos del usuario, nos enfocamos en algunas cosas:
- 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 la cantidad y la intensidad de los cambios de diseño individuales en los sitios.
- Pocas experiencias negativas en los sitios, aparte de los cambios de diseño.
Les 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 idealizado de los sitios. Los resultados de la clasificación de los usuarios confirmaron nuestras sospechas de que nuestros colegas, como la mayoría de los usuarios, se sintieron realmente frustrados por los cambios de diseño después de la carga, especialmente durante el desplazamiento y las navegaciones en apps de una sola página. Durante estas actividades, observamos que algunos sitios ofrecen experiencias del usuario mucho mejores que otros.
Desde que grabamos registros 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 renderización en ventanas
A menudo, las páginas tienen varios cambios de diseño agrupados, ya que los elementos pueden cambiar varias veces a medida que el contenido nuevo llega parte por parte. Esto nos llevó a probar técnicas para agrupar los cambios. 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. Las imágenes ilustran las formas en que las diferentes estrategias de renderización en 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 partes del mismo tamaño. Estas ventanas se llaman ventanas de saltos de tamaño constante. Notarás que, arriba, la cuarta barra realmente parece que debería estar agrupada en la segunda ventana de saltos de tamaño constante, pero como todas las ventanas son de tamaño fijo, en su lugar aparece en la primera ventana. Si hay pequeñas diferencias en el tiempo de las cargas o las interacciones del usuario en la página, los mismos cambios de diseño podrían caer en diferentes lados de los límites de la ventana de saltos de tamaño constante.
Ventanas deslizantes
Un enfoque que nos permite ver más grupos posibles de la misma longitud es actualizar continuamente la ventana 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 iniciar cada ventana en un cambio y seguir agrandándola hasta que encontremos una brecha de un tamaño determinado entre los cambios de diseño. Este enfoque agrupa los cambios de diseño e ignora la mayor parte de la experiencia del usuario que no es de este tipo. 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. Así que también probamos esto con un tamaño de ventana máximo.
Tamaños de las ventanas
La métrica puede dar resultados muy diferentes según el tamaño real de las ventanas, por lo que probamos con varios tamaños de ventana 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 superan ese "presupuesto" en la puntuación. Por lo tanto, para varios valores de "presupuesto" potenciales, observamos el porcentaje de cambios sobre el presupuesto y la puntuación del cambio total sobre el presupuesto.
Otras estrategias
También analizamos muchas estrategias que no involucraban ventanas, como el cambio total de diseño dividido por el tiempo en la página y el promedio de los peores cambios individuales.
Los resultados iniciales
En general, probamos 145 definiciones de métricas diferentes según las permutaciones de las ideas anteriores. Para cada métrica, clasificamos todos los recorridos de los usuarios por su puntuación en la métrica y, luego, clasificamos las métricas según qué tan cerca estuvieron de la clasificación ideal.
Para obtener un modelo de referencia, también clasificamos todos los sitios según su puntuación de CLS actual. 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 ordenaciones aleatorias. Como se esperaba, los órdenes aleatorios tuvieron un peor rendimiento que todas las estrategias probadas.
Para comprender si podríamos estar sobreajustados para el conjunto de datos, después de nuestro análisis, registramos algunos videos y seguimientos de cambio de diseño nuevos, los clasificamos manualmente y vimos que las clasificaciones de las métricas eran muy similares para el conjunto de datos nuevo y el original.
Algunas estrategias diferentes se destacaron en las clasificaciones.
Mejores estrategias
Cuando clasificamos las estrategias, descubrimos que en la lista había tres tipos de estrategias. Cada uno tuvo casi el mismo rendimiento, por lo que planeamos avanzar con un análisis más detallado de los tres. También nos gustaría recibir los comentarios de los desarrolladores para comprender si hay factores externos a la experiencia del usuario que deberíamos tener en cuenta al decidir entre ellos. (A continuación, verás cómo enviar comentarios).
Percentiles altos de períodos largos
Algunas estrategias de renderización en ventanas funcionaron bien con ventanas de mayor tamaño:
- 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 limitaciones con un intervalo de 1 segundo
Todos estos clasificaron muy bien tanto en el percentil 95 como en el máximo.
Sin embargo, para los tamaños de ventana tan grandes, nos preocupaba usar el percentil 95, ya que a menudo estábamos mirando solo de 4 a 6 ventanas, y tomar el percentil 95 de eso implicaba 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 avanzar con la verificación del máximo.
Promedio de ventanas de sesión con brechas largas
Promediar las puntuaciones de todas las ventanas de sesión no limitadas con brechas de 5 segundos entre ellas tuvo un muy buen rendimiento. Esta estrategia tiene algunas características interesantes:
- Si la página no tiene espacios entre los cambios de diseño, terminará siendo una ventana de sesión larga con la misma puntuación que el CLS actual.
- Esta métrica no tenía en cuenta el tiempo de inactividad directamente, sino que solo analizaba los cambios que se producían en la página y no en momentos en los que la página no estaba cambiando.
Percentiles altos de períodos cortos
La ventana variable máxima de 300 ms clasificó muy bien, así como 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. De nuevo, decidimos avanzar y verificar el 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 la mediana ni del percentil 75 de ninguna estrategia de renderización en ventanas clasificó bien a los sitios. Tampoco la suma de cambios de diseño a lo largo del tiempo.
Evaluamos varios "presupuestos" diferentes para cambios de diseño aceptables:
- Porcentaje de cambios de diseño que superan cierto presupuesto. 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 tuvo un rendimiento deficiente, pero el exceso promedio durante una sesión larga con una brecha grande rindió casi tan bien como el promedio de las ventanas de sesión con brechas largas. Decidimos avanzar solo con el último porque es más sencillo.
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:
- Clasificar todos los sitios según CLS y por cada opción de métrica nueva
- ¿Qué sitios clasifica de forma más diferente CLS y cada candidato? ¿Detectamos algo inesperado cuando miramos estos sitios?
- ¿Cuáles son las mayores diferencias entre las nuevas opciones de métricas? ¿Alguna de las diferencias se destaca como ventajas o desventajas de un candidato específico?
- Repite el análisis anterior, pero agrupamiento por tiempo empleado en la carga de cada 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 puntos que debes tener en cuenta cuando consideres los nuevos enfoques:
Qué se mantendrá igual
Queremos aclarar que muchas cosas no cambiarán con un 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 se mantendrá igual, y los eventos subyacentes en los registros de Chrome que usan las herramientas para desarrolladores también se mantendrán iguales, por lo que los rectángulos de cambio de diseño en herramientas como WebPageTest y 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 denuncia en nuestras herramientas para desarrolladores, como Lighthouse.
Compensaciones entre 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 por mucho tiempo, el promedio probablemente mostrará un valor más representativo, pero, en general, será 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.
¿Las ventanas variables o de sesión te resultan más fáciles de entender? ¿Son importantes las diferencias 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 nuestra bifurcación de la extensión de Core Web Vitals.
Envía tus comentarios por correo electrónico a nuestro Grupo de Google web-vitals-feedback, con el asunto "[Métricas de cambio de diseño]" en el asunto. Estamos ansiosos por conocer tu opinión.