New Relic Now Learn about New Relic’s most transformative platform update yet with 15 product launches.
Save your seat.

Las aplicaciones web modernas de gran escala pueden beneficiarse de un desarrollo basado en piezas más pequeñas y autónomas, gestionadas por distintos equipos, que luego se integran para ofrecer una experiencia impecable al usuario final. Al optimizar la escalabilidad y la autonomía, esta práctica permite que los equipos trabajen en conjunto para ofrecer una experiencia mucho más completa y eficiente, imposible de lograr individualmente. Pero ¿qué sucede si quieres medir el rendimiento de los componentes individuales de esa aplicación? Y, aún más importante, ¿cómo monitoreas el rendimiento de las páginas principales de la aplicación para detectar ralentizaciones y problemas antes de que afecten a los usuarios finales?

En el desarrollo local, la API de rendimiento del browser ofrece una solución nativa que permite medir la duración de las tareas clave directamente en tu browser, utilizando marcasmedidas. Esta herramienta es simple y poderosa, proporciona una interfaz intuitiva para recopilar tiempos de ejecución de tareas y, además, puede mostrarlos directamente en las herramientas para desarrolladores al auditar el rendimiento de la página local. Es compatible con todos los browser principales y ha sido una herramienta clave en la optimización web local durante más de una década. Pero en el caso de aplicaciones complejas donde gran parte de la plataforma pertenece a otros equipos, comprender los problemas y las ralentizaciones en los distintos componentes de un sitio web puede resultar un desafío, especialmente cuando hay tantos factores externos en juego. La velocidad de Internet, la compatibilidad del browser, la ubicación del usuario y el estado de la página son solo algunas de las muchas variables que pueden afectar el rendimiento de tu sitio web. Si no puedes agrupar y analizar métricas a nivel global en la aplicación, es fácil pasar por alto problemas de rendimiento.

Medición del rendimiento de renderizado en New Relic

En New Relic, monitoreamos y optimizamos el rendimiento de nuestras aplicaciones de micro-frontends (MFE) segmentadas mediante un conjunto estandarizado de marcas y medidas. Estas se aplican a nuestros componentes y a la plataforma, y brindan información valiosa sobre los cambios. Para lograrlo, creamos una serie de mediciones diseñadas para ofrecer una visión integral del rendimiento web, tanto a nivel de componentes individuales como de toda la página. Se recopilan medidas sobre el tiempo de renderizado de cada componente que se ejecuta en la plataforma de New Relic. Estas medidas se centran en registrar el tiempo de carga de los componentes y se integran en sus hooks de ciclo de vida, utilizando bibliotecas compartidas que funcionan como herramientas para cada equipo de MFE durante el desarrollo. Por ejemplo, una biblioteca de herramientas compartida puede encargarse de crear una 'marca' con espacio de nombres en el momento en que se importa o instancia cada componente. Luego, se puede establecer otra marca cuando el componente se renderiza por primera vez. A partir de estas marcas, se puede definir una medida precisa, y la duración de la tarea se captura mediante la API de rendimiento del browser.

Además de las medidas de los componentes, también se registran las duraciones del tiempo de carga de la plataforma, que es la parte de la aplicación web responsable de ensamblar y renderizar los componentes individuales. Finalmente, se registran medidas que representan los tiempos naturales de carga de la página, independientemente de la plataforma o de los componentes de la aplicación. En conjunto, estas métricas crean una visión integral del rendimiento y proporcionan una serie de parámetros de medición para futuras degradaciones o desviaciones.

Basándote en la descripción anterior, visualiza las siguientes medidas simplificadas que podrían registrarse en toda una aplicación web: 

  • Tiempo de carga total del componente (CTLT): medida que registra el tiempo de carga total de componentes individuales.
  • Tiempo total de carga de la plataforma (PTLT): medida que registra el tiempo de carga total de la plataforma.
  • Tiempo de carga total (TLT): combina CLT, PLT y otros factores para proporcionar una medición integral del tiempo de carga.

Estas medidas se pueden desglosar en submedidas, como: 

  • Tiempo de carga del servidor (SLT): medida que registra el tiempo de ejecución del servidor.
  • Tiempo de carga de recursos de la plataforma (PALT): medida que registra el tiempo necesario para que la plataforma cargue sus recursos.
  • Tiempo de ejecución de la plataforma (PET): medida que registra el tiempo que tardan en ejecutarse los callbacks en la plataforma.
  • Tiempo de carga de recursos del componente (CALT): medida que registra el tiempo de carga de los recursos del componente.
  • Tiempo de carga de datos del componente (CDLT): medida que registra el tiempo de carga de las llamadas de red para hidratar el componente.

Estos valores son útiles a nivel local, ya que desglosan los tiempos en tus herramientas de desarrollo y perfiles de rendimiento. Las mediciones aparecen directamente en tu perfil de rendimiento y pueden visualizarse rápidamente.

perfil de rendimiento visualizado para la aplicación sitio web

