O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

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 app, também é possível concluir algumas das etapas descritas nesta página, como adicionar 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, esta opção carregará um SDK único e mais leve a partir da CDN.

  • Usando a CDN (SDK padrão): se você estiver usando outros produtos do Firebase no app, esta opção carregará o SDK do Monitoramento de desempenho junto com outras bibliotecas do Firebase a partir da 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.

Depois de adicionar o SDK do Monitoramento de desempenho, o Firebase começa a coletar dados automaticamente para o carregamento de página e as solicitações de rede HTTP/S do app.

Usando a 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

Em que:

O script acima carrega de maneira assíncrona o SDK autônomo e inicializa o Firebase após o disparo do evento onload da janela. 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>. Porém, antes de usar qualquer serviço 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/8.0.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.0.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, é possível configurar seu app para carregar as bibliotecas do SDK do Firebase para JavaScript de forma dinâmica usando 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 o mesmo codebase em vários projetos do Firebase, mas não é necessário rastrear a configuração do Firebase usada para firebase.initializeApp().

  1. Para incluir o SDK do Monitoramento de desempenho, adicione os seguintes scripts à parte inferior da tag <body>. Porém, antes de usar qualquer serviço 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/8.0.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.0.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 estiver usando um bundler (como Browserify ou webpack), você poderá import produtos individuais do Firebase quando precisar deles.

  1. Instale o pacote npm firebase e salve-o no arquivo package.json executando:

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

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // 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 latência na primeira entrada

Para avaliar a métrica de latência na primeira entrada, é 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 para que o Monitoramento de desempenho informe as outras métricas de aplicativos da Web.

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

O Firebase pode detectar se você adicionou o SDK ao seu app quando ele recebe informações de eventos (como interações) do app. Se você ainda estiver desenvolvendo localmente, interaja com o app a fim de gerar eventos para a detecção do SDK, bem como coleta e processamento inicial de dados.

  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 para ver se a plataforma detectou o SDK.

    Se você não vir a mensagem "SDK detectado", veja as dicas de solução de problemas.

  4. O Monitoramento de desempenho processa dados de eventos de desempenho antes de exibi-los no painel Desempenho. Você verá seus dados iniciais em até 24 horas depois de ver a mensagem de detecção do SDK.

    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 (por exemplo, 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 código, você define o início e o fim de um trace de código personalizado (e adiciona as métricas personalizadas que preferir) usando a API fornecida pelo SDK do Monitoramento de desempenho.

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 Monitoramento de desempenho, é possível implantar a versão atualizada do seu app para seus usuários.

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

Próximas etapas