Ir para o console

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 seu app ao projeto do Firebase, você também pode concluir algumas das etapas do guia a seguir, por exemplo, incluir os SDKs do Firebase e inicializar o Firebase.

Etapa 1: adicionar o Monitoramento de desempenho e inicializar o Firebase

Adicione o SDK do Monitoramento de desempenho, caso ainda não tenha feito, e inicialize o Firebase no seu app usando uma das opções abaixo. Considere as informações a seguir ao escolher as opções e consulte as guias individuais para ver informações mais detalhadas:

  • Usando a CDN (SDK autônomo): se o Monitoramento de desempenho for o único produto do Firebase usado no app, essa opção carregará um SDK único e mais leve usando a CDN.

  • Usando a CDN (SDK padrão): se você usar outros produtos do Firebase no app, essa opção carregará o SDK do Monitoramento de desempenho junto com outras bibliotecas do Firebase usando a CDN.

  • A partir de URLs do Hosting: se você usar o Firebase Hosting, essa opção será útil para gerenciar sua configuração do Firebase ao inicializá-lo.

  • Utilizar bundlers de módulo: se você usar um bundler, como Browserify ou webpack, escolha essa opção para importar os módulos individuais quando precisar deles.

O Firebase é iniciado imediatamente após a adição do SDK e monitora os traces automáticos e as solicitações de rede HTTP/S.

A partir da CDN

É possível configurar a importação parcial do SDK do Firebase para JavaScript e carregar apenas as bibliotecas do Firebase de que você precisa. A plataforma armazena cada biblioteca desse SDK na nossa rede de fornecimento de conteúdo (CDN, na sigla em inglês) global.

É possível incluir o SDK do Monitoramento de desempenho usando a CDN de dois modos:

  • SDK autônomo: o Monitoramento de desempenho é o único produto do Firebase utilizado no seu app.
  • SDK padrão: você usa o Monitoramento de desempenho e outros produtos do Firebase no seu app.

SDK autônomo

Se o Monitoramento de desempenho for o único produto do Firebase usado no seu app, use o SDK autônomo e o script de cabeçalho recomendado abaixo caso você queira:

  • reduzir o tamanho do pacote do SDK;
  • adiar a inicialização do SDK para depois do carregamento da página

Para incluir o SDK autônomo do Monitoramento de desempenho no seu app e adiar a inicialização dele para depois do carregamento da página, faça o seguinte:

  1. Adicione o seguinte script ao cabeçalho do seu arquivo de índice.
  2. Adicione o objeto de configuração do projeto do Firebase do seu app.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);window.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

Em que:

O script acima carrega de forma assíncrona o SDK autônomo e inicializa o Firebase depois que o evento onload da janela é disparado. Essa tática reduz o impacto que o SDK pode ter nas métricas de carregamento de página, já que o navegador informou as métricas ao inicializar o SDK.

SDK padrão

Se você usar outros produtos do Firebase, como o Authentication ou o Cloud Firestore, no seu app, inclua o SDK padrão do Monitoramento de desempenho.

Observe que esse SDK requer a inclusão do SDK principal do Firebase e a inicialização do Firebase e do Monitoramento de desempenho em um script separado.

  1. Para incluir o SDK padrão do Monitoramento de desempenho, adicione os seguintes scripts à parte inferior da tag <body> antes de usar os serviços do Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-performance.js"></script>
    <body>
    
  2. Inicialize o Firebase e o Monitoramento de desempenho no seu app:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

A partir de URLs do Hosting

Ao usar o Firebase Hosting, você pode configurar seu app para carregar as bibliotecas do SDK do Firebase para JavaScript de forma dinâmica a partir de URLs reservados. Saiba mais sobre como adicionar SDKs por meio de URLs reservados do Hosting.

Com essa opção de configuração, depois que seu app tiver sido implantado no Firebase, ele extrairá automaticamente o objeto de configuração do projeto em que foi implementado. É possível implantar a mesma codebase em vários projetos do Firebase, mas não é necessário rastrear a configuração em uso para firebase.initializeApp().

  1. Para incluir o SDK do Monitoramento de desempenho, adicione os seguintes scripts à parte inferior da tag <body> antes de usar os serviços do Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/6.4.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.4.0/firebase-performance.js"></script>
    </body>
    
  2. Inicialize o Firebase e o Monitoramento de desempenho no seu app. Lembre-se de que não é necessário incluir o objeto de configuração do Firebase ao usar os URLs reservados do Hosting.

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Como usar o bundler de módulo

É possível configurar a importação parcial do SDK do Firebase para JavaScript e carregar apenas os produtos do Firebase necessários. Se você usar um bundler, como Browserify ou webpack, poderá importar produtos individuais do Firebase quando precisar deles usando o comando import.

  1. Instale o pacote de npm firebase e salve-o no arquivo package.json ao executar o comando:

    npm install --save firebase
  2. Para incluir o SDK do Monitoramento de desempenho, importe os módulos do Firebase com import:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Inicialize o Firebase e o Monitoramento de desempenho no seu app:

    // TODO: Replace the following with your app's Firebase project configuration
    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 primeiro atraso de entrada

Para avaliar a métrica de primeiro atraso de entrada, você precisa adicionar a biblioteca de polyfill a essa métrica. Para instruções de instalação, consulte a documentação correspondente (em inglês).

Observe que a adição dessa biblioteca de polyfill não é necessária para que o Monitoramento de desempenho informe as outras métricas do app da Web.

Etapa 3: verificar se o Monitoramento de desempenho está registrando dados

  1. Atualize seu app da Web no navegador.

  2. Após alguns segundos, procure uma chamada de rede para firebaselogging.googleapis.com na guia Network do Chrome Dev Tools ou no Network Monitor do Firefox (em inglês).

    A presença dessa chamada de rede mostra que o navegador está enviando dados de desempenho ao Firebase.

  3. Confirme se os resultados do Monitoramento de desempenho aparecem no Console do Firebase.

    Os resultados geralmente são exibidos em até 12 horas.

Etapa 4: adicionar métricas e traces personalizados (opcional)

Um trace personalizado é um relatório de dados de desempenho associados a algum código no app. Para saber mais sobre traces personalizados, consulte a visão geral do Monitoramento de desempenho.

É possível ter vários traces personalizados no app, além de manter mais de um deles em execução por vez. Cada trace personalizado pode ter uma ou mais métricas para contar eventos relacionados ao desempenho no app. Elas estão associadas aos traces que as criam.

Os nomes das métricas e dos traces personalizados precisam atender aos seguintes requisitos: não conter espaço em branco inicial ou final, não conter sublinhado (_) no início e ter no máximo de 32 caracteres.

  1. Para iniciar e interromper um trace personalizado, una o código que você quer rastrear com linhas de código semelhantes às seguintes:

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. Para incluir uma métrica personalizada, adicione linhas de código semelhantes às seguintes toda vez que o evento ocorrer. Por exemplo, a métrica personalizada a seguir contabiliza eventos relacionados ao desempenho que ocorrem no seu app.

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

Etapa 5: implantar seu app e analisar os resultados

Depois de validar o Monitoramento de desempenho, é possível implantar a versão atualizada do seu app para seus usuários.

É possível monitorar os dados de desempenho no Console do Firebase.

A seguir