Monitoramento de desempenho do Firebase para Web

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

1. Visão Geral

Neste codelab, você aprenderá a usar o Firebase Performance Monitoring para medir o desempenho de um aplicativo da Web de bate-papo. Visite https://fireperf-friendlychat.web.app/ para ver uma demonstração ao vivo.

3b1284f5144b54f6.png

O que você vai aprender

  • Como adicionar o Firebase Performance Monitoring ao seu aplicativo da Web para obter métricas prontas para uso (carregamento de página e solicitações de rede).
  • Como medir uma parte específica do código com rastreamentos personalizados.
  • Como registrar métricas personalizadas adicionais vinculadas a um rastreamento personalizado.
  • Como segmentar ainda mais seus dados de desempenho com atributos personalizados.
  • Como usar o painel de monitoramento de desempenho para entender o desempenho do seu aplicativo Web.

O que você precisará

  • O IDE ou editor de texto de sua escolha, como WebStorm , Atom , Sublime ou VS Code
  • Um terminal/console
  • Um navegador de sua escolha, como o Chrome
  • O código de amostra do codelab (consulte a próxima seção deste codelab para saber como obter o código.)

2. Obtenha o código de amostra

Clone o repositório GitHub do codelab na linha de comando:

git clone https://github.com/firebase/codelab-friendlychat-web

Como alternativa, se você não tiver o git instalado, poderá baixar o repositório como um arquivo zip .

Importar o aplicativo inicial

Usando seu IDE, abra ou importe o diretório 📁 performance-monitoring-start do repositório clonado. Este 📁 diretório performance-monitoring-start contém o código inicial para o codelab, que é um aplicativo web de bate-papo.

3. Crie e configure um projeto do Firebase

Criar um projeto do Firebase

  1. No console do Firebase , clique em Adicionar projeto .
  2. Nomeie seu projeto do Firebase como FriendlyChat .

Lembre-se do código do projeto do Firebase.

  1. Clique em Criar projeto .

Adicionar um aplicativo da Web do Firebase ao projeto

  1. Clique no ícone da web 58d6543a156e56f9.png para criar um novo app da Web do Firebase.
  2. Registre o aplicativo com o apelido Friendly Chat e marque a caixa ao lado de Também configurar o Firebase Hosting para este aplicativo .
  3. Clique em Registrar aplicativo .
  4. Clique nas etapas restantes. Você não precisa seguir as instruções na tela agora; eles serão abordados em etapas posteriores deste codelab.

ea9ab0db531a104c.png

Ative o login do Google para autenticação do Firebase

Para permitir que os usuários façam login no aplicativo de bate-papo com suas contas do Google, usaremos o método de login do Google .

Você precisará ativar o login do Google :

  1. No console do Firebase, localize a seção Develop no painel esquerdo.
  2. Clique em Autenticação e, em seguida, clique na guia Método de entrada ( vá para o console ).
  3. Ative o provedor de login do Google e clique em Salvar .

7f3040a646c2e502.png

Ativar o Cloud Firestore

O aplicativo da Web usa o Cloud Firestore para salvar mensagens de bate-papo e receber novas mensagens de bate-papo.

Você precisará ativar o Cloud Firestore:

  1. Na seção Desenvolver do console do Firebase, clique em Banco de dados .
  2. Clique em Criar banco de dados no painel do Cloud Firestore.
  3. Selecione a opção Iniciar no modo de teste e clique em Ativar após ler o aviso sobre as regras de segurança.

O código inicial deste codelab inclui regras mais seguras. Vamos implantá-los mais tarde no codelab.

24bd1a097492eac6.png

Ativar armazenamento em nuvem

O aplicativo da Web usa o Cloud Storage para Firebase para armazenar, fazer upload e compartilhar fotos.

