Planes para mejorar la métrica CLS a fin de que sea más justa en las páginas de larga duración.
Hace poco, (el equipo de Métricas de Velocidad de Chrome) describimos nuestra investigación inicial sobre para hacer que la métrica de CLS sea más justa para las páginas que están abiertas tiempo. Hemos recibido muchas comentarios útiles y, después de completar el análisis a gran escala, hemos finalizado el cambio que planeamos hacer a la métrica: ventana máxima de sesión con 1 segundo de intervalos, con un límite de 5 segundos.
Sigue leyendo para conocer los detalles.
¿Cómo evaluamos las opciones?
Revisamos todos los comentarios que recibimos de la comunidad de desarrolladores y los tomamos tener en cuenta.
También implementamos la página principal Opciones en Chrome y analizamos a gran escala las métricas de millones de páginas web. Mié comprobó qué tipos de sitios mejoró cada opción y cómo se compararon, en especial, en los sitios que recibieron una puntuación diferente según los diferentes opciones de estado. En general, descubrimos lo siguiente:
- Todas las opciones redujeron la correlación entre el tiempo que se pasaba en la página y la puntuación de cambio de diseño.
- Ninguna de las opciones generó una peor puntuación para ninguna página. Así que no hay debes preocuparte porque este cambio empeorará las puntuaciones de tu sitio.
Puntos de decisión
¿Por qué usar una ventana de sesión?
En nuestra publicación anterior, abordamos un sistema de ventanas diferente estrategias para agrupar los cambios de diseño y garantizar que la puntuación no aumente ilimitados. Los comentarios que recibimos de los desarrolladores fueron muy favorables para estrategia de ventanas de sesión porque agrupa el diseño cambia más de manera intuitiva.
Para revisar las ventanas de sesión, aquí se muestra un ejemplo:
En el ejemplo anterior, muchos cambios de diseño ocurren con el tiempo a medida que el usuario ve el . Cada uno está representado por una barra azul. Notarás que las barras azules tienen diferentes alturas; que 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 espacio sin cambios de diseño. Cuando los siguientes se produce un cambio de diseño, se inicia una nueva ventana de sesión. Dado que existen tres déficits con sin cambios de diseño, hay tres ventanas de sesión en el ejemplo. Similar al definición actual de CLS, las puntuaciones de cada cambio se suman para que cada de la ventana es la suma de sus cambios de diseño individuales.
En función de la inicial de la investigación, elegimos una brecha de 1 segundo entre las ventanas de sesión, y esa brecha funcionó bien en nuestra y los análisis a gran escala. La "brecha de sesión" que se muestra en el ejemplo anterior es 1 por segundo.
¿Por qué se define la ventana máxima de sesión?
Redujimos el resumen estrategias hasta dos opciones en nuestra investigación inicial:
- La puntuación promedio de todas las ventanas de sesión para una sesión muy grande (ventanas sin limitaciones con espacios de 5 segundos entre ellas)
- La puntuación máxima de todas las ventanas de sesión para períodos de sesión más pequeños (con un límite de 5 segundos, con espacios de 1 segundo entre ellos).
Después de la investigación inicial, agregamos cada métrica a Chrome para que pudiéramos hacer una análisis a gran escala de millones de URLs. En el análisis a gran escala, encontró muchas URL con patrones de cambio de diseño como este:
En la parte inferior derecha, puedes ver que hay un solo cambio de diseño Ventana de sesión 2, lo que da una puntuación muy baja. Eso significa que la puntuación promedio es bastante baja. Pero ¿qué sucede si el desarrollador corrige ese pequeño cambio de diseño? Luego, la se calcula solo en la Ventana de sesión 1, lo que significa que la puntuación de la página casi dobles. Sería muy confuso y desalentador para los desarrolladores para mejorar sus cambios de diseño y, luego, descubrir que la puntuación empeoró. Y quitar este pequeño cambio de diseño es, obviamente, un poco mejor para el usuario. experiencia, por lo que no debería empeorar el puntaje.
Debido a este problema con los promedios, decidimos avanzar con el períodos máximos y más pequeños. En el ejemplo anterior, la ventana de sesión 2 y solo la suma de los cambios de diseño en la Ventana de sesión 1 y los informes que se deban informar.
¿Por qué 5 segundos?
Evaluamos varios tamaños de ventana y descubrimos dos cosas:
- En el caso de los períodos cortos, las páginas se cargan más lentamente y las respuestas a las interacciones del usuario son más lentas podría dividir los cambios de diseño en varias ventanas y mejorar la puntuación. Mié y quisiste que la ventana fuera lo suficientemente grande para no recompensar las demoras.
- Hay algunas páginas con un flujo continuo de pequeños cambios de diseño. Para ejemplo, una página de resultados deportivos que cambia un poco con cada actualización de puntuación. Estos los cambios son molestos, pero no se vuelven más molestos a medida que pasa el tiempo. Entonces, quería asegurarse de que la ventana se limitara para estos tipos de cambios de diseño.
Con estas dos cosas en mente, comparar una variedad de tamaños de ventana en muchos páginas web reales, llegamos a la conclusión de que 5 segundos sería un buen límite para la 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 peor. como resultado de este cambio.
Y, según nuestro análisis, el 55% de los orígenes no verán un cambio en CLS en absoluto en el percentil 75. Esto se debe a que sus páginas actualmente cambios de diseño o los cambios que sí tienen ya están confinados a un ventana de sesión única.
El resto de los orígenes observarán puntuaciones mejoradas en el percentil 75 con este cambio. La mayoría verá una leve mejora, pero alrededor del 3% mejoran sus puntuaciones luego de que "necesita mejorar" o "deficiente" calificación para tener un “buen” calificación. Estas páginas suelen usar desplazamientos infinitos o tienen muchas actualizaciones de IU lentas, como se describió en nuestra página publicación.
¿Cómo puedo probarlo?
Pronto actualizaremos nuestras herramientas para usar la nueva definición de métrica. Hasta entonces, Puedes probar la versión actualizada de CLS en cualquier sitio usando el ejemplo JavaScript implementaciones o la bifurcación de las Métricas web .tfvars.json.
Gracias a todos los que se tomaron el tiempo de leer la publicación anterior y dar su comentarios.