Obtén información sobre nuestros planes para mejorar la métrica 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. Esta métrica se denomina cambio de diseño acumulado 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 generan una mala experiencia del usuario, en las páginas abiertas por más tiempo se suman más. 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 dedicado a 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, a menudo, los usuarios tienen experiencias negativas después de la carga, cuando se desplazan o navegan por las páginas. Sin embargo, nos preguntamos cómo afecta esto a las páginas de larga duración, es decir, páginas que el usuario generalmente ha abierto durante mucho tiempo. Existen varios tipos diferentes de páginas que tienden a permanecer abiertas por más tiempo; algunas de las más comunes son las apps de redes sociales con desplazamiento infinito y aplicaciones de una sola página.
Un análisis interno de páginas de larga duración con puntuaciones CLS altas descubrió que la mayoría de los problemas se deben a los siguientes patrones:
- Usuarios de desplazamiento infinito que cambian el contenido a medida que el usuario se desplaza.
- 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 estamos trabajando para mejorar la métrica y recibir comentarios sobre posibles enfoques.
¿Cómo decidiríamos si una métrica nueva 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, registramos videos y seguimientos de Chrome de 34 recorridos de usuarios por varios sitios web. Al seleccionar los recorridos de los usuarios, apuntamos a algunas cosas:
- Una variedad de 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 en la app de una sola página y las interacciones del usuario.
- Una variedad de cambios en la cantidad y la intensidad de 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 para calificar cuál de los pares 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 realmente frustrados por los cambios de diseño después de la carga, especialmente durante el desplazamiento y las navegaciones de apps de una sola página. Vimos que, durante estas actividades, algunos sitios ofrecen experiencias del usuario mucho mejores que otros.
Desde que registramos 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 las métricas de cada idea en cada recorrido del usuario. Esto nos permitió ver cómo cada variante de la métrica clasifica los recorridos de los usuarios y qué tan diferente era la clasificación ideal.
¿Qué ideas de métricas probamos?
Estrategias analíticas
A menudo, las páginas tienen varios cambios de diseño agrupados juntos, porque 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 turnos. Para lograrlo, analizamos 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 distinta gravedad 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 con el tiempo.
Ventanas de saltos de tamaño constante
El enfoque más simple es dividir la página en ventanas de fragmentos del mismo tamaño. Estas se denominan ventanas de saltos de tamaño constante. Notarás que la cuarta barra realmente parece estar agrupada en la segunda ventana de saltos de tamaño constante, pero, como todas son de tamaño fijo, se encuentra en la primera. 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 encontrarse en diferentes lados de los límites de las ventanas de saltos de tamaño constante.
Ventanas deslizantes
Un enfoque que nos permite ver más agrupaciones posibles de la misma longitud es actualizar continuamente la ventana potencial a lo largo del tiempo. En la imagen anterior, se muestra una ventana variable a la vez, pero podemos observar todas las ventanas variables 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 aumentos de actividad de cambios de diseño, podríamos empezar cada ventana en un cambio y seguir expandié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 sin cambios. Un problema potencial es que, si no hay brechas en los cambios de diseño, una métrica basada en las ventanas de sesión podría crecer de manera ilimitada, al igual que la métrica CLS actual. Por lo tanto, también probamos esto con un tamaño máximo de ventana.
Tamaños de ventana
La métrica puede dar resultados muy diferentes dependiendo del tamaño real de las ventanas, así que probamos varios tamaños de ventana diferentes:
- Cada modificación 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
Observamos el valor máximo de la ventana, así como el percentil 95, el percentil 75 y la mediana.
Promedio
Analizamos el valor medio de la ventana.
Presupuestos
Nos preguntamos si tal vez hubiera una puntuación mínima de cambio de diseño que los usuarios no notarían, y podríamos contar los cambios de diseño que superen ese “presupuesto” en la puntuación. Por lo tanto, para varios valores de "presupuesto" posibles, analizamos el porcentaje de cambios sobre el presupuesto y la puntuación total de cambios sobre el presupuesto.
Otras estrategias
También vimos muchas estrategias que no involucraban 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 general, probamos 145 definiciones de métricas diferentes basadas en las permutaciones de las ideas anteriores. Para cada métrica, clasificamos todos los recorridos de los usuarios según su puntuación en la métrica y, luego, clasificamos las métricas en función de qué tan cerca estuvieron de la clasificación ideal.
Para obtener un modelo de referencia, también clasificamos todos los sitios por su puntuación de CLS actual. CLS obtuvo el puesto 32 y está empatado con otras 13 estrategias, por lo que fue mejor que la mayoría de las permutaciones de las estrategias anteriores. Para asegurarnos de que los resultados fueran significativos, también agregamos tres órdenes aleatorias. Como se esperaba, los pedidos aleatorios tuvieron peores que cada estrategia probada.
Para comprender si podríamos estar sobreajustándose en el conjunto de datos, después de nuestro análisis, registramos algunos videos y seguimientos nuevos de cambios de diseño, los clasificamos de forma manual 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 hay tres tipos de estrategias encabezadas. Todos tenían más o menos el mismo rendimiento, por lo que planeamos seguir adelante con un análisis más profundo de los tres. También nos gustaría recibir comentarios de los desarrolladores para comprender si hay factores externos a la experiencia del usuario que debemos tener en cuenta a la hora de decidir entre ellos. Consulta la siguiente sección para ver cómo enviar comentarios.
Percentiles altos de períodos largos
Algunas estrategias de renderización en ventanas funcionaron bien con tamaños de ventana largos:
- Ventanas deslizantes de 1 segundo
- Las ventanas de sesión se limitaron a 5 segundos con un intervalo de 1 segundo.
- Ventanas de sesión sin límite con un intervalo de 1 segundo
Todos se clasificaron muy bien en el percentil 95 y en el máximo.
Sin embargo, para tamaños de ventana tan grandes, nos preocupaba usar el percentil 95; a menudo, veíamos solo 4 a 6 ventanas, y tomar el percentil 95 de eso implica mucha interpolación. No está claro lo que 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 y verificar el máximo.
Promedio de períodos de sesión con brechas largas
El promedio de 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 brechas entre los cambios de diseño, termina siendo una ventana de sesión larga con la misma puntuación que el CLS actual.
- Esta métrica no tuvo en cuenta directamente el tiempo de inactividad; solo analizó los cambios que se produjeron en la página y no los momentos en los que la página no cambiaba.
Percentiles altos de períodos cortos
La ventana deslizante máxima de 300 ms tiene una clasificación muy alta, así como el percentil 95. Para el tamaño de ventana más corto, hay menos interpolación de percentiles que los tamaños de ventana más grandes, pero también nos preocupaba la ventana deslizante “repetir”; si un conjunto de cambios de diseño se produce en dos marcos, hay múltiples ventanas de 300 ms que los incluyen. Tomar el máximo es mucho más claro y sencillo que tomar el percentil 95. Así que de nuevo, decidimos seguir adelante con la verificación del máximo.
Estrategias que no dieron resultado
Las estrategias que intentaron observar la experiencia "promedio" del tiempo invertido tanto sin cambios de diseño como con cambios de diseño tuvieron un rendimiento muy deficiente. Ninguno de los resúmenes del percentil 75 o la mediana de ninguna estrategia de renderización en ventanas clasificó bien los sitios. Tampoco la suma de los 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 parte del presupuesto. Para diversos presupuestos, todos tenían una clasificación bastante baja.
- Cambio de diseño promedio por encima de algún exceso. La mayoría de las variaciones en esta estrategia tuvieron un rendimiento deficiente, pero el exceso promedio durante una sesión larga con una gran brecha tuvo un rendimiento casi tan bueno como el promedio de ventanas de sesión con brechas largas. Decidimos seguir adelante solo con la última opción porque es más simple.
Próximos pasos
Análisis a mayor escala
Hemos implementado las principales estrategias que se mencionaron anteriormente en Chrome para obtener datos sobre el uso real de un conjunto mucho más amplio de sitios web. Planeamos utilizar un enfoque similar para clasificar los sitios en función de sus puntuaciones de las métricas para hacer el análisis a mayor escala:
- Clasificar todos los sitios por CLS y por cada candidato de métrica nuevo
- ¿Qué sitios se clasifican de forma más diferente según el CLS y cada candidato? ¿Detectamos algo inesperado cuando observamos estos sitios?
- ¿Cuáles son las mayores diferencias entre las nuevas métricas candidatas? ¿Alguna de las diferencias se destaca como ventajas o desventajas de un candidato específico?
- Repita el análisis anterior, pero agrupe los datos según el tiempo dedicado a 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? ¿Observamos algún resultado inesperado en el caso de 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 muchos aspectos no cambiarán con este nuevo enfoque:
- Ninguna de nuestras ideas de métricas cambia la forma en que se calculan las puntuaciones de cambio de diseño para se calculan los fotogramas individuales, solo la forma en que resumimos varios fotogramas. Esto significa que no habrá cambios en la API de JavaScript para los cambios de diseño, y los eventos subyacentes en los registros de Chrome que usan las herramientas para desarrolladores tampoco lo harán, 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 trabajando arduamente para facilitar la adopción de las métricas por parte de los desarrolladores. Estas métricas se incluyen en la biblioteca web-vitals, se documentan en web.dev y se informan en nuestras herramientas para desarrolladores, como Lighthouse.
Concesiones entre las métricas
Una de las estrategias superiores 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, 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é es más importante para los desarrolladores.
¿Te parece más fácil comprender las ventanas variables 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 JavaScript de ejemplo o nuestra bifurcación de la extensión de Métricas web esenciales.
Envía tus comentarios a nuestro grupo de Google web-vitals-feedback con “[Métricas de cambio de diseño]” en el asunto. Estamos ansiosos por conocer tu opinión.