⚠️ 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 😄
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?