Medición de los elementos básicos de la Web con Sentry

Chris tomó algunas notas sobre Core Web Vitals el otro día, explicando por qué medir estas métricas de rendimiento es tan importante:

Sigo pensando que los Core Web Vitals ideados por Google son inteligentes. Cuando comencé a preocuparme por el rendimiento, todo era: ¡reducir las solicitudes! caché cosas! ¡Haz las cosas más pequeñas! Y si bien todos ellos están muy relacionados con el rendimiento web, están relacionados de forma abstracta. El rendimiento web real para los usuarios son cosas como ¿cuánto tiempo tuve que esperar para ver el contenido de la página? ¿Cuánto tiempo pasará hasta que pueda interactuar con la página, como escribir un formulario o hacer clic en un enlace? ¿Las cosas saltaron desagradablemente mientras intentaba hacer algo? Por eso los Core Web Vitals son inteligentes: miden esas cosas.

Ciertamente, existen muchas herramientas que lo ayudan a medir estas métricas extremadamente importantes. La publicación de Chris fue oportuna porque donde trabajo en Sentry ¹ , estamos lanzando nuestra propia versión de esto. Mi bloguera y mentora favorita una vez al año en Sentry, Dora Chan, explicó por qué es importante utilizar datos de usuarios reales cuando se trata de medir Web Vitals y cómo nuestro propio producto lo aborda:

Google Web Vitals se puede ver utilizando la extensión Google Chrome Lighthouse. Quizás se pregunte: “¿Por qué necesitaría Sentry para ver cuáles son si ya tengo Google?” Buena pregunta. Google proporciona datos de laboratorio sintéticos, donde puede controlar directamente su entorno, dispositivo y velocidad de la red. Esto es bueno y todo, pero sólo muestra una parte del panorama. Pintar. ¿Consíguelo?

Sentry recopila datos de campo agregados sobre lo que realmente experimentan sus usuarios cuando interactúan con su aplicación. Esto incluye contexto sobre velocidad de red variable, navegador, dispositivo, región, etc. Con Web Vitals, podemos ayudarle a comprender qué sucede en la naturaleza, con qué frecuencia sucede, por qué y qué más está conectado con el comportamiento.

Sentry desglosa todas estas transacciones en las métricas más importantes para que puedas ver cómo tus clientes están experimentando problemas de rendimiento. Quizás el 42% de las veces una transacción tiene un retraso de entrada de más de 301 ms. Sentry mostraría ese problema y cómo se correlaciona con otros problemas de rendimiento.

Creo que este es el poder de vincular Core Web Vitals con los datos del usuario, o lo que Dora llama “datos de campo”, ¡porque algunos de nuestros usuarios están experimentando una aplicación rápida! ¡Tienen wifi genial! ¡Todos los wifis! Eso es genial y todo, pero todavía hay usuarios del otro lado que soportan una experiencia más miserable, y tener una imagen basada en datos reales del usuario nos permite ver qué acciones específicas están ralentizando las cosas. Esta información es lo que nos da la confianza para acceder al código base y luego solucionar el problema, pero también nos ayuda a priorizar estos problemas en primer lugar. Eso es algo de lo que realmente no hablamos cuando se trata de rendimiento.

¿Cuál es el problema de rendimiento más importante de su aplicación en este momento ? Ésta es una pregunta más complicada de lo que nos gustaría admitir. Quizás una primera pintura de cinco segundos no sea un factor decisivo en la página de configuración de su aplicación, pero tres segundos en la página de pago es insoportable tanto para la empresa como para los clientes.

Entonces, sí, los problemas de rendimiento son así de extraños; El mismo resultado de una métrica puede significar cosas diferentes según el contexto. Y algunas métricas son más importantes que otras dependiendo de ese contexto.

Es por eso que estoy tan entusiasmado con todas estas herramientas. Ver cómo los usuarios experimentan una aplicación en tiempo real y luego, posteriormente, visualizar cómo las métricas cambian con el tiempo, eso es simplemente mágico. Las partituras de Lighthouse están muy bien y, no me malinterpretes, son muy útiles. Simplemente no son una medida extremadamente precisa de cómo los usuarios realmente usan su aplicación en función de sus datos.

Aquí es donde entra en juego otra característica de Sentry. Una vez que se haya registrado y configurado todo, diríjase a la sección Rendimiento y verá qué transacciones mejoran con el tiempo y cuáles han retrocedido o se han vuelto más lentas:

Tony Xiao es ingeniero en Sentry y escribió sobre cómo utilizó esta función para investigar un problema de front-end . Así es: usamos Sentry para medir nuestro trabajo de Sentry ( vaya, inicio ). Al observar el informe de transacciones con mayor regresión, Tony pudo profundizar en la transacción específica que desencadenó un resultado negativo e identificar el problema en ese mismo momento. Así es como lo describió:

Hasta cierto punto, el código es leal a su autor. Es por eso que comunicarse con su código es fundamental. Y es por eso que las tendencias en el monitoreo del desempeño son tan valiosas: no solo le ayudan a comprender los altibajos, sino que también pueden ayudarle a orientarse en la dirección correcta.

De todos modos, no estoy tratando realmente de venderte Sentry aquí. Estoy más interesado en cómo está cambiando el campo del desarrollo front-end y creo que es muy emocionante que todas estas herramientas de la industria se estén uniendo en este momento. Parece que nuestra comprensión de los problemas de rendimiento está mejorando: el lenguaje, las herramientas y las técnicas están evolucionando y la tendencia está cambiando en nuestra industria.

Y eso es algo para celebrar.

1. Sí, trabajo en Sentry pero esta no es una publicación patrocinada. Resulta que el tema de Core Web Vitals es algo a lo que estoy prestando atención y tuve algunas ideas de seguimiento después de leer la publicación de Chris. ↩️