Comece a usar o Monitoramento de desempenho para web

Antes de você começar

Se ainda não o fez, visite Adicionar Firebase ao seu projeto JavaScript para saber como:

  • Crie um projeto do Firebase

  • Registre seu aplicativo da web no Firebase

Observe que ao adicionar o Firebase ao seu aplicativo, você poderá 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

  1. Se ainda não o fez, instale o Firebase JS SDK e inicialize o Firebase .

  2. Adicione o SDK JS do Monitoramento de Desempenho e inicialize o Monitoramento de Desempenho:

API modular da Web

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);

API com namespace da Web

import firebase from "firebase/compat/app";
import "firebase/compat/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 esta métrica. Para obter instruções de instalação, consulte a documentação da biblioteca.

A adição desta biblioteca polyfill não é necessária para que o Monitoramento de desempenho relate as outras métricas do aplicativo web.

Etapa 3 : Gerar eventos de desempenho para exibição inicial de dados

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.

  1. Sirva e visualize seu aplicativo Web em um ambiente local.

  2. 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.

  3. Acesse o painel Desempenho do console do Firebase. Você deverá ver a exibição inicial dos dados em alguns minutos.

    Se você não vir seus dados iniciais, revise as dicas de solução de problemas .

Etapa 4 : (opcional) visualizar mensagens de log para eventos de desempenho

  1. Abra as ferramentas de desenvolvedor do seu navegador (por exemplo, guia Rede para Chrome Dev Tools ou no Network Monitor para Firefox ).

  2. Atualize seu aplicativo da web no navegador.

  3. Verifique suas mensagens de log em busca de mensagens de erro.

  4. 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 no seu aplicativo, você pode instrumentar rastreamentos de código personalizados .

Com um rastreamento de código personalizado, você pode medir quanto tempo leva para seu aplicativo 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 ocorrências de cache e avisos de memória.

No 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 do Performance Monitoring.

Visite Adicionar monitoramento para código específico para saber mais sobre esses recursos e como adicioná-los ao seu aplicativo.

Etapa 6 : implantar seu aplicativo e analisar os resultados

Depois de validar o Monitoramento de Desempenho, você poderá implantar a versão atualizada do seu aplicativo para seus usuários.

Você pode monitorar os dados de desempenho no painel Desempenho do console do Firebase.

Próximos passos