Identificar a causa do carregamento lento de páginas pode ser desafiador. Para resolver esse problema, o recurso de rastreamento de sessões lentas do monitoramento de navegador do ARMS oferece um gráfico de cascata de desempenho para o carregamento de recursos estáticos. Esse recurso permite examinar os detalhes do carregamento de recursos, diagnosticar a causa raiz e solucionar a questão rapidamente.
Problema
O carregamento lento de páginas é uma questão comum e crítica para desenvolvedores front-end. Os principais desafios no diagnóstico e na resolução desse problema incluem:
-
Dificuldade de reprodução
Quando um usuário visita sua página web, o tempo de carregamento varia conforme a região, a rede, o navegador e o provedor de internet dele. Esses fatores dificultam a replicação das condições exatas da sessão para solução de problemas.
-
Falta de dados detalhados de monitoramento
A maioria das ferramentas de monitoramento de navegador usa o objeto PerformanceTiming para obter o tempo total de carregamento da página. No entanto, essa abordagem frequentemente omite dados sobre o carregamento de recursos estáticos individuais, o que dificulta a identificação do gargalo exato de desempenho.
Solução
Para identificar rapidamente gargalos de desempenho, conecte sua aplicação web ao monitoramento de navegador do ARMS, ative o relatório de recursos da página durante a integração e use o recurso de rastreamento de sessões lentas.
Etapa 1: Conectar ao monitoramento de navegador do ARMS
Por padrão, o agente de monitoramento de navegador não relata informações sobre recursos estáticos em uma página. Ative essa coleta de dados para usar o recurso de rastreamento de sessões lentas.
Para conectar sua aplicação web ao monitoramento de navegador do ARMS, consulte Instale um agente para uma página web.
Para usar o recurso de rastreamento de sessões lentas, selecione Enable Page Resource Reporting durante a integração.
Etapa 2: Identificar o problema
Use um dos métodos a seguir com o recurso de rastreamento de sessões lentas para diagnosticar problemas de desempenho web.
Método 1: Começar pela página Page Speed
Faça login no ARMS console. No painel de navegação à esquerda, escolha .
Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em no nome da aplicação que deseja gerenciar.
-
No painel de navegação à esquerda, escolha .
Para mais informações sobre a página Access speed, consulte Velocidade da página. Neste exemplo, o desempenho da página é baixo, com um tempo total de carregamento de 36,7s às 11:00.
-
Na página Access speed, role para baixo até a seção Slow Page Session Trace (TOP20).
Essa seção lista as 20 sessões de carregamento mais lentas da página dentro do intervalo de tempo especificado.
Neste exemplo, uma sessão às 11:36:46 teve um tempo de carregamento de página de 36,72s. Isso indica que essa sessão específica causou o pico no tempo de carregamento.
-
Na seção Slow Page Session Trace (TOP20), clique em no nome da página de destino na coluna Page.
A página Slow Loading Details será exibida.
-
Analise as informações na página Slow Loading Details para determinar a causa raiz e resolver o problema.
A área Page Information, na parte superior da página Slow Loading Details, exibe informações sobre a visita, como endereço IP do cliente, navegador e sistema operacional, para ajudar a determinar a causa da falha.
Esta seção também fornece informações de desempenho e ambiente, incluindo Page URL, Time de acesso, Full Page Load Time, tempo de DOM parsing e UA (User Agent).
A seção Page Resource Loading Waterfall, na página Slow Loading Details, apresenta um gráfico de cascata para o carregamento de recursos estáticos. Esse gráfico ajuda a identificar rapidamente gargalos de desempenho.
Para mais informações sobre a página Slow Loading Details, consulte Rastreamento de sessões lentas.
Método 2: Começar pela página Session Traces
Faça login no ARMS console. No painel de navegação à esquerda, escolha .
Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em no nome da aplicação que deseja gerenciar.
-
No painel de navegação à esquerda, escolha .
A seção Session List exibe todas as sessões da aplicação. Filtre as sessões por nome de usuário, ID de usuário ou ID de sessão para encontrar rapidamente aquelas com tempos de carregamento longos.
-
Na seção Session List, clique em no nome da sessão de destino. Em seguida, use as informações na página Session Tracking Details para determinar a causa raiz e resolver o problema.
Para mais informações sobre a página Session Tracing, consulte Rastreamento de sessões lentas.
O recurso de rastreamento de sessões lentas ajuda a replicar a sessão de um usuário e identificar gargalos de desempenho ao mostrar condições detalhadas de carregamento de recursos.
Operações relacionadas
Em vez de diagnosticar problemas retroativamente, crie alertas proativamente. Use o recurso de alerta no ARMS para criar regras de alerta para APIs específicas ou para todas elas. Isso notifica imediatamente sua equipe de operações quando ocorre um problema.
Para obter instruções sobre como criar uma regra de alerta, consulte Regras de alerta de monitoramento de navegador (Nova versão).