Planes para mejorar la métrica CLS de modo que sea más equitativa con las páginas de larga duración.
Hace poco, (el equipo de métricas de velocidad de Chrome) describimos nuestra investigación inicial sobre opciones para hacer que la métrica CLS sea más equitativa para las páginas que están abiertas durante mucho tiempo. Recibimos muchos comentarios útiles y, después de completar el análisis a gran escala, concluimos el cambio que planeamos realizar en la métrica: ventana máxima de la sesión con un intervalo de 1 segundo, límite de 5 segundos.
¡Sigue leyendo para obtener más detalles!
¿Cómo evaluamos las opciones?
Revisamos todos los comentarios que recibimos de la comunidad de desarrolladores y los tuvimos en cuenta.
También implementamos las opciones principales en Chrome y realizamos un análisis a gran escala de las métricas en millones de páginas web. Verificamos qué tipos de sitios mejoró cada opción y cómo se comparaban las opciones, especialmente analizar los sitios que recibieron puntuaciones distintas según las diferentes opciones. En general, descubrimos lo siguiente:
- Todas las opciones redujeron la correlación entre el tiempo empleado en la página y la puntuación de cambio de diseño.
- Ninguna de las opciones generó una puntuación más baja para cualquier página. Por lo tanto, no es necesario preocuparse de que este cambio empeore las puntuaciones de tu sitio.
Puntos de decisión
¿Por qué debería haber una ventana de sesión?
En nuestra publicación anterior, cubrimos algunas estrategias de renderización en ventanas diferentes para agrupar los cambios de diseño y, al mismo tiempo, garantizar que la puntuación no crezca de manera ilimitada. Los comentarios que recibimos de los desarrolladores favoreceron en gran medida la estrategia de ventanas de sesión porque agrupa los cambios de diseño de manera más intuitiva.
Para revisar las ventanas de sesión, aquí se muestra un ejemplo:
En el ejemplo anterior, se producen muchos cambios de diseño a lo largo del tiempo a medida que el usuario ve la página. Cada una está representada por una barra azul. Notarás que las barras azules tienen diferentes alturas y representan la puntuación de cada cambio de diseño individual. Una ventana de sesión comienza con el primer cambio de diseño y continúa expandiéndose hasta que haya un intervalo sin cambios de diseño. Cuando se produzca el siguiente cambio de diseño, se iniciará una ventana de sesión nueva. Como hay tres espacios sin cambios de diseño, hay tres ventanas de sesión en el ejemplo. Al igual que en la definición actual de CLS, las puntuaciones de cada cambio se suman, de modo que la puntuación de cada ventana sea la suma de sus cambios de diseño individuales.
Según la investigación inicial, elegimos una brecha de 1 segundo entre las ventanas de sesión, que funcionó bien en nuestro análisis a gran escala. Por lo tanto, la "brecha de sesión" que se muestra en el ejemplo anterior es de 1 segundo.
¿Por qué se alcanza el período máximo de sesiones?
En nuestra investigación inicial, redujimos las estrategias de resumen a dos opciones:
- La puntuación promedio de todas las ventanas de sesión, para ventanas de sesión muy grandes (ventanas sin limitaciones con espacios de 5 segundos entre ellas)
- La puntuación máxima de todas las ventanas de sesión para las ventanas de sesión más pequeñas (con un límite de 5 segundos, con espacios de 1 segundo entre ellas).
Después de la investigación inicial, agregamos cada métrica a Chrome para realizar un análisis a gran escala de millones de URLs. En el análisis a gran escala, encontramos muchas URLs con patrones de cambio de diseño como el siguiente:
En la parte inferior derecha, puedes ver que hay un solo cambio de diseño pequeño en la ventana de sesión 2, lo que le da una puntuación muy baja. Eso significa que la puntuación promedio es bastante baja. Pero ¿qué pasa si el desarrollador corrige ese pequeño cambio de diseño? Luego, la puntuación se calcula solo en la ventana de sesión 1, lo que significa que la puntuación de la página casi se duplica. Sería muy confuso y desanimó a los desarrolladores a mejorar sus cambios de diseño solo para descubrir que la puntuación empeoró. Además, quitar este pequeño cambio de diseño es, obviamente, un poco mejor para la experiencia del usuario, por lo que no debería empeorar la puntuación.
Debido a este problema con los promedios, decidimos avanzar con los períodos más pequeños, limitados y máximos. Por lo tanto, en el ejemplo anterior, se ignoraría la ventana de sesión 2 y solo se informaría la suma de los cambios de diseño en la ventana de sesión 1.
¿Por qué 5 segundos?
Evaluamos varios tamaños de ventana y encontramos dos cosas:
- En el caso de los períodos cortos, las cargas de páginas más lentas y las respuestas más lentas a las interacciones del usuario podrían dividir los cambios de diseño en varias ventanas y mejorar la puntuación. Queremos que la ventana sea lo suficientemente grande para que no recompense las demoras.
- Algunas páginas tienen un flujo continuo de pequeños cambios de diseño. Por ejemplo, una página de resultados deportivos que cambia un poco con cada actualización de resultados. Estos cambios son molestos, pero no se vuelven más a medida que pasa el tiempo. Por lo tanto, quisimos asegurarnos de que la ventana estuviera limitada para estos tipos de cambios de diseño.
Con estos dos aspectos en mente, al comparar una variedad de tamaños de ventana en muchas páginas web reales, concluimos que 5 segundos sería un buen límite para el tamaño de la ventana.
¿Cómo afectará esto a la puntuación de CLS de mi página?
Dado que esta actualización limita el CLS de una página, ninguna página tendrá una puntuación más baja como resultado de este cambio.
Además, según nuestro análisis, el 55% de los orígenes no verán ningún cambio en el CLS en el percentil 75. Esto se debe a que sus páginas actualmente no tienen ningún cambio de diseño o estos ya se limitan a una sola ventana de sesión.
Con este cambio, el resto de los orígenes verán puntuaciones mejoradas en el percentil 75. La mayoría solo verá una leve mejora, pero alrededor del 3% verá que sus puntuaciones mejorarán de tener una calificación de "necesita mejorar" o "deficiente" a tener una calificación de "buena". Por lo general, estas páginas usan desplazamientos infinitos o tienen muchas actualizaciones lentas de la IU, como se describe en nuestra publicación anterior.
¿Cómo puedo probarlo?
Pronto actualizaremos nuestras herramientas para usar la nueva definición de métricas. Hasta entonces, puedes probar la versión actualizada de CLS en cualquier sitio con los ejemplos de implementaciones de JavaScript o la bifurcación de la extensión de Métricas web.
Gracias a todos los que se tomaron el tiempo de leer la publicación anterior y hacer comentarios.