Agrupar estos valores en todas las páginas y componentes de la aplicación web permite obtener nuevas capacidades de observación. Se pueden configurar alertas si alguna parte de la aplicación muestra signos de degradación, y es posible identificar componentes específicos cuando se detectan cuellos de botella. En aplicaciones complejas o arquitecturas basadas en micro-frontends, determinar el "qué" y el "quién" suelen ser la preguntas más importantes, pero también las más difíciles de responder. ¿Cómo se pueden recopilar todas las mediciones de cada página y componente en un único conjunto de datos?

Presentamos nuestra nueva integración de recopilación de datos: eventos de New Relic BrowserPerformance

La nueva integración de recopilación de datos del agente de browser está diseñada para recopilar automáticamente marcas y medidas de rendimiento nativas de forma predeterminada. Esta herramienta detecta cuándo se agregan marcas o medidas a la API de rendimiento y crea nuevos eventos para cada elemento, conocidos como eventos "BrowserPerformance". Estos eventos recopilan automáticamente la información básica de la API, los atributos personalizados y los identificadores de página. Solo tienes que usar la API de medición de rendimiento como de costumbre, y el agente de browser de New Relic recogerá de forma automática tus marcas y medidas en todo el ecosistema de tu aplicación, proporcionando una visión más integral gracias a la plataforma de New Relic.

¿Por qué es esto importante?

Al recopilar y analizar automáticamente las métricas de rendimiento, nuestra herramienta permite a los equipos identificar con precisión los tiempos asociados a cada componente, página, equipo y versión. Esto resulta especialmente útil para determinar qué equipos son responsables de los tiempos relevantes y comprender cómo contribuye cada componente al rendimiento general de la aplicación.

Por ejemplo, si tu aplicación registra medidas similares a CTLT, PTLT y TLT, New Relic recopilará automáticamente estos valores y los procesará. Esto permite evaluar dichas duraciones en toda la aplicación, proporcionando información valiosa para la optimización y el análisis del rendimiento. Los equipos pueden ver cómo se desempeñan sus componentes en escenarios reales y tomar decisiones basadas en datos para mejorar su código. Configura alertas y monitorea dashboards para detectar problemas antes de que afecten a los clientes, y celebra las mejoras en el rendimiento con la seguridad que brindan los datos.

series temporales
Tabla de rendimiento de artefactos

Los casos de uso de medidas de rendimiento se extienden mucho más allá de la implementación descrita aquí. Cualquier tarea compleja cuya duración desees medir se puede representar fácilmente utilizando la API de rendimiento. Con el agente de browser de New Relic, puedes agrupar todas las mediciones en un mismo lugar para analizar el rendimiento de manera integral.

Con los eventos de New Relic BrowserPerformance, puedes garantizar que cada tarea clave esté optimizada y que el rendimiento general de la aplicación cumpla con las expectativas, incluso en arquitecturas complejas. Al identificar los tiempos específicos y definir la responsabilidad de cada tarea, podrás abordar los cuellos de botella de manera más efectiva y fomentar una mejor colaboración entre los equipos.

Cómo iniciar la recopilación de marcas y medidas en el browser

Instalación y configuración

Para utilizar el agente de browser de New Relic y recopilar marcas y medidas, debes seguir algunos pasos para instalarlo y configurarlo correctamente. A continuación, te indicamos cómo hacerlo.

  1. Abre New Relic y luego selecciona  Agregar datos en el panel de navegación.
  2. Selecciona Browser y Móvil, luego selecciona la fuente de datos del monitoreo de browser.
  3. Selecciona tu método de despliegue, ya sea APM o Copiar/Pegar.
  4. Selecciona una aplicación existente monitoreada en APM o pon un nombre a tu nueva aplicación. Luego, haz clic en Habilitar.

También puedes utilizar el paquete de monitoreo del rendimiento de redes (NPM) del agente del browser para instrumentar tu página web. Para obtener más información sobre este proceso, consulta esta guía de instrumentación. La captura manual de los logs del browser es compatible con las versiones 1.261.0 y superiores del agente del browser.

Habilita la detección de marcas y medidas

Para comenzar a recopilar marcas y/o medidas durante su versión preliminar limitada, consulta nuestros documentos

Encuentra tus datos en New Relic

Una vez habilitado, el agente almacena los datos de marcas y medidas en el tipo de evento BrowserPerformance en New Relic. Los eventos BrowserPerformance recopilarán toda la información disponible en la API, incluyendo la duración, el nombre y cualquier detalle personalizado asignado al valor. Los atributos personalizados asociados a tu agente de browser también se registrarán en cada evento BrowserPerformance. Además, se registrarán identificadores de página, como la sesión, el ID de traza, el ID de usuario y las URL de las páginas, para proporcionar una visión más completa de los datos recopilados. Para acceder a estos datos prueba la siguiente consulta y luego crea dashboards personalizados para monitorear el rendimiento.

Esta sencilla consulta en New Relic Query Language (NRQL) recupera todos los eventos BrowserPerformance de la aplicación especificada ("My Application"), donde entryName es marca o medida.

DE BrowserPerformance SELECCIONAR * DONDE appName = 'Mi aplicación' Y entryName = 'marca' O entryName = 'medida'

Instala el agente del browser y comienza a optimizar tu aplicación web compleja hoy mismo. ¡Feliz codificación!