What are the main user experience metrics on the web?
User experience is crucial to the success of a website. Three essential metrics that allow us to measure the quality of the experience are LCP, FID and CLS. Let's analyze each of these metrics in detail to understand how they impact the user's perception of our website and, of course, how we can optimize them. Not only do they determine the fluidity with which users interact with our pages, but they also affect overall performance and conversions, embodying the difference between digital success and failure.
What is LCP (Largest Contentful Paint)?
The LCP measures the time it takes to load the largest element visible in the browser display window. This element is usually an image or a significant block of text and is the metric that tells us how our site is loading in visual terms. How fast this element loads is crucial to the user's perception of the site's loading speed.
Good: When the LCP is below 2.5 seconds.
Fair: Between 2.5 and 4 seconds.
Bad: Above 4 seconds.
An example of a good LCP can be found on Instagram, where significant logos and images load from the first milliseconds and remain visible, ensuring a positive user experience.
How is FID (First Input Delay) measured?
FID measures the time between when a user first interacts with a page (e.g., clicking a link or button) and when the browser actually responds to that interaction. It is a critical metric in evaluating initial page interactivity.
Ideal: Less than 100 milliseconds.
Acceptable: Between 100 and 300 milliseconds.
Poor: More than 300 milliseconds.
In complex scenarios, the FID is measured by the longest response time recorded, which can happen if the browser is busy processing other elements. Optimizing FID involves reducing the load on the browser's main execution to prioritize a fast response to user interaction.
What is the importance of CLS (Cumulative Layout Shift)?
CLS measures the visual stability of the page and evaluates how many elements change position unexpectedly while the page is loading. This is crucial because a site with too many content jumps can frustrate users, especially if they try to interact with something that suddenly shifts.
Good: Less than 0.1.
Medium: Between 0.1 and 0.25.
Bad: Greater than 0.25.
A typical example is when a button suddenly appears and displaces the visual content, negatively affecting the user experience. Stability in design is key to keep users focused and satisfied.
How can we improve these metrics?
To optimize these metrics and, consequently, improve the user experience, several strategies can be implemented. Here are some practical recommendations:
Optimize large resources: compress images and multimedia resources to improve LCP.
Set dimensions for all elements: This prevents graphic content from causing scrolling while the page loads, improving CLS.
With these steps, you not only achieve an outstanding user experience, but also optimize overall website performance, which can result in higher conversion rates. Remember to always stay up to date with web development best practices and continue to learn in order to always improve.
Contributions 17
Questions 0
Sort by:
Want to see more contributions, questions and answers from the community?
⚠️ Corrección: En el minuto 0’59" del video dije que para LCP, es malo si es menor a 2.5sec; es totalmente lo opuesto, tal como se ve en la misma gráfica, LCP estará bien cuando se mantiene menor a 2.5seg 😁
Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe ocurrir dentro de los 2.5 segundos posteriores al inicio de la carga de la página.
First Input Delay (FID): Mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.
Cumulative Layout Shift (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0.1.
Viendo este video, me interesé en como se calcularía el CLS en un sitio, ya que este valor a diferencia de los anteriores no está dado por el tiempo. Leyendo esta página, hice el siguiente resumen de como calcularlo.
Nota: Primero es importante caer en cuenta que un cambio de disposición (Layout Shift) se da cuando un elemento cambia su posición inicial. Si un elemento cambia su tamaño o un nuevo elemento es agregado al DOM, no hay un cambio de disposición a menos que esto haga que otro componente ya visible cambie su posición.
El calculo del puntaje del CLS se da por la siguiente formula:
puntaje de cambio = fracción de impacto * fracción de distancia
En esta imagen podemos ver un elemento que toma el 50% del viewport en el primer cuadro, y en el segundo cuadro el elemento se ha movido un 25% hacia abajo en el viewport. La línea roja está indicando la union del area visible del elemento en ambos cuadros, que en este caso es del 75% (50% inicial y 25% del movimiento), por lo tanto la fracción de impacto de este elemento es de 0.75.
La fracción de distancia se calcula obteniendo la distancia mayor que un elemento inestable (la caja gris con texto, en este ejemplo) se ha movido en el cuadro actual, este movimiento se debe tener en cuenta en relación a la dimensión mas grande del viewport (altura o anchura).
En el ejemplo de arriba, la dimensión mas grande del viewport es claramente la altura y el elemento se movio un 25% de la altura del viewport, por lo que la fracción de distancia es de 0.25.
Esta fracción de distancia se puede obtener dividiendo la cantidad de píxeles que se movió el elemento divido la dimensión mas grande: pixeles movidos / dimensión mas grande.
Teniendo en cuenta el ejemplo anterior, ya tenemos las dos fracciones que necesitamos para calcular el puntaje de cambio. Recordemos que nuestra fracción de impacto es de 0.75 y nuestra fracción de distancia es de 0.25, por lo tanto aplicando ambos en la formula nos da que:
Este curso es increíble. Lo que mas me esta gustando es que esta actualizado, ya que los responsables de Google en proveer estas herramientas de medición de performance constantemente hacen ajustes a sus mediciones. Y hace poco como en Mayo aproximadamente, realizaron unos cambios y esas métricas que mencionan tienen distinta ponderación porque cada vez mas se estan enfocando mucho en la experiencia del usuario, lo cual es bueno, pero tambien nos permite estar constantemente viendo que mas podemos mejorar para ayudar a nuestros usuarios.
Iniciativa de Google para proporcionar una guía unificada de indicadores de calidad que son esenciales para brindar una excelente experiencia de usuario en la web, tiene como objetivo simplificar el panorama y ayudar a los sitios a centrarse en las métricas que más importan, los llamados;
⠀ Core Web Vitals: Estos son las métricas más importantes para medir las distintas facetas de experiencia de usuario, se centran en carga, interactividad y estabilidad visual.
**LCP (Largest Contentful Paint - Pintura con contenido más grande)**: Se refiere al tiempo para el despliegue del contenido más extenso, LCP , mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los 2,5 segundos desde que la página comienza a cargarse.
FID (First Input Delay - Primer Retardo de Entrada): Se refiere a la demora para la primera entrada, FID, mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.
CLS (Cumulative Layout Shift - Cambio de Diseño Acumulativo): Se refiere a el cambio acumulativo en el diseño CLS, mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.
Ahora en Chrome 91 en los DevTools>Performance>Web Vitals si le hacemos hover podemos ver un pop-up que nos indica si nuestro performance esta bien o mal 😄
Aunque útiles, no abarcan toda la complejidad de la experiencia del usuario. Además, son métricas altamente influenciadas por factores que no siempre están bajo el control del desarrollador, como la conexión del usuario o la potencia del dispositivo.
Optimizar una métrica a veces puede perjudicar otra. Por ejemplo, reducir el LCP puede aumentar el CLS si los elementos cargan fuera de lugar.
LCP (Largest Contentful Paint) CARGA
Es el tiempo que tarda en pintar el mayor elemento visible en la ventana.
Este medida va a ser BUENA cuando esté entre 0 y 2.5 s; REGULAR cuando esté entre 2.5 y 4 s, y va a ser MALA cuando esté de 4 s en adelante. IDEALMENTE: los elementos que ocupan una buena porción en nuestra página (como las imágenes, como los logos), deberían aparecer desde los primeros milisegundos en la carga del sitio.
FID (First Input Delay) INTERACTIVIDAD
Es el tiempo que tarda la página en responder a las acciones del usuario.
Esta es la métrica que nos va a penalizar por el tiempo que nosotros nos demoremos en dar una respuesta ante la interactividad de nuestros usuarios.
El tiempo, cuando es menor a 100 ms está MUY BIEN, cuando está entre 100 y 300 ms está “BIEN”, y cuando está de 300 ms hacia arriba está DEFICIENTE.
El FID toma el peor tiempo de respuesta.
CLS (Cumulative Layout Shift) ESTABILIDAD
Mide todos los cambios inesperados en el layout de una página.
Esto nos va a pensalizar cuando de un momento a otro (sobre todo de manera inesperada o brusca) los elementos cambien de tamaño.
Cuando tenemos acumulaciones menores a 0.1 s está BIEN, si está entre 0.1 y 0.25 s está “OK”, y si está de 0.25 s en adelante es DEFICIENTE.
. Main Thread: es el hilo de ejecución.
LCP: CARGA Largest Contentful Paint -> El tiempo que tarda en pintar el mayor elemento visible en la ventana. Es buena con menos de 2.5 segundos, regular entre 2.6 y 4 segundos y mala mayor a 4 segundos. Desde los primeros milisegundos, las imágenes deben ser las primeras cosas en cargar.
FID: INTERACTIVIDAD First Input Delay -> El tiempo que tarda la página en responder a las acciones del usuario. Es buena respuesta en menos de 100ms, regular entre 100 y 300ms y mala mayor a 300ms. El FID va a medir nuestro peor tiempo de respuesta.
CLS: ESTABILIDAD Cumulative Layout Shift -> Mide todos los cambios inesperados en el layout de una página. Es buena si los cambios son menores a 0.1, regulares si son entre 0.1 y 0.25 y malos mayores a 0.25
Want to see more contributions, questions and answers from the community?