Aplicativos web modernos de grande porte podem se beneficiar ao serem desenvolvidos em partes menores e autônomas, de propriedade de diferentes equipes, posteriormente integrados para criar uma experiência perfeita para o usuário final. Essa prática aumenta a escalabilidade e a autonomia das equipes, permitindo que elas colaborem e criem uma experiência melhor do que qualquer indivíduo conseguiria sozinho. Mas e se você quiser medir o desempenho dos componentes individuais desse aplicativo? E ainda mais importante, como monitorar o desempenho das páginas do aplicativo maior para identificar lentidão e problemas antes que eles afetem seu usuário final?
Para desenvolvimento local, a API de desempenho do navegador oferece uma solução nativa para medir a duração de tarefas críticas de desempenho diretamente no seu navegador usando marcas e medidas. Esta ferramenta é simples e poderosa, fornecendo uma interface intuitiva para coletar durações de tarefas e pode até mesmo exibir essas durações diretamente nas ferramentas do desenvolvedor ao auditar o desempenho da página local. Ela é compatível com todos os principais navegadores e tem sido um elemento essencial da otimização de sites locais por mais de uma década. Mas para aplicativos complexos, onde grande parte da plataforma é de propriedade de outras equipes, entender os obstáculos e lentidões nos muitos componentes de um site pode ser desafiador, especialmente quando há tantos fatores externos em jogo. Velocidade da internet, compatibilidade do navegador, localização do usuário e estado da página são apenas algumas das muitas variáveis que podem afetar o desempenho do seu site. Sem a capacidade de agregar e avaliar métricas em todo o aplicativo, você poderá ter dificuldades na identificação de problemas de desempenho.
Medindo o desempenho da renderização na New Relic
Aqui na New Relic, para monitorar e melhorar o desempenho em nossos aplicativos micro front-end (MFE) segmentados, implementamos um conjunto padronizado de marcas e medidas que se aplicam aos nossos componentes e plataforma, fornecendo insights sobre as mudanças. Para isso, criamos uma série de medidas que visam formar uma visão holística do desempenho da web em componentes individuais e em toda a página da web. Medidas são capturadas para o tempo de renderização de cada componente individual em execução na plataforma New Relic. Essas medidas se concentram em capturar o tempo de carregamento do componente e são integradas aos seus hooks de ciclo de vida, usando bibliotecas compartilhadas que servem como utilitários para cada equipe MFE durante o desenvolvimento. Por exemplo, uma biblioteca de utilitários compartilhada pode ser responsável por criar uma “marca” no momento em que cada componente é importado ou instanciado, e outra marca pode ser definida quando cada componente é renderizado pela primeira vez. Uma medida selecionada pode então ser criada usando as duas marcas, e a duração da tarefa será capturada pela API de desempenho do navegador.
Além das medidas dos componentes, durações também são capturadas para o tempo de carregamento da plataforma — a parte do aplicativo web responsável por unir e renderizar os componentes individuais. Por fim, também são capturadas medidas que representam os tempos de página orgânicos, independentemente da plataforma ou das partes componentes do aplicativo. Juntas, essas métricas criam uma visão holística do desempenho e fornecem uma série de métricas de medição para degradação ou desvio futuros.
Com base na descrição acima, visualize as seguintes medidas simplificadas que podem ser capturadas em toda a extensão de um aplicativo web:
- Tempo total de carregamento de componente (CTLT): uma medida que observa o tempo total de carregamento de componentes individuais.
- Tempo total de carregamento da plataforma (PTLT): uma medida que observa o tempo total de carregamento da plataforma.
- Tempo total de carregamento (TLT): combina CLT, PLT e outros fatores para fornecer uma medição abrangente do tempo de carregamento.
Essas medidas podem ser subdivididas em submedidas, como:
- Tempo de carregamento do servidor (SLT): uma medida que observa o tempo de execução do servidor.
- Tempo de carregamento de ativos da plataforma (PALT): uma medida que observa o tempo que os ativos demoram para carregar pela plataforma.
- Tempo de execução da plataforma (PET): uma medida que observa o tempo que o retorno de chamada levou para disparar na plataforma.
- Tempo de carregamento de ativos de componentes (CALT): uma medida que observa o tempo de carregamento de ativos de componentes.
- Tempo de carregamento de dados de componentes (CDLT): uma medida que observa o tempo de carregamento de chamadas de rede para hidratar o componente.
Esses valores são úteis localmente porque detalham os tempos em suas ferramentas de desenvolvimento locais e perfis de desempenho. As medidas aparecem diretamente no seu perfil de desempenho e podem ser visualizadas rapidamente.
![perfil de desempenho visualizado para aplicativo web](/sites/default/files/styles/900w/public/2025-01/image3_0.png?itok=CV7tl_Hv)
Agregar esses valores em todas as páginas e componentes de todo o seu aplicativo web desbloqueia um novo potencial de observação. Alertas podem ser criados se partes do aplicativo apresentarem degradação. Componentes individuais podem ser identificados quando gargalos são observados. Ao lidar com problemas em aplicativos complexos ou padrões de arquitetura de micro front-end, determinar o "o quê" e "quem" geralmente se torna a questão mais importante, mas também a mais desafiadora de responder. Como você pode compilar todas as medições de cada página e componente em um único conjunto de dados?
Apresentamos nossa nova integração de coleta de dados: eventos New Relic BrowserPerformance
A nova integração de coleta de dados do agente browser foi projetada para coletar automaticamente marcas e medidas de desempenho nativas prontas para uso. Esta ferramenta detecta quando marcas ou medidas são adicionadas à API de desempenho e cria novos eventos para cada item, conhecidos como eventos "BrowserPerformance". Esses eventos capturam as informações básicas da API, atributos personalizados e identificadores de página — automaticamente. Basta usar a API de medida de desempenho normalmente, e o agente New Relic Browser coletará automaticamente suas marcas e medidas em todo o ecossistema do seu aplicativo para uma interpretação mais holística usando a plataforma New Relic.
Por que isso é importante?
Ao coletar e analisar automaticamente as métricas de desempenho, nossa ferramenta permite que as equipes identifiquem os tempos exatos associados a cada componente, página, equipe e versão. Isso é particularmente útil para identificar quais equipes possuem os tempos relevantes e entender como cada componente contribui para o desempenho geral do aplicativo.
Por exemplo, se seu aplicativo registrar medidas semelhantes a CTLT, PTLT e TLT, a New Relic coletará esses valores automaticamente e os armazenará. Isso significa que tais durações podem ser avaliadas em todo o aplicativo, fornecendo insights poderosos para otimização e análise de desempenho. As equipes podem ver o desempenho de seus componentes em cenários do mundo real e tomar decisões orientadas por dados para aprimorar seu código. Defina alertas e monitore dashboards para detectar problemas antes que eles cheguem aos clientes e comemore ganhos de desempenho com confiança orientada por dados.
![séries de tempo](/sites/default/files/styles/900w/public/2025-01/image2.png?itok=2QzOKCjB)
![Tabela de desempenho de artefatos](/sites/default/files/styles/900w/public/2025-01/image1_0.png?itok=1PB1wMcc)
Os casos de uso para medidas de desempenho vão muito além da implementação descrita aqui. Qualquer tarefa complexa cuja duração você queira medir pode ser facilmente representada com o uso da API de desempenho. Com o agente New Relic Browser, você pode agregar todas as medidas em um só lugar para analisar o desempenho holístico.
Com os eventos New Relic BrowserPerformance, você pode garantir que cada tarefa importante seja otimizada e que o aplicativo como um todo atenda às expectativas de desempenho, mesmo em padrões de arquitetura complexos. Ao identificar os tempos específicos e ter conhecimento do titular de cada tarefa, você pode abordar os gargalos de desempenho de forma mais eficaz e melhorar a colaboração entre as equipes.
Como começar a coletar marcas e medidas do navegador
Instalar e configurar
Para usar o agente New Relic Browser para capturar marcas e medidas, você precisará seguir alguns passos para instalá-lo e configurá-lo corretamente. Aqui está um guia de como fazer isso.
- Abra a New Relic e selecione Adicionar dados no painel de navegação.
- Selecione Navegador e dispositivos móveis e selecione a fonte de dados de monitoramento de browser.
- Escolha seu método de implantação, seja APM ou Copiar/Colar.
- Selecione um aplicativo existente monitorado no APM ou nomeie seu aplicativo e então clique em Ativar.
Você também pode usar o pacote NPM do agente browser para instrumentar sua página na web. Para mais informações sobre o processo, consulte esse guia de instrumentação. A captura manual dos logs do navegador é compatível com as versões do agente browser 1.261.0 e superior.
Habilitar detecção de marcas e medidas
Para começar a coletar marcas e/ou medidas durante sua visualização limitada, consulte nossa documentação.
Encontre seus dados na New Relic
Uma vez habilitado, o agente armazena dados de marcas e medidas no tipo de evento BrowserPerformance na New Relic. Eventos BrowserPerformance capturarão tudo o que estiver disponível na API: a duração, o nome e até mesmo detalhes personalizados atribuídos ao valor. Atributos personalizados atribuídos ao seu agente browser também serão capturados em todos os eventos BrowserPerformance. Por fim, identificadores de página, como sessão, ID de trace, ID de usuário e URLs de página, também serão registrados para ajudar a melhorar a visão holística dos dados capturados. Para encontrar esses dados, tente a seguinte consulta e depois crie dashboards personalizados para monitorar o desempenho.
Esta consulta New Relic Query Language (NRQL) simples recupera todos os eventos BrowserPerformance para o appName especificado ("Meu aplicativo"), onde o entryName é a marca ou medida.
Instale o agente browser e comece a otimizar seus aplicativos web complexos hoje mesmo. Boa codificação!
Próximos passos
Ao utilizar as APIs de desempenho do navegador, você pode integrar com sucesso suas métricas de desempenho do navegador à New Relic para otimizar seu aplicativo. Instale o agente browser hoje mesmo para ver seus dados de API de desempenho em um só lugar com o agente New Relic Browser hoje mesmo.
As opiniões expressas neste blog são de responsabilidade do autor e não refletem necessariamente as opiniões da New Relic. Todas as soluções oferecidas pelo autor são específicas do ambiente e não fazem parte das soluções comerciais ou do suporte oferecido pela New Relic. Junte-se a nós exclusivamente no Explorers Hub ( discuss.newrelic.com ) para perguntas e suporte relacionados a esta postagem do blog. Este blog pode conter links para conteúdo de sites de terceiros. Ao fornecer esses links, a New Relic não adota, garante, aprova ou endossa as informações, visualizações ou produtos disponíveis em tais sites.