Você precisará ativar o Cloud Storage:

  1. Na seção Desenvolver do console do Firebase, clique em Armazenamento .
  2. Clique em Começar .
  3. Leia a isenção de responsabilidade sobre regras de segurança para seu projeto do Firebase e clique em Entendi .

O código inicial inclui uma regra básica de segurança, que será implantada posteriormente no codelab.

4. Instale a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para veicular seu aplicativo da Web localmente, bem como para implantar seu aplicativo da Web em seu projeto do Firebase.

  1. Instale a CLI seguindo estas instruções nos documentos do Firebase.
  2. Verifique se a CLI foi instalada corretamente executando o seguinte comando em um terminal:
firebase --version

Verifique se sua versão da Firebase CLI é v8.0.0 ou posterior.

  1. Autorize a Firebase CLI executando o seguinte comando:
firebase login

Configuramos o modelo de aplicativo da Web para extrair a configuração do seu aplicativo para o Firebase Hosting do diretório local do seu aplicativo (o repositório que você clonou anteriormente no codelab). Mas para puxar a configuração, precisamos associar seu aplicativo ao seu projeto do Firebase.

  1. Certifique-se de que sua linha de comando esteja acessando o diretório performance-monitoring-start local do seu aplicativo.
  2. Associe seu aplicativo ao projeto do Firebase executando o seguinte comando:
firebase use --add
  1. Quando solicitado, selecione o ID do projeto e dê um alias ao projeto do Firebase.

Um alias é útil se você tiver vários ambientes (produção, preparação etc.). No entanto, para este codelab, vamos usar apenas o alias de default .

  1. Siga as instruções restantes em sua linha de comando.

5. Integrar com o Firebase Performance Monitoring

Há várias formas de integração com o SDK do Firebase Performance Monitoring para Web (consulte a documentação para obter detalhes). Neste codelab, habilitaremos o monitoramento de desempenho de URLs de hospedagem .

Adicionar monitoramento de desempenho e inicializar o Firebase

  1. Abra o arquivo src/index.js e adicione a seguinte linha abaixo do TODO para incluir o SDK do Firebase Performance Monitoring.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Também precisamos inicializar o SDK do Firebase com um objeto de configuração que contém informações sobre o projeto do Firebase e o aplicativo da Web que queremos usar. Como estamos usando o Firebase Hosting, você pode importar um script especial que fará essa configuração para você. Para este codelab, já adicionamos a seguinte linha para você na parte inferior do arquivo public/index.html , mas verifique se ela está lá.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. No arquivo src/index.js , adicione a seguinte linha abaixo do TODO para inicializar o monitoramento de desempenho.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

O Monitoramento de desempenho agora coletará automaticamente as métricas de carregamento de página e solicitação de rede para você quando os usuários usarem seu site! Consulte a documentação para saber mais sobre rastreamentos automáticos de carregamento de página.

Adicione a primeira biblioteca polyfill de atraso de entrada

O atraso na primeira entrada é útil, pois o navegador que responde a uma interação do usuário dá aos usuários as primeiras impressões sobre a capacidade de resposta do seu aplicativo.

O atraso da primeira entrada começa quando o usuário interage pela primeira vez com um elemento na página, como clicar em um botão ou hiperlink. Ele para imediatamente depois que o navegador consegue responder à entrada, o que significa que o navegador não está ocupado carregando ou analisando seu conteúdo.

Essa biblioteca polyfill é opcional para integração de monitoramento de desempenho.

Abra o arquivo public/index.html e remova o comentário da linha a seguir.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Neste ponto, você concluiu a integração com o Firebase Performance Monitoring em seu código!

Nas etapas a seguir, você aprenderá a adicionar traces personalizados usando o Firebase Performance Monitoring. Se você deseja coletar apenas os rastreamentos automáticos, vá para a seção "Implantar e começar a enviar imagens".

6. Adicione um rastreamento personalizado ao seu aplicativo

