Cumulative Layout Shift (CLS)
(web.dev)La carga lenta de imágenes/publicidad, las operaciones asíncronas y los cambios dinámicos del DOM, entre otros,
miden cuánto cambia el layout de una página web
para verificar la inestabilidad visual centrada en el usuario que puede provocar clics erróneos.
"Una buena puntuación de CLS es 0.1 o menos"
La Layout Instability API proporciona una métrica llamada Layout Shift Score.
- Layout Shift Score = impact fraction (qué tan grande es el objeto que se mueve) * distance fraction (cuánto se mueve)
- Está bien que el layout cambie por acciones del usuario: si hubo una entrada del usuario dentro de los 500 ms, se establece `hadRecentInput`, por lo que puede excluirse del cálculo.
- En lugar de cambiar `height`/`width`, usa `transform:scale()`.
- En lugar de cambiar `top,right,bottom,left`, usa `transform: translate()`.
Cómo mejorar el CLS
- Siempre especifica el tamaño de imágenes/videos o reserva su espacio con CSS Aspect Ratio Boxes, etc.
- Excepto en la interacción del usuario, no agregues contenido nuevo encima del contenido existente.
- Para los cambios entre estados, usa animaciones con CSS Transform, etc.
4 comentarios
A menudo pasa que, justo en el momento en que vas a presionar algo, el layout cambia un poco de repente y terminas tocando lo que no querías, lo cual puede ser muy frustrante; por fin salió una forma de medir esto cuantitativamente. Personalmente, creo que si se midiera esto en las páginas web de los medios, probablemente arrojaría cifras desastrosas.
Creo que en los medios nacionales hay tantos anuncios, y además esos anuncios en sí mismos son lentos y parpadean, que medir eso en sí probablemente no tenga mucho sentido...
Cambiando de tema, yo uso https://github.com/disjukr/just-news y Tampermonkey para ver solo el cuerpo del artículo en los medios nacionales. Los sitios web están demasiado desordenados.
Antes hasta intenté hacer en Python un [programa que, al poner el enlace de un artículo de un medio, lo cambiara automáticamente por el enlace de la noticia en el portal]. Pero, de una forma bastante absurda, terminé perdiendo el código fuente (por error lo guardé en un RAM drive y luego reinicié) y me dio como un momento de iluminación/agotamiento(?) y lo dejé.
Métricas de rendimiento centradas en el usuario
https://web.dev/user-centric-performance-metrics
https://developers.google.com/web/fundamentals/…
Los indicadores tradicionales como
loadyDOMContentLoadedno son buenas métricas.First contentful paint (FCP): cuando el primer contenido empieza a mostrarse en la pantalla
Largest contentful paint (LCP): cuando se muestra el bloque de texto o la imagen más grande de la página
First input delay (FID): el tiempo que tarda el navegador en responder realmente después de que la entrada del usuario ya es posible
Time to Interactive (TTI): el tiempo que transcurre desde la carga hasta que la interacción del usuario es posible
Total blocking time (TBT): el tiempo total entre FCP y TTI
Cumulative layout shift (CLS): métrica de cambios de diseño acumulados