A partir de hoy, se implementó un cambio en CLS en varias plataformas de herramientas web de Chrome, como Lighthouse, PageSpeed Insights y el Informe de UX de Chrome.
Hoy, queremos contarte cómo estamos evolucionando las mediciones de la Cambio de diseño acumulado (CLS) en varias plataformas de herramientas web de Chrome. Para los desarrolladores, estos cambios reflejarán mejor la experiencia del usuario de páginas de larga duración (como las que tienen desplazamiento infinito o apps de una sola página). Estas actualizaciones de CLS se implementarán en herramientas como Lighthouse, PageSpeed Insights y el Informe sobre la UX de Chrome.
Nos gustaría ver menos cambios de diseño en la Web. Aquí es donde la métrica CLS ha demostrado ser útil para medir la estabilidad visual de una página web. Fomenta que los sitios configuren mejor las dimensiones del contenido como imágenes o anuncios, que pueden contribuir a saltos sorprendentes en el contenido.
La métrica se denomina "acumulada". porque la puntuación de cada cambio individual se suma a lo largo de la vida útil de una página. Si bien todos los cambios de diseño en la Web causan malas experiencias del usuario, las páginas de larga duración, como las aplicaciones de una sola página (SPA) o las aplicaciones de desplazamiento infinito, acumulan naturalmente más CLS con el tiempo. Limitando la agregación a la peor “ventana” de turnos, El CLS ahora se puede medir de forma más coherente, independientemente de la duración de la sesión.
Como anunciamos en Evolución de la métrica de CLS, ajustaremos la métrica de CLS a un valor de ventana de sesión máxima con un intervalo de 1 segundo, con un límite de 5 segundos, esta actualización refleja mejor la experiencia del usuario en las páginas de larga duración. Con este cambio en marcha, El 70% de los orígenes no deberían esperar ver ningún cambio de CLS en el percentil 75, y el 30% restante verá una mejora.
Lanzamiento del ajuste de la renderización en ventanas en CLS
Hablamos de que la definición actualizada de CLS es una ventana de sesión máxima con un intervalo de 1 segundo. se limita a 5 segundos. ¿Qué significa esto para las herramientas?
A partir de hoy, Este cambio en CLS se implementó en varias plataformas de herramientas web de Chrome, incluidas Lighthouse, PageSpeed Insights e Informe de UX de Chrome. A continuación, puedes ver un resumen del lanzamiento del ajuste de la renderización en ventanas de CLS. y las herramientas que aún permiten comparar con la implementación original.
| Herramienta | Ajuste de la renderización en ventanas de CLS “en vivo” | "Anterior" Disponibilidad de CLS |
|---|---|---|
| Panel de Herramientas para desarrolladores de Lighthouse | Canal de Canary, 2 de junio de 2021 | N/A |
| CLI de Lighthouse | v8, lanzada el 1 de junio de 2021 | Disponible como totalCumulativeLayoutShift en Lighthouse v8 |
| Lighthouse CI | v0.7.3, 3 de junio de 2021 | N/A |
| PageSpeed Insights (PSI) | 1 de junio de 2021 | NA |
| API de PSI | 1 de junio de 2021 | Disponible en lighthouseResult como totalCumulativeLayoutShift. No disponible en el campo de datos de loadingExperience |
| Informe de UX de Chrome (CrUX): BigQuery | Conjunto de datos 202105, publicado el 8 de junio de 2021 | Disponible como experimental.uncapped_cumulative_layout_shift hasta 202111 |
| Informe de UX de Chrome (CrUX): API | 1 de junio de 2021 | Después del 1 de junio de 2021, disponible como
experimental_uncapped_cumulative_layout_shift
14 de diciembre de 2021 |
Las Herramientas para desarrolladores de Chrome también se actualizarán para admitir el ajuste de la renderización en ventanas en breve. La actualización del CLS también se realizó en Search Console y reflejará el 1 de junio de 2021.
Para la mayoría de los desarrolladores, se espera que este cambio ocurra sin problemas y sin necesidad de realizar ninguna acción para aprovechar los datos de la corrección.
"Anterior" CLS
Como recordatorio, la "vieja" CLS mide los cambios de diseño a lo largo de toda la vida útil de la página. Como es posible que algunos desarrolladores deseen supervisar la definición anterior de CLS junto con el ajuste de la renderización en ventanas, tenemos buenas noticias: expondremos "CLS anterior" en Lighthouse y CrUX.
En Lighthouse v8,
está disponible en el archivo JSON
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift
Lo encontrarás como
experimental_uncapped_cumulative_layout_shift
en la API de CrUX
experimental.uncapped_cumulative_layout_shift en BigQuery en CrUX
Después del 1 de junio, las solicitudes a la API de CrUX devolverán el "CLS anterior". métrica:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Después del 8 de junio, BigQuery en CrUX comparará la CLS anterior con la nueva:
WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start
Podrás seguir confiando en que estos datos estarán presentes durante un período de hasta 6 meses. con "CLS anterior" se retirará el 14 de diciembre de 2021.
Actualiza la ponderación de CLS en Lighthouse
Cuando se introdujo CLS por primera vez en Lighthouse, era una métrica brillante y completamente nueva. Así, para asegurarnos de que los desarrolladores tuvieran tiempo de hacer pruebas, comparar y realizar optimizaciones en función de él, CLS tuvo menos peso en la puntuación de rendimiento.
Después de un tiempo en manos de los desarrolladores, La puntuación de Lighthouse aumentó el peso de CLS de un 5% a un 15% coherentes con la metodología de tener Métricas web esenciales podrían ser las métricas más ponderadas en la puntuación de Lighthouse.
Puedes encontrar las ponderaciones actualizadas de las métricas en Lighthouse v8, en el calculadora de puntuación.
La implementación de CLS de Lighthouse 8.0 incluye la renderización en ventanas y la contribución de CLS de los submarcos. Antes de la versión 8.0, CLS en Lighthouse no incluía los submarcos. CLS en el cálculo de métricas, pero ahora lo hace. Y solo para la confirmación, el campo CLS medido por CrUX también maneja la renderización en ventanas y los submarcos de manera similar.
Aun así, la principal diferencia entre el CLS del lab y el de campo es que la ventana de observación del lab CLS termina en el estado “completamente cargado” según lo determinado en las condiciones del lab, mientras que, en el campo, la ventana de observación se extiende a toda la vida útil de la página, incluida la actividad posterior a la carga. Dicho esto, el ajuste de la renderización en ventanas mitiga esta diferencia de manera sustancial.
Mide en el campo tú mismo
Si deseas medir la última implementación de CLS, también puedes registrar esto para los datos de campo a través de RUM con el siguiente fragmento de PerformanceObserver.
O basándote directamente en el Biblioteca JavaScript de Métricas web, que también se actualizó con este cambio.
Actualizaciones adicionales
Más allá de las actualizaciones del Cambio de diseño acumulado, También se realizaron las siguientes actualizaciones relacionadas con las métricas en nuestras herramientas web:
- Actualizaremos la definición más reciente de la métrica Largest Contentful Paint Las APIs de CrUX, PSI, PSI y Search Console se actualizarán el 1 de junio de 2021. BigQuery de CrUX se actualizará el 8 de junio de 2021.
- En CrUX, se actualizaron los umbrales de tri-binación del primer procesamiento de imagen con contenido para que sean: Buena: [0-1.8 s], Necesita mejoras: (1.8 s a 3 s), Deficiente: [3s-∞]
Conclusiones
Esperamos que este cambio refleje una transición sin problemas para la mayoría de los sitios, por lo que le recomendamos que consulte Métricas web y Optimiza la métrica CLS para obtener sugerencias y trucos sobre cómo medir y optimizar los cambios de diseño. Como siempre, no dudes en comunicarte con nosotros en el grupo web-vitals-feedback para recibir comentarios sobre las métricas y nuestros foros de comentarios específicos sobre herramientas Lighthouse y Informe de UX de Chrome por problemas con las herramientas. ¡Salud!
Agradecemos a Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose y Paul Ireland por sus comentarios.
Hero image de Barn Images / @barnimages en Unsplash