O Monitoramento de Desempenho permite que você crie rastreamentos personalizados . Um rastreamento personalizado é um relatório da duração de um bloco de execução em seu aplicativo. Você define o início e o fim de um rastreamento personalizado usando as APIs fornecidas pelo SDK.

  1. No arquivo src/index.js , obtenha um objeto de desempenho e crie um rastreamento personalizado para fazer upload de uma mensagem de imagem.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Para gravar um rastreamento personalizado, você precisa especificar o ponto inicial e o ponto de parada do rastreamento. Você pode pensar em um rastreamento como um cronômetro.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Você definiu com sucesso um rastreamento personalizado! Depois de implantar seu código, a duração do rastreamento personalizado será registrada se um usuário enviar uma mensagem de imagem. Isso lhe dará uma ideia de quanto tempo leva para os usuários do mundo real enviarem imagens em seu aplicativo de bate-papo.

7. Adicione uma métrica personalizada ao seu aplicativo.

Você pode configurar ainda mais um rastreamento personalizado para registrar métricas personalizadas para eventos relacionados ao desempenho que ocorrem em seu escopo. Por exemplo, você pode usar uma métrica para investigar se o tempo de upload é afetado pelo tamanho de uma imagem para o rastreamento personalizado que definimos na última etapa.

  1. Localize o rastreamento personalizado da etapa anterior (definido em seu arquivo src/index.js ).
  2. Adicione a seguinte linha abaixo do TODO para registrar o tamanho da imagem carregada.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Essa métrica permite que o monitoramento de desempenho registre a duração do rastreamento personalizado, bem como o tamanho da imagem carregada.

8. Adicione um atributo personalizado ao seu aplicativo

Com base nas etapas anteriores, você também pode coletar atributos personalizados em seus rastreamentos personalizados . Atributos personalizados podem ajudar na segmentação de dados por categorias específicas para seu aplicativo. Por exemplo, você pode coletar o tipo MIME do arquivo de imagem para investigar como o tipo MIME pode afetar o desempenho.

  1. Use o rastreamento personalizado definido em seu arquivo src/index.js .
  2. Adicione a seguinte linha abaixo do TODO para registrar o tipo MIME da imagem carregada.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Esse atributo permite que o monitoramento de desempenho categorize a duração do rastreamento personalizado com base no tipo de imagem carregado.

9. [Estender] Adicionar um rastreamento personalizado com a API User Timing

O SDK do Firebase Performance Monitoring foi projetado para ser carregado de forma assíncrona e não afetar negativamente o desempenho dos aplicativos da Web durante o carregamento da página. Antes do carregamento do SDK, a API Firebase Performance Monitoring não está disponível. Nesse cenário, você ainda pode adicionar rastreamentos personalizados usando a API User Timing . O SDK de desempenho do Firebase selecionará as durações de measure() e as registrará como rastreamentos personalizados.

Vamos medir a duração do carregamento de scripts de estilo de aplicativo usando a API User Timing.

  1. No arquivo public/index.html , adicione a linha a seguir para marcar o início do carregamento dos scripts de estilo do aplicativo.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Adicione as seguintes linhas para marcar o fim do carregamento dos scripts de estilo do aplicativo e para medir a duração entre o início e o fim.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

A entrada que você criou aqui será coletada automaticamente pelo Firebase Performance Monitoring. Você poderá encontrar um trace personalizado chamado loadStyling no console do Firebase Performance posteriormente.

10. Implante e comece a enviar imagens

Implantar no Firebase Hosting

Depois de adicionar o Firebase Performance Monitoring ao seu código, siga estas etapas para implantar seu código no Firebase Hosting:

  1. Certifique-se de que sua linha de comando esteja acessando o diretório performance-monitoring-start local do seu aplicativo.
  2. Implante seus arquivos no projeto do Firebase executando o seguinte comando:
firebase deploy
  1. O console deve exibir o seguinte:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visite seu aplicativo da Web que agora está totalmente hospedado usando o Firebase Hosting em dois de seus próprios subdomínios do Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app .

