Antes de você começar
Se ainda não o fez, visite Adicionar Firebase ao seu projeto JavaScript para saber como:
Criar um projeto do Firebase
Registre seu aplicativo da web com o Firebase
Observe que, ao adicionar o Firebase ao seu aplicativo, você pode concluir algumas das etapas descritas posteriormente nesta página (por exemplo, adicionar o SDK e inicializar o Firebase).
Etapa 1 : adicionar e inicializar o monitoramento de desempenho
Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .
Adicione o Performance Monitoring JS SDK e inicialize o Performance Monitoring:
Web version 9
import { initializeApp } from "firebase/app"; import { getPerformance } from "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = getPerformance(app);
Web version 8
import firebase from "firebase/app"; import "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
Etapa 2 : adicionar a primeira biblioteca polyfill de atraso de entrada
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.
A adição dessa biblioteca polyfill não é necessária para que o Monitoramento de desempenho relate as outras métricas de aplicativos da web.
Etapa 3 : Gerar eventos de desempenho para exibição de dados inicial
O Firebase começa a processar os eventos quando você adiciona o SDK ao seu aplicativo. Se você ainda estiver desenvolvendo localmente, interaja com seu aplicativo para gerar eventos para coleta e processamento inicial de dados.
Sirva e exiba seu aplicativo da web em um ambiente local.
Gere eventos carregando subpáginas para seu site, interagindo com seu aplicativo e/ou acionando solicitações de rede. Certifique-se de manter a guia do navegador aberta por pelo menos 10 segundos após o carregamento da página.
Acesse o painel de desempenho do console do Firebase. Você deve ver sua exibição de dados inicial em alguns minutos.
Se você não vir uma exibição de seus dados iniciais, revise as dicas de solução de problemas.
Etapa 4 : (Opcional) Exibir mensagens de log para eventos de desempenho
Abra as ferramentas de desenvolvedor do seu navegador (por exemplo, guia Network para Chrome Dev Tools ou no Network Monitor para Firefox ).
Atualize seu aplicativo da web no navegador.
Verifique suas mensagens de log para quaisquer mensagens de erro.
Após alguns segundos, procure uma chamada de rede para
firebaselogging.googleapis.com
nas ferramentas de desenvolvedor do seu navegador. A presença dessa chamada de rede mostra que o navegador está enviando dados de desempenho para o Firebase.
Se seu aplicativo não estiver registrando eventos de desempenho, revise as dicas de solução de problemas.
Etapa 5 : (opcional) adicionar monitoramento personalizado para código específico
Para monitorar os dados de desempenho associados a um código específico em seu aplicativo, você pode instrumentar rastreamentos de código personalizados .
Com um rastreamento de código personalizado, você pode medir quanto tempo seu aplicativo leva para concluir uma tarefa específica ou um conjunto de tarefas, como carregar um conjunto de imagens ou consultar seu banco de dados. A métrica padrão para um rastreamento de código personalizado é sua duração, mas você também pode adicionar métricas personalizadas, como acertos de cache e avisos de memória.
Em seu código, você define o início e o fim de um rastreamento de código personalizado (e adiciona quaisquer métricas personalizadas desejadas) usando a API fornecida pelo SDK de monitoramento de desempenho.
Visite Adicionar monitoramento para código específico para saber mais sobre esses recursos e como adicioná-los ao seu aplicativo.
Etapa 6 : implante seu aplicativo e analise os resultados
Depois de validar o Monitoramento de desempenho, você pode implantar a versão atualizada de seu aplicativo para seus usuários.
Você pode monitorar os dados de desempenho no painel de desempenho do Firebase console.
Próximos passos
Obtenha experiência prática com o Firebase Performance Monitoring for Web Codelab .
Saiba mais sobre os dados coletados automaticamente pelo monitoramento de desempenho:
- Dados para carregamento de página em seu aplicativo
- Dados para solicitações de rede HTTP/S emitidas pelo seu aplicativo
Visualize, rastreie e filtre seus dados de desempenho no Firebase console
Adicione monitoramento para tarefas ou fluxos de trabalho específicos em seu aplicativo, instrumentando rastreamentos de código personalizados