Traces de duração automática para aplicativos da web

Um trace é um relatório de dados de desempenho capturados entre dois pontos no app. Para apps da Web, o Monitoramento de desempenho fornece automaticamente um trace de duração para o carregamento de página.

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

  • métrica primeira exibição: conta 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: conta 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: conta 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: conta o tempo entre o momento em que o usuário navega até uma página e quando o primeiro documento HTML é completamente carregado e analisado;

  • métrica loadEventEnd: conta 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;

  • métrica latência na primeira entrada: conta o tempo entre o momento em que o usuário interage com uma página e quando o navegador consegue 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 saber mais sobre essa métrica, veja o trace latência na primeira 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.

  • É interrompido imediatamente após o primeiro documento HTML ser completamente carregado e analisado (DOMContentLoaded), mas não significa que folhas de estilo, imagens e subframes terminaram de ser carregadas.

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, em seguida, é possível:

    • 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 revisar os dados dele com mais detalhes.

    • Usar o botão Filtro 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 de métricas.

    • 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 Filtro 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 para ler 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.