Ir para o console

Traces automáticos para apps da Web

Um trace é um relatório de dados de desempenho capturado entre dois pontos no seu app. O Monitoramento de desempenho fornece automaticamente um trace de carregamento de página para apps da Web.

O trace de carregamento de página é dividido nas seguintes métricas padrão:

  • métrica primeira exibição: contabiliza o tempo entre o momento em que o usuário navega até uma página e quando ocorre qualquer alteração visual.

  • métrica primeira exibição de conteúdo: contabiliza o tempo entre o momento em que um usuário navega até uma página e quando um objeto significativo, como imagem ou texto, é exibido.

  • métrica domInteractive: contabiliza o tempo entre o momento em que um usuário navega até uma página e quando a página é considerada interativa para o usuário.

  • métrica domContentLoadedEventEnd: contabiliza o tempo entre o momento em que o usuário navega até uma página e quando o documento HTML inicial é completamente carregado e analisado.

  • métrica loadEventEnd: contabiliza o tempo entre o momento em que o usuário navega até a página e quando o evento de carregamento atual do documento é concluído.

  • métrica primeiro atraso de entrada: contabiliza o tempo entre o momento em que o usuário interage com uma página e quando o navegador pode responder a essa entrada.

Definições das métricas de carregamento de página

Primeira exibição

Essa métrica contabiliza o tempo em que o usuário navega para uma página e quando ocorre qualquer alteração visual.

Essa métrica é útil, porque a primeira exibição sinaliza para os usuários que a página está começando a ser carregada.

  • É iniciada quando o usuário navega para uma página.

  • É interrompida quando ocorre qualquer alteração visual, incluindo mudança de cor de fundo ou carregamento de cabeçalho.

Primeira exibição de conteúdo

Essa métrica contabiliza o tempo entre o momento em que um usuário navega até a página e quando um conteúdo significativo, como imagem ou texto, é exibido.

Essa métrica é útil para insights sobre a rapidez com que seus usuários veem qualquer conteúdo real do seu app em vez de apenas uma nova cor de fundo ou um novo cabeçalho.

  • É iniciada quando o usuário navega para uma página.

  • É interrompida imediatamente após o navegador renderizar o primeiro conteúdo a partir do DOM, incluindo texto, imagem (inclusive imagens de plano de fundo) tela não branca ou SVG.

domInteractive

Essa métrica contabiliza o tempo entre o momento em que um usuário navega até uma página e quando a página é considerada interativa para o usuário.

Essa métrica é útil para insights sobre a rapidez com que os usuários podem interagir com os elementos do app, como botões e hiperlinks, em vez de apenas visualizá-los na tela, mas não indica que o navegador responderá à interação. Para mais detalhes sobre essa métrica, consulte Trace de primeiro atraso de entrada.

  • É iniciada quando o usuário navega para uma página.

  • É interrompida imediatamente antes que o user agent defina o documento HTML atual como "interativo".

domContentLoadedEventEnd

Essa métrica contabiliza o tempo entre o momento em que o usuário navega para uma página e quando o documento HTML inicial é completamente carregado e analisado.

  • É iniciada quando o usuário navega para uma página.

  • É interrompida imediatamente após o documento HTML inicial ser completamente carregado e analisado (DOMContentLoaded), mas não significa que o carregamento das folhas de estilo, das imagens e dos subframes foi concluído.

loadEventEnd

Essa métrica contabiliza o tempo entre o momento em que o usuário navega até a página e quando o evento de carregamento do documento atual é concluído.

Essa métrica é útil para insights sobre quanto tempo leva para carregar todo o conteúdo, incluindo folhas de estilo e imagens.

  • É iniciada quando o usuário navega para uma página.

  • É interrompida imediatamente após a conclusão do evento de carregamento do documento HTML atual.

Latência de entrada

Essa métrica contabiliza o tempo entre o momento em que o usuário interage com uma página e quando o navegador pode responder a essa entrada.

Essa métrica é útil, porque o navegador que responde a uma interação fornece aos usuários as primeiras impressões deles sobre a capacidade de resposta do seu app.

  • É iniciada após a primeira interação de um usuário com um elemento na página, como clique em um botão ou hiperlink.

  • É interrompida imediatamente quando o navegador fica disponível para responder à entrada, já que isso significa que ele não está ocupado carregando ou analisando seu conteúdo.

Para medir a primeira métrica de atraso de entrada, é necessário adicionar a biblioteca de polyfill para essa métrica. Para instruções de instalação, consulte a documentação da biblioteca (em inglês).

Monitorar traces de carregamento de página automáticos no console

  1. No Console do Firebase, acesse o painel de Desempenho.

  2. Clique na guia No dispositivo. Após isso, é possível realizar as seguintes ações:

    • Visualizar um relatório rápido dos dados coletados de todos os traces de carregamento de sua página e de qualquer trace personalizado que você adicionou.

    • Clicar em um trace específico para analisar os dados dele com mais detalhes.

    • Usar o botão Filtraradd no canto superior esquerdo do painel para realizar a filtragem básica dos dados por atributo.

  3. Se você clicar em um trace específico, o console exibirá uma visão geral dos dados coletados em cartões métricos.

    • Use as opções no canto superior direito do painel para visualizar os dados como agregados ou ao longo do tempo.

    • Use o botão Filtraradd no canto superior esquerdo do painel para realizar a filtragem básica dos dados por atributo.

  4. Para qualquer métrica, clique em Visualizar mais caso queira ver informações mais detalhadas sobre os dados coletados e usar recursos de análise mais avançados. Por exemplo, é possível filtrar e segmentar os dados por atributo.