Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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 rastreamento de carregamento de página . Cada rastreamento de carregamento de página coleta as seguintes métricas padrão:

  • first paint — Uma métrica que mede o tempo entre quando o usuário navega para uma página e quando ocorre qualquer alteração visual

  • first contentful paint — Uma métrica que mede o tempo entre quando um usuário navega para uma página e quando um conteúdo significativo é exibido, como uma imagem ou texto

  • domInteractive — Uma métrica que mede o tempo entre quando 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 quando o usuário navega 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 usuário navega para a página e quando o evento de carregamento do documento atual é concluído

  • first input delay — 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 os dados desses rastreamentos na subguia Carregamento de página da tabela de rastreamentos, que está na parte inferior do painel Desempenho (saiba mais sobre como usar 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 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 rastrear os principais sinais vitais da Web do seu aplicativo , como a primeira pintura de conteúdo.

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

Esses rastreamentos são rastreamentos prontos para uso, portanto, você não pode adicionar métricas customizadas ou atributos customizados a eles.

primeira pintura

Essa métrica mede o tempo entre o momento em que o usuário navega para uma página e a ocorrência de qualquer alteração visual.

Essa métrica é útil, pois a primeira pintura sinaliza para seus usuários que a página está começando a carregar.

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

  • Pára quando ocorre qualquer alteração visual, incluindo uma mudança de cor de fundo ou um carregamento de cabeçalho.

Primeira pintura de conteúdo

Essa métrica mede o tempo entre quando um usuário navega para uma página e quando um conteúdo significativo é exibido, como uma imagem ou texto.

Essa métrica é útil para obter insights sobre quanto tempo seus usuários visualizam qualquer conteúdo real do seu aplicativo, em vez de apenas uma nova cor de plano de fundo ou cabeçalho.

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

  • Pára imediatamente depois que o navegador renderiza o primeiro conteúdo do DOM, incluindo qualquer texto, imagem (incluindo imagens de plano de fundo), tela não branca ou SVG.

domInteractive

Essa métrica mede o tempo entre quando o usuário navega para uma página e quando a página é considerada interativa para o usuário.

Essa métrica é útil para obter insights sobre quanto tempo 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 essa métrica, consulte o primeiro rastreamento de atraso de entrada ).

  • 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 quando o usuário navega para uma página e quando 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 o carregamento de folhas de estilo, imagens e subquadros foi concluído.

loadEventEnd

Essa métrica mede o tempo entre quando o usuário navega para a página e quando o evento de carregamento do documento atual é concluído.

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.

  • Pára imediatamente após a conclusão do evento load 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 é capaz de responder a essa entrada.

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

  • Para imediatamente após o navegador ser capaz de 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

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

Rastreie as principais métricas em seu painel

Para saber qual é a tendência de suas principais métricas, adicione-as ao quadro de métricas na parte superior do painel de desempenho . Você pode identificar rapidamente as regressões vendo as alterações semana a semana ou verificando se as alterações recentes em seu código estão melhorando o desempenho.

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

Para adicionar uma métrica ao seu quadro de métricas, siga estas etapas:

  1. Vá para o painel de desempenho no console do Firebase.
  2. Clique em um cartão de métrica vazio e selecione uma métrica existente para adicionar ao quadro.
  3. 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 forma gráfica quanto como uma alteração percentual numérica.

Saiba mais sobre como usar o painel .

Exibir rastreamentos e seus dados

Para visualizar seus traces, acesse o painel de desempenho no console do Firebase, role para baixo até a tabela de traces e clique na subguia apropriada. A tabela exibe algumas das principais métricas 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 as alterações nas métricas, facilitando a resolução 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 quando 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 Exibir detalhes da métrica .
  • Em qualquer cartão métrico, selecione => View details . 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ê pode detalhar as métricas de interesse. Clique no botão filtro 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 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ágina que estão prejudicando o desempenho do seu aplicativo. Por exemplo, você pode configurar um alerta de e-mail para sua equipe se o primeiro atraso de entrada para uma página específica exceder um limite definido.