O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.
Esta página foi traduzida pela API Cloud Translation.
Switch to English

Saiba mais sobre dados de desempenho de carregamento de página (aplicativos da web)

O Monitoramento de desempenho usa rastreamentos para coletar dados sobre processos monitorados em seu aplicativo. Um rastreamento é um relatório que contém dados capturados entre dois pontos no tempo em seu aplicativo.

Para aplicativos da web, o Monitoramento de desempenho coleta automaticamente um rastreamento para cada página do seu aplicativo, chamado de 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 alguma mudança visual

  • primeira pintura de 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 um 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 quando 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 para a página e a conclusão do evento de carregamento do documento atual

  • atraso da primeira entrada - Uma métrica que mede o tempo entre o momento em que o usuário interage com uma página e o navegador é capaz de responder a essa entrada

Visualize dados de rastreamentos de carregamento de página na guia No dispositivo do console do Firebase ( saiba mais nesta página).

Definição de um rastreamento de carregamento de página

Este rastreamento mede várias métricas sobre como as páginas em seu aplicativo são carregadas, especificamente quanto tempo leva para alcançar pontos de carregamento comuns, como um aplicativo responsivo.

Os rastreamentos de carregamento de página ajudam a rastrear os principais elementos vitais da web do seu aplicativo, como a primeira pintura com conteúdo.

Métricas coletadas para rastreamentos de carregamento de página

Esses rastreios são rastreios prontos para uso, portanto, você não pode adicionar métricas personalizadas 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 para seus usuários que a página está começando a carregar.

  • Começa quando o usuário navega para uma página.

  • Pára quando ocorre qualquer mudança visual, incluindo uma mudança de cor de fundo ou um 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 um conteúdo significativo, como uma imagem ou texto.

Essa métrica é útil para 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.

  • Começa 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.

domInteractive

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 insights sobre quando seus usuários podem realmente interagir com elementos em 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 o primeiro rastreamento de atraso de entrada ).

  • Começa 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.

  • Começa 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 subframes terminaram de carregar.

loadEventEnd

Essa métrica mede o tempo entre o momento em que o usuário navega para 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.

  • Começa quando o usuário navega para uma página.

  • Pára imediatamente após a conclusão do evento de carregamento do documento HTML atual.

Primeiro atraso de 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 pode responder a essa entrada.

Essa métrica é útil porque o navegador que responde a uma interação do usuário dá a seus 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 na página, como clicar em um botão ou hiperlink.

  • Pára 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 essa métrica. Para obter instruções de instalação, consulte a documentação da biblioteca.

Rastreie, visualize e filtre dados de desempenho

Rastreie as principais métricas em seu painel

Adicione suas principais métricas ao painel para saber como estão as tendências. Você pode identificar regressões rapidamente observando as alterações semanais ou verificar se as alterações recentes em seu código estão melhorando o desempenho.

uma imagem do painel de métricas do Firebase Performance Monitoring

Para adicionar uma métrica ao seu painel, vá para o painel Desempenho no console do Firebase e clique na guia Painel . Clique em um cartão de métrica vazio e selecione uma métrica existente para adicionar ao seu painel. Clique em em um cartão de métrica preenchido para obter mais opções, como substituir ou remover uma métrica.

O painel mostra os dados métricos coletados ao longo do tempo, tanto na forma gráfica quanto como uma mudança percentual numérica.

Saiba mais sobre como usar o painel .

Ver todos os rastros e seus dados

Para visualizar esses rastros, vá para o painel Desempenho no console do Firebase e clique na guia No dispositivo .

Na guia No dispositivo , você pode clicar em várias telas para explorar um traço e detalhar as métricas de interesse. Na maioria das páginas, você pode usar o botão filtro (canto superior esquerdo da tela) para filtrar os dados por atributo, por exemplo:

uma imagem dos dados do Firebase Performance Monitoring sendo filtrados por atributo
  • Filtre por URL da página para visualizar os 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 de seus rastros .

Próximos passos