Cómo comparar y mejorar Web Vitals con métricas de usuarios reales

Este artículo ha sido amablemente respaldado por nuestros queridos amigos de Raygun, quienes ayudan a los desarrolladores a identificar problemas antes de que sus clientes se vean afectados, brindando el estándar de experiencia que los usuarios esperan y merecen. ¡Gracias!

¿Cómo mediría el rendimiento? A veces, es la cantidad de tiempo que tarda una aplicación desde la solicitud inicial hasta que se procesa por completo. Otras veces se trata de qué tan rápido se realiza una tarea. También puede ser el tiempo que tarda el usuario en recibir comentarios sobre una acción. Tenga la seguridad de que todas estas definiciones (y otras) serían correctas, siempre que se presente el contexto adecuado.

Desafortunadamente, no existe una bala de plata para medir el rendimiento. Los diferentes productos tendrán diferentes puntos de referencia y dos aplicaciones pueden funcionar de manera diferente con las mismas métricas, pero aun así clasificarse de manera bastante similar a nuestros veredictos subjetivos "buenos" y "malos".

En un esfuerzo por simplificar el lenguaje y promover la colaboración y la estandarización, nuestra industria ha desarrollado conceptos generalizados. De esta forma, los desarrolladores pueden compartir soluciones, definir prioridades y centrarse en realizar el trabajo de manera eficaz.

Rendimiento frente a rendimiento percibido

Tome este fragmento como ejemplo:

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

El propósito de esto no es importante, y realmente no hace nada excepto tomar una cantidad considerable de tiempo para enviar un número a la consola. Frente a este código, uno diría (con razón) que no funciona bien. No es un código rápido de ejecutar y podría optimizarse con diferentes tipos de bucles o realizar esas tareas en un solo bucle.

Otra cosa importante es que tiene el potencial de bloquear la visualización de una página web. Congela (o incluso bloquea) la pestaña de su navegador. Entonces, en este caso, el desempeño percibido por el usuario va de la mano con el desempeño de la tarea en sí.

Sin embargo, podemos ejecutar esta tarea en un trabajador web. Al evitar el bloqueo de procesamiento, nuestra tarea no se realizará más rápido, por lo que se podría decir que el rendimiento sigue siendo el mismo, pero el usuario aún podrá interactuar con nuestra aplicación y recibir los comentarios adecuados. Eso afecta la rapidez con la que nuestro usuario final percibirá nuestra aplicación. No es más rápido, pero tiene mejor Rendimiento Percibido .

Nota : siéntase libre de explorar mi prueba de concepto de react-web-workers en GitHub si desea saber más sobre Web-Workers y React.

Web vitales

El rendimiento web es un tema amplio con miles de métricas que podría monitorear y mejorar. Web Vitals es la respuesta de Google para estandarizar el rendimiento web. Esta estandarización permite a los desarrolladores centrarse en las métricas que tienen el mayor impacto en la experiencia del usuario final.

• Primera pintura con contenido (FCP)
  El tiempo desde que comienza la carga hasta que el contenido se representa en la pantalla.
• Pintura con contenido más grande (LCP)
  El tiempo de renderizado de la imagen o el bloque de texto más grande es visible dentro de la ventana gráfica. Una buena puntuación es inferior a 2,5 s para el 75 % de las cargas de página.
• Primera demora de entrada (FID)
  El tiempo desde que el usuario interactúa con la página hasta que el navegador puede procesar la solicitud.
  Una buena puntuación es menos de 100 ms para el 75 % de las cargas de página.
• Cambio de diseño acumulativo (CLS)
  La suma total de todos los cambios de diseño individuales para cada cambio inesperado que ocurre en la vida útil de la página. Una buena puntuación es 0,1 en el 75 % de las cargas de página.
• Tiempo para Interactivo (TTI)
  El tiempo desde que la página comienza a cargarse hasta que se cargan sus principales subrecursos.
• Tiempo total de bloqueo (TBT)
  El tiempo entre First Contentful Paint y Time to Interactive donde se bloqueó el subproceso principal (sin capacidad de respuesta a la entrada del usuario).

¿Cuál de estos es el más importante?

Core Web Vitals es el subconjunto de Web Vitals que Google ha identificado como el que tiene el mayor impacto en la experiencia del usuario final. A partir de 2022, hay tres Core Web Vitals: pintura con contenido más grande (velocidad), cambio de diseño acumulativo (estabilidad) y retraso de la primera entrada (interactividad).

Lectura recomendada : la guía para desarrolladores de Core Web Vitals

