O Monitoramento de desempenho usa rastreios para coletar dados sobre processos monitorados no seu aplicativo. Um rastreamento é um relatório que contém dados capturados entre dois momentos no seu aplicativo.
Para aplicativos da web, o Monitoramento de desempenho coleta automaticamente um rastreamento para cada página do seu aplicativo, chamado rastreamento de carregamento de página . Cada rastreamento de carregamento de página coleta as seguintes métricas padrão:
primeira pintura - Uma métrica que mede o tempo entre o momento em que o usuário navega para uma página e o momento em que ocorre qualquer mudança visual
primeira pintura com conteúdo - uma métrica que mede o tempo entre o momento em que um usuário navega para uma página e a exibição de conteúdo significativo, como uma imagem ou texto
domInteractive — Uma métrica que mede o tempo entre o momento em que o usuário navega para uma página e o momento em que a página é considerada interativa para o usuário
domContentLoadedEventEnd — Uma métrica que mede o tempo entre o momento em que o usuário navega para uma página e o momento em que o documento HTML inicial é completamente carregado e analisado
loadEventEnd — Uma métrica que mede o tempo entre o momento em que o usuário navega até a página e a conclusão do evento de carregamento do documento atual.
atraso na primeira entrada - uma métrica que mede o tempo entre o momento em que o usuário interage com uma página e o momento em que o navegador é capaz de responder a essa entrada
Você pode visualizar os dados desses rastreamentos na subguia Carregamento da página da tabela de rastreamentos, que fica na parte inferior do painel Desempenho (saiba mais sobre como usar o console posteriormente nesta página).
Definição de um rastreamento de carregamento de página
Esse rastreamento mede diversas métricas sobre como as páginas do seu aplicativo são carregadas, especificamente quanto tempo leva para atingir pontos de carregamento comuns, como um aplicativo responsivo.
Os rastreamentos de carregamento de página ajudam você a monitorar os principais sinais vitais da web do seu aplicativo, como a primeira pintura com conteúdo.
Métricas coletadas para rastreamentos de carregamento de página
Esses rastreamentos são rastreamentos prontos para uso, portanto, não é possível adicionar métricas ou atributos personalizados a eles.
Primeira pintura
Essa métrica mede o tempo entre o momento em que o usuário navega para uma página e o momento em que ocorre qualquer alteração visual.
Essa métrica é útil porque a primeira pintura sinaliza aos usuários que a página está começando a carregar.
Inicia quando o usuário navega para uma página.
Para quando ocorre qualquer alteração visual, incluindo uma alteração na cor de fundo ou carregamento de cabeçalho.
Primeira pintura com conteúdo
Essa métrica mede o tempo entre o momento em que um usuário navega para uma página e a exibição de conteúdo significativo, como uma imagem ou texto.
Essa métrica é útil para obter insights sobre quando os usuários veem o conteúdo real do seu aplicativo, em vez de apenas uma nova cor de fundo ou cabeçalho.
Inicia quando o usuário navega para uma página.
Pára imediatamente após o navegador renderizar o primeiro conteúdo do DOM, incluindo qualquer texto, imagem (incluindo imagens de fundo), tela não branca ou SVG.
domInterativo
Essa métrica mede o tempo entre o momento em que o usuário navega para uma página e o momento em que a página é considerada interativa para o usuário.
Essa métrica é útil para obter insights sobre quando os usuários podem realmente interagir com elementos do seu aplicativo, como botões e hiperlinks, em vez de apenas vê-los na tela. Observe que isso não significa que o navegador responderá à interação (para esta métrica, consulte first input delay trace ).
Inicia quando o usuário navega para uma página.
Pára imediatamente antes de o agente do usuário definir a prontidão do documento HTML atual como "interativo".
domContentLoadedEventEnd
Essa métrica mede o tempo entre o momento em que o usuário navega para uma página e o momento em que o documento HTML inicial é completamente carregado e analisado.
Inicia quando o usuário navega para uma página.
Pára imediatamente após o documento HTML inicial ser completamente carregado e analisado (
DOMContentLoaded), mas isso não significa que as folhas de estilo, imagens e subquadros terminaram de carregar.
carregarEventEnd
Essa métrica mede o tempo entre o momento em que o usuário navega até a página e a conclusão do evento de carregamento do documento atual.
Essa métrica é útil para obter informações sobre quanto tempo leva para carregar todo o seu conteúdo, incluindo folhas de estilo e imagens.
Inicia quando o usuário navega para uma página.
Para imediatamente após a conclusão do evento de carregamento do documento HTML atual.
Atraso na primeira entrada
Essa métrica mede o tempo entre o momento em que o usuário interage com uma página e o momento em que o navegador é capaz de responder a essa entrada.
Essa métrica é útil porque a resposta do navegador a uma interação do usuário dá aos usuários as primeiras impressões sobre a capacidade de resposta do seu aplicativo.
Começa quando o usuário interage pela primeira vez com um elemento da página, como clicar em um botão ou hiperlink.
Para imediatamente depois que o navegador consegue responder à entrada, o que significa que o navegador não está ocupado carregando ou analisando seu conteúdo.
Observe que para medir a primeira métrica de atraso de entrada, você precisa adicionar a biblioteca polyfill para esta métrica. Para obter instruções de instalação, consulte a documentação da biblioteca.
Rastreie, visualize e filtre dados de desempenho
Para visualizar dados de desempenho em tempo real, verifique se seu aplicativo usa uma versão do SDK do Monitoramento de desempenho compatível com o processamento de dados em tempo real. Saiba mais sobre dados de desempenho em tempo real .
Acompanhe as principais métricas em seu painel
Para saber a tendência de suas principais métricas, adicione-as ao quadro de métricas na parte superior do painel Desempenho . Você pode identificar regressões rapidamente vendo as alterações semanais ou verificando se as alterações recentes no seu código estão melhorando o desempenho.
Para adicionar uma métrica ao seu quadro de métricas, siga estas etapas:
- Acesse o painel Desempenho no console do Firebase.
- Clique em um cartão de métrica vazio e selecione uma métrica existente para adicionar ao seu quadro.
- Clique em em um cartão de métrica preenchido para obter mais opções, por exemplo, para substituir ou remover uma métrica.
O quadro de métricas mostra os dados de métricas coletados ao longo do tempo, tanto em formato gráfico quanto como uma variação percentual numérica.
Saiba mais sobre como usar o painel .
Ver rastreamentos e seus dados
Para visualizar seus rastreamentos, acesse o painel Desempenho no console do Firebase, role para baixo até a tabela de rastreamentos e clique na subguia apropriada. A tabela exibe algumas métricas principais para cada rastreamento e você pode até classificar a lista pela alteração percentual de uma métrica específica.
O Monitoramento de desempenho fornece uma página de solução de problemas no Console do Firebase que destaca alterações de métricas, facilitando a abordagem rápida e minimizando o impacto de problemas de desempenho em seus aplicativos e usuários. Você pode usar a página de solução de problemas ao aprender sobre possíveis problemas de desempenho, por exemplo, nos seguintes cenários:
- Você seleciona métricas relevantes no painel e percebe um grande delta.
- Na tabela de rastreamentos, você classifica para exibir os maiores deltas na parte superior e vê uma alteração percentual significativa.
- Você recebe um alerta por e-mail notificando sobre um problema de desempenho.
Você pode acessar a página de solução de problemas das seguintes maneiras:
- No painel de métricas, clique no botão Visualizar detalhes da métrica .
- Em qualquer cartão de métrica, selecione
=> Ver detalhes . A página de solução de problemas exibe informações sobre a métrica selecionada. - Na tabela de rastreamentos, clique em um nome de rastreamento ou em qualquer valor de métrica na linha associada a esse rastreamento.
- Em um alerta por e-mail, clique em Investigar agora .
Ao clicar em um nome de rastreamento na tabela de rastreamentos, você poderá detalhar as métricas de interesse. Clique no
- Filtre por URL da página para visualizar dados de uma página específica do seu site
- Filtre por tipo de conexão efetiva para saber como uma conexão 3G afeta seu aplicativo
- Filtre por país para garantir que a localização do seu banco de dados não esteja afetando uma região específica
Saiba mais sobre como visualizar dados para seus rastreamentos .
Próximos passos
Saiba mais sobre como usar atributos para examinar dados de desempenho.
Saiba mais sobre como rastrear problemas de desempenho no Console do Firebase.
Configure alertas para carregamentos de páginas que estão prejudicando o desempenho do seu aplicativo. Por exemplo, você pode configurar um alerta por e-mail para sua equipe se o atraso da primeira entrada de uma página específica exceder um limite definido por você.