A partir de hoy, se lanzó 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 compartirte cómo estamos evolucionando la medición de la métrica 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 en las páginas de larga duración (como las que tienen desplazamiento infinito o apps de una sola página). Estas actualizaciones de CLS se lanzarán en herramientas como Lighthouse, PageSpeed Insights y el Informe de UX de Chrome.
A todos nos gustaría ver menos cambios de diseño en la Web. Aquí es donde la métrica CLS demostró ser útil para medir la estabilidad visual de una página web. Ayuda a alentar a los sitios a definir mejor las dimensiones del contenido, como imágenes o anuncios, que pueden contribuir a saltos sorprendentes de contenido para sus usuarios.
La métrica se denomina "acumulativa" 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 apps de una sola página (SPA) o las apps de desplazamiento infinito, acumulan más CLS con el tiempo de forma natural. Cuando se limita la agregación a la peor “ventana” de cambios, el CLS ahora se puede medir de manera más coherente, sin importar la duración de la sesión.
Como anunciamos en Evolución de la métrica CLS, ajustaremos la métrica CLS a una ventana de sesión máxima con una brecha de 1 segundo, con un límite de 5 segundos. Esta actualización refleja mejor la experiencia del usuario de las páginas de larga duración. Con este cambio implementado, el 70% de los orígenes no deberían esperar ver ningún cambio de CLS en el percentil 75, y el 30% restante de los orígenes verá una mejora.
Lanza el ajuste de renderización en ventanas en CLS
Hablamos de que la definición actualizada de CLS es una ventana de sesión máxima con una brecha de 1 segundo, con un límite de 5 segundos. ¿Qué significa eso para las herramientas?
A partir de hoy, este cambio en CLS se implementó en varias plataformas de herramientas web de Chrome, como Lighthouse, PageSpeed Insights y el Informe de UX de Chrome. A continuación, puedes ver un resumen del lanzamiento del ajuste del sistema de ventanas de CLS, así como las herramientas que aún ofrecen la capacidad de realizar comparativas con la implementación original.
| Herramienta | Ajuste de renderización en ventanas de CLS “en vivo” | Disponibilidad de CLS “antiguo” |
|---|---|---|
| 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 de 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 |
Pronto se actualizarán las Herramientas para desarrolladores de Chrome para admitir el ajuste de la renderización en ventanas. La actualización de CLS también se realizó en Search Console y se reflejará a partir del 1 de junio de 2021.
Para la mayoría de los desarrolladores, se espera que este cambio se produzca sin problemas y sin necesidad de realizar ninguna acción para aprovechar los datos de la corrección.
CLS “antiguo”
Como recordatorio, el CLS “antiguo” mide el cambio de diseño durante 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 renderización en ventanas, tenemos buenas noticias para compartir: exponemos el "CLS antiguo" en Lighthouse y CrUX.
En Lighthouse v8,
está disponible en JSON como
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Lo encontrarás como experimental_uncapped_cumulative_layout_shift en la API de CrUX y como experimental.uncapped_cumulative_layout_shift en CrUX BigQuery.
Después del 1 de junio, las solicitudes a la API de CrUX mostrarán la métrica "CLS anterior":
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Después del 8 de junio, CrUX BigQuery comparará las CLS anteriores con las nuevas:
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, y el "CLS antiguo" dejará de estar disponible 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 nueva y brillante. Por lo tanto, con el fin de asegurarse de que los desarrolladores tuvieran tiempo para realizar pruebas, comparativas y optimizaciones en función de ella, se tuvo en cuenta la importancia de CLS en la puntuación de rendimiento.
Ahora, después de haber estado en manos de los desarrolladores, la puntuación de Lighthouse aumentó el peso del CLS del 5% al 15%, coherente con la metodología de hacer que las Métricas web esenciales sean 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 la calculadora de puntuaciones.
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, el CLS en Lighthouse no incluía el CLS de los submarcos en el cálculo de las métricas, pero ahora sí lo incluye. Y solo a modo de confirmación, el CLS de campo medido por CrUX también controla la renderización en ventanas y submarcos de manera similar.
Aun así, la diferencia principal entre el CLS de lab y de campo es que la ventana de observación del CLS de lab termina cuando está “completamente cargada” según lo determinado en las condiciones del laboratorio, 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 forma sustancial.
Realiza mediciones en el campo
Si deseas medir la implementación de CLS más reciente, también puedes registrar esto para tus datos de campo a través de RUM con el siguiente fragmento de PerformanceObserver.
También puedes utilizar la biblioteca de JavaScript de Métricas web, que también se actualizó con este cambio.
Actualizaciones adicionales
Además de las actualizaciones del Cambio de diseño acumulado, se realizaron las siguientes actualizaciones relacionadas con las métricas en nuestras herramientas web:
- Actualizamos a 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. CrUX BigQuery se actualizará el 8 de junio de 2021.
- En CrUX, los umbrales de tres discretizaciones de Primera discretización con contenido se actualizaron para que sean Bueno: [0-1.8 s], Necesita mejoras: (1.8 s a 3 s), Deficiente: [3 s-∞]
Conclusiones
Esperamos que este cambio refleje una transición fluida para la mayoría de los sitios. Te recomendamos que consultes las Métricas web y Optimize CLS para obtener sugerencias y trucos sobre cómo medir y optimizar los cambios de diseño. Como siempre, no dudes en comunicarte con el grupo web-vitals-feedback para enviar comentarios sobre las métricas y nuestros foros específicos sobre herramientas de Lighthouse y del informe de UX de Chrome si tienes problemas con las herramientas. ¡Salud!
Agradecimientos 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