Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

Monitoramento de desempenho usos vestígios de dados coletamos 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 aplicações web, Monitoramento de desempenho recolhe automaticamente um traço para cada página do seu aplicativo chamado um traço de carregamento da 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 quando o usuário navega para uma página e quando qualquer mudança visual acontece

  • primeira pintura com conteúdo - Uma métrica que mede o tempo entre quando um usuário navega para uma página e quando significativos exibe o conteúdo, como uma imagem ou texto

  • DOMInteractive - Uma métrica que mede o tempo entre quando as navega usuário para uma página e quando a página é considerada interativa para o usuário

  • domContentLoadedEventEnd - Uma métrica que mede o tempo entre quando o navega usuário para uma página e quando o documento HTML inicial é completamente carregado e analisado

  • loadEventEnd - Uma métrica que mede o tempo entre quando o navega usuário para a página e quando concluída evento carga do documento atual

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

Você pode visualizar dados desses traços na sub-seção de carga página da tabela de traços, que fica na parte inferior do painel de desempenho (saiba mais sobre usando o console mais adiante nesta página).

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

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

Vestígios de carregamento da página ajudam a controlar de seu aplicativo sinais vitais web básicos , como 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

Esta métrica mede o tempo entre quando o usuário navega para uma página e quando qualquer mudança visual acontece.

Esta métrica é útil desde que os primeiros sinais de pintura para seus usuários que a página está começando a carga.

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

  • Pára quando qualquer mudança visual acontece, incluindo uma mudança de cor de fundo ou uma carga 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 os elementos em seu aplicativo, como botões e hiperlinks, em vez de apenas vê-los na tela. Note que isso não significa que o navegador irá responder à interação (por essa métrica, consulte o primeiro traço 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 está completamente carregado e analisado ( DOMContentLoaded ), mas isto não significa que folhas de estilo, imagens, e as subtramas são carregamento acabado.

loadEventEnd

Esta métrica mede o tempo entre quando o usuário navega para a página e quando concluída evento carga 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 suas primeiras impressões sobre a capacidade de resposta do seu aplicativo.

  • Começa quando o primeiro usuário interage com um elemento na página, como clicar em um botão ou hyperlink.

  • 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 instruções de instalação, consulte a biblioteca de documentação .

Rastreie, visualize e filtre dados de desempenho

Para visualizar dados de desempenho em tempo real, certifique-se de que seu aplicativo usa uma versão do SDK de Monitoramento de Desempenho compatível com processamento de dados em tempo real. Saiba mais .

Rastreie as principais métricas em seu painel

Para saber como suas métricas-chave são tendências, adicioná-los à sua placa de métricas na parte superior do painel de desempenho. Você pode identificar regressões rapidamente ao ver as mudanças semanais ou verificar se as mudanças recentes em seu código estão melhorando o desempenho.

uma imagem do quadro de métricas no painel de monitoramento de desempenho do Firebase

Para adicionar uma métrica para sua placa métricas, vá para o painel de desempenho no console Firebase, em seguida, clique na guia Dashboard. Clique em um cartão de métrica vazio e selecione uma métrica existente para adicionar ao seu quadro. Clique em um cartão métrica povoada para mais opções, como para substituir ou remover uma métrica.

O quadro de métricas 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 usando o painel de instrumentos .

Ver traces e seus dados

Para exibir suas marcas, acesse o painel de desempenho no console Firebase, desloque-se para a mesa de traços, em seguida, clique na sub-seção apropriada. A tabela exibe algumas das principais métricas para cada rastreamento e você pode até mesmo classificar a lista pela alteração percentual de uma métrica específica.

Se você clicar no nome de um traço na tabela de traços, poderá clicar em várias telas para explorar o traço e detalhar as métricas de interesse. Na maioria das páginas, você pode usar o filtro botão (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
  • Filtrar por URL da página para visualizar dados para uma página específica do seu site
  • Filtrar por tipo de ligação eficaz de aprender uma conexão 3G impactos seu aplicativo
  • Filtrar por País para se certificar de seu local banco de dados não está a afectar uma região específica

Saiba mais sobre a visualização de dados para os seus vestígios .

Próximos passos