Verifique se o monitoramento de desempenho está ativado

Abra o console do Firebase e acesse a guia Desempenho . Se você vir uma mensagem de boas-vindas mostrando "SDK detectado", você integrou com sucesso o Firebase Performance Monitoring!

30df67e5a07d03b0.png

Enviar mensagem de imagem

Gere alguns dados de desempenho enviando imagens em seu aplicativo de bate-papo.

  1. Depois de fazer login no seu aplicativo de bate-papo, clique no botão de upload de imagem 13734cb66773e5a3.png .
  2. Selecione um arquivo de imagem usando o seletor de arquivos.
  3. Tente enviar várias imagens (algumas amostras são armazenadas em public/images/ ) para que você possa testar a distribuição de métricas e atributos personalizados.

Novas mensagens devem ser exibidas na interface do usuário do aplicativo junto com as imagens selecionadas.

11. Monitore o painel

Depois de implantar seu aplicativo da Web e enviar mensagens de imagem como usuário, você pode analisar os dados de desempenho no painel de monitoramento de desempenho (no Firebase console).

Acesse seu painel

  1. No console do Firebase , selecione o projeto que contém seu aplicativo Friendly Chat .
  2. No painel esquerdo, localize a seção Qualidade e clique em Desempenho .

Revise os dados no dispositivo

Depois que o monitoramento de desempenho processar os dados do seu aplicativo, você verá guias na parte superior do painel. Verifique novamente mais tarde se ainda não vir nenhum dado ou guia.

  1. Clique na guia No dispositivo .
  • A tabela de carregamentos de página mostra as várias métricas de desempenho que o monitoramento de desempenho coleta automaticamente enquanto sua página está carregando.
  • A tabela Durações mostra todos os rastreamentos personalizados que você definiu no código do seu aplicativo.
  1. Clique em saveImageMessage na tabela Durações para revisar métricas específicas para o rastreamento.

e28758fd02d9ffac.png

  1. Clique em Agregar para revisar a distribuição de tamanhos de imagem. Você pode ver a métrica adicionada para medir o tamanho da imagem para esse rastreamento personalizado.

c3cbcfc0c739a0a8.png

  1. Clique em Ao longo do tempo que está ao lado de Agregar na etapa anterior. Você também pode exibir a duração do rastreamento personalizado. Clique em Exibir mais para revisar os dados coletados com mais detalhes.

16983baa31e05732.png

  1. Na página que se abre, você pode segmentar os dados de duração por tipo de imagem MIME clicando em imageType . Esses dados específicos foram registrados devido ao atributo imageType que você adicionou ao seu rastreamento personalizado.

8e5c9f32f42a1ca1.png

Revise os dados da rede

Uma solicitação de rede HTTP/S é um relatório que captura o tempo de resposta e o tamanho da carga útil das chamadas de rede.

  1. Volte para a tela principal do painel de monitoramento de desempenho.
  2. Clique na guia Rede para ver uma lista de entradas de solicitação de rede para seu aplicativo Web.
  3. Navegue por eles para identificar solicitações lentas e comece a trabalhar em uma correção para melhorar o desempenho do seu aplicativo!

26a2be152a77ffb9.png

12. Parabéns!

Você ativou o SDK do Firebase para monitoramento de desempenho e coletou rastreamentos automáticos e personalizados para medir o desempenho real do seu aplicativo de bate-papo.

O que cobrimos:

  • Como adicionar o SDK do Firebase Performance Monitoring ao seu aplicativo da Web.
  • Adicionando rastreamentos personalizados ao seu código.
  • Gravação de métricas personalizadas vinculadas ao rastreamento personalizado.
  • Segmentação de dados de desempenho usando atributos personalizados.
  • Noções básicas sobre como usar o painel de monitoramento de desempenho para obter informações sobre o desempenho do seu aplicativo.

Saber mais: