O desempenho da página afeta significativamente a experiência do usuário, fator essencial para a retenção. Por isso, monitorar e analisar o desempenho do frontend é fundamental.
Pré-requisitos
Conecte sua aplicação de frontend ao ARMS. Para mais informações, consulte
Visão geral da integração do Browser Monitoring
.
Recursos
-
Análise de desempenho multidimensional com base em dados de usuários reais
Captura interações reais dos usuários sem simulações ou necessidade de login.
Dados reais refletem a experiência efetiva do usuário e reduzem erros estatísticos, permitindo identificar rapidamente problemas por região, tipo de dispositivo ou navegador.
-
Análise de desempenho de página
First Paint Time: Indica se os tempos de consulta DNS ou conexão TCP estão elevados.
DOM Ready: Indica se os tempos de requisição ou resposta estão elevados.
Fully Loaded Time: Indica se o carregamento de recursos está lento.
-
Análise de erros de JS
Monitora e diagnostica erros de JS em tempo real.
-
Estatísticas personalizadas
Use o SDK para reportar eventos personalizados e criar métricas personalizadas.
-
Detalhes de acesso
Consulte os detalhes de acesso de todos os usuários monitorados.
-
Integração com monitoramento de aplicações
Ao identificar um carregamento lento de página, correlacione-o com os dados de monitoramento da aplicação para investigar de ponta a ponta.
Diagnosticar carregamento lento de páginas
O exemplo a seguir mostra como solucionar problemas de carregamento lento de página:
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 nome da aplicação que deseja gerenciar.
No painel de navegação à esquerda, escolha .
-
Analise as principais métricas de desempenho nas seções Page Load Time Details e Waterfall Chart of Page Loading para identificar anomalias.
Figura 1.
Detalhes do tempo de carregamento da página
Figura 2.
Gráfico em cascata de carregamento da página
Page load detailsWaterfall Chart of Page Loading Se o valor na seção for alto, ou se os tempos de consulta DNS, conexão TCP ou conexão SSL na seção estiverem elevados, o carregamento lento provavelmente decorre de um problema de rede. Investigue sua infraestrutura de rede.
Page load detailsWaterfall Chart of Page Loading Se o tempo na seção for alto, ou se os tempos de resposta da requisição e transferência de conteúdo na seção estiverem elevados, o carregamento lento provavelmente decorre de uma requisição de API lenta. Para continuar a investigação, prossiga para a Etapa 5.
Page load detailsWaterfall Chart of Page Loading Se o valor na seção for alto, ou se os tempos de análise do DOM e carregamento de recursos na seção estiverem elevados, o carregamento lento provavelmente decorre do carregamento lento de recursos de frontend. Para continuar a investigação, prossiga para a Etapa 6.
-
Diagnostique requisições de API lentas. No painel de navegação à esquerda, escolha .
Na aba API Requests, localize a API de destino e clique em Analyze na coluna Actions.
-
Na aba API details, clique em View Trace no canto superior direito da seção Request Details para visualizar o tempo total gasto no frontend e o trace da aplicação de backend.
Na tabela da aba
Trace
, um
span
com
Call Type
definido como
Frontend
representa o tempo total, enquanto um
span
com
Call Type
definido como
HTTP Entry
representa o tempo de processamento da aplicação de backend. A coluna
Timeline
exibe um gráfico de barras com a duração de cada
span
.
Se o tempo de processamento da aplicação de backend for curto, mas o tempo total for longo, isso indica um tempo de transferência de rede elevado para a requisição de API. Nesse caso, na página API details, clique em View Session no canto superior direito da seção Request Details para visualizar informações da sessão, como tipo de rede, região, navegador, dispositivo e sistema operacional.
Caso o tempo de processamento da aplicação de backend seja longo, isso indica um problema de desempenho no serviço de backend. Nessa situação, clique em ícone de lupa na coluna Method Stack. Em seguida, na caixa de diálogo Method Stack, visualize a pilha de chamadas para identificar o gargalo no trace de backend.
Diagnostique recursos de frontend lentos. No painel de navegação à esquerda, escolha .
-
Na página Access speed, na seção Slow Page Session Traces (Top 20), clique em nome da página referente a uma sessão lenta.
Esta seção lista sessões lentas em uma tabela que inclui as colunas
Page
,
Session ID
,
Browser
,
Fully loaded time
(em ms) e
Start time
. Use o tempo de carregamento para identificar a sessão lenta de destino.
Na página
Session Tracing
, na seção
Page Resource Loading Waterfall
, visualize os detalhes dos recursos que causaram o carregamento lento da página.
Mais informações
Velocidade da Página: Conheça as métricas de carregamento de página e como o ARMS as mede.
Diagnosticar erros de JS com o Browser Monitoring do ARMS: Saiba como solucionar problemas de erros JavaScript usando o Browser Monitoring.