Primeiros passos com o Monitoramento de desempenho para Web

Antes de começar

Acesse a página Adicionar o Firebase ao seu projeto do JavaScript, caso ainda não tenha feito isso, para saber como:

  • criar um projeto do Firebase;

  • registrar seu app da web com o Firebase.

Ao adicionar o Firebase ao seu app, é possível concluir algumas das etapas descritas posteriormente nesta página (por exemplo, adicionar o SDK e inicializar o Firebase).

Etapa 1: adicionar e inicializar o Performance Monitoring

  1. Instale o SDK do Firebase para JavaScript e inicialize o Firebase, caso ainda não tenha feito isso.

  2. Adicione o SDK do Performance Monitoring para JavaScript e inicialize o Performance Monitoring:

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

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 biblioteca de polyfill de First Input Delay

Para avaliar a métrica de First Input Delay, é necessário adicionar a biblioteca de polyfill a essa métrica. Consulte a documentação de instruções de instalação (em inglês).

Não é necessário adicionar essa biblioteca de polyfill ao Performance Monitoring para mostrar as outras métricas de apps da Web.

Etapa 3: gerar eventos de desempenho para a 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 de dados iniciais.

  1. Exiba e visualize seu app da Web em um ambiente local.

  2. Gere eventos carregando subpáginas para seu site, interagindo com o app e/ou acionando solicitações de rede. Mantenha 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ê verá sua exibição de dados inicial em alguns minutos.

    Se você não vir uma exibição dos seus dados iniciais, veja as dicas de solução de problemas.

Etapa 4 (opcional): ver se há eventos de desempenho nas mensagens de registro

  1. Abra as ferramentas para desenvolvedores do navegador, como a guia Rede das Ferramentas para Desenvolvedores do Chrome ou o Monitor de rede do Firefox.

  2. Atualize seu app da Web no navegador.

  3. Verifique se há mensagens de erro nas mensagens de registro.

  4. Após alguns segundos, procure uma chamada de rede para firebaselogging.googleapis.com nas ferramentas para desenvolvedores do seu navegador. A presença dessa chamada de rede mostra que o navegador está enviando dados de desempenho ao Firebase.

Se o app não estiver registrando eventos de desempenho, veja 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 app, instrumente traces de código personalizados.

Com um trace de código personalizado, é possível avaliar quanto tempo o app 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 de um trace de código personalizado é a duração, mas também é possível adicionar métricas personalizadas, como ocorrências em cache e avisos de memória.

No seu código, você define o início e o fim de um trace de código personalizado (e adiciona a métrica personalizada que quiser) usando a API fornecida pelo SDK do Performance Monitoring.

Acesse Adicionar monitoramento para códigos específicos para saber mais sobre esses recursos e como adicioná-los ao seu app.

Etapa 6: implantar seu app e analisar os resultados

Depois de validar o Performance Monitoring, é possível implantar a versão atualizada do seu app para os usuários.

É possível monitorar os dados de desempenho no painel Desempenho do console do Firebase.

Próximas etapas