Informe de experiencia de usuario de Chrome frente a métricas de usuarios reales

Hay varias formas de probar Web Vitals en su aplicación. La más fácil es abrir Chrome Devtools, ir a la pestaña Lighthouse, verificar sus preferencias y generar un informe. Esto se denomina Informe de experiencia de usuario de Chrome (CrUX) y se basa en un promedio de 28 días de muestras de usuarios de Chrome que cumplen con ciertos requisitos:

• sincronización del historial de navegación;
• sin configuración de contraseña de sincronización;
• informes de estadísticas de uso habilitados.

Pero es bastante difícil definir qué tan representativo es el Informe de UX de Chrome para sus propios usuarios. El informe sirve como un rango aproximado y puede ofrecer un buen indicador de las cosas que se deben mejorar de forma ad hoc. Por eso es una muy buena idea usar una herramienta de Monitoreo de Usuario Real (RUM), como Raygun. Esto informará sobre las personas que realmente interactúan con su aplicación, en todos los navegadores, dentro de un período de tiempo asignado.

Sin embargo, monitorear las métricas de los usuarios reales no es una tarea sencilla. Hay una plétora de obstáculos a tener en cuenta. Sin embargo, no tiene por qué ser complicado. Es fácil configurarse para obtener métricas de RUM con herramientas de monitoreo de rendimiento. Una de las opciones que vale la pena considerar es Raygun: se puede configurar en unos pocos pasos rápidos y es compatible con GDPR. Además, también obtiene muchas funciones de informe de errores.

Monitoreo de aplicaciones

Los desarrolladores a menudo tratan la observación y el control del rendimiento como algo secundario. Sin embargo, el monitoreo es un aspecto crucial del ciclo de vida del desarrollo que ayuda a los equipos de software a moverse más rápido, priorizar los esfuerzos y evitar problemas graves en el futuro.

La configuración de la supervisión puede ser sencilla, y la creación de funciones que tengan en cuenta la observabilidad ayudará al equipo a realizar el mantenimiento básico y la higiene del código para evitar esos terribles sprints de refactorización. El monitoreo de aplicaciones puede ayudarlo a dormir tranquilo por la noche y guiar a su equipo para crear mejores experiencias de usuario.

Supervise las tendencias y evite las regresiones

De la misma manera, tenemos pruebas ejecutándose en nuestra canalización de integración continua (idealmente) para evitar errores y regresiones de características, deberíamos tener una forma de identificar las regresiones de rendimiento para nuestros usuarios inmediatamente después de una nueva implementación. Raygun puede ayudar a los desarrolladores a automatizar este trabajo con su función de seguimiento de implementación.

Cumplir con el presupuesto de desempeño se vuelve más sostenible. Con esta información, su equipo puede detectar rápidamente regresiones (o mejoras) en el rendimiento en todos los Web Vitals, identificar implementaciones problemáticas y concentrarse en los usuarios afectados.

Profundice y tome medidas

Al usar RUM, es posible reducir los resultados por usuario. Por ejemplo, en Raygun, es posible hacer clic en una puntuación o barra en el histograma para ver una lista de usuarios afectados. Esto hace posible comenzar a profundizar más en las sesiones de forma individual, con información a nivel de instancia. Esto ayuda a tomar medidas directamente dirigidas al problema en lugar de simplemente confiar en las mejores prácticas generales. Y posteriormente, diagnosticar las repercusiones del cambio.

Destacar eventos inusuales

Por supuesto, esas funciones son increíbles y un desarrollador responsable debe estar atento a los paneles de monitoreo de aplicaciones. Pero a medida que su aplicación escala, los equipos crecen y las responsabilidades se dividen, es más importante que nunca configurar procesos automatizados que le alerten rápidamente sobre cualquier problema de rendimiento importante. Es por eso que es una mejor práctica recomendada configurar activadores de alerta para su aplicación.

Terminando

En resumen, Web Vitals es el nuevo estándar de oro en rendimiento debido a su correlación directa con la experiencia del usuario. Los equipos de desarrollo que supervisan y optimizan activamente sus Web Vitals en función de los conocimientos de los usuarios reales ofrecerán experiencias digitales más rápidas y resistentes.

Solo hemos arañado la superficie de lo que puede hacer el monitoreo y las soluciones para mantener el mantenimiento del rendimiento mientras escala su aplicación. ¡Déjame saber en los comentarios cómo empleas un presupuesto de rendimiento, una mejor observabilidad u otras soluciones para tener una noche de sueño relajado!