Monitoramento de desempenho do Firebase para Web

1. Visão geral

Neste codelab, você aprenderá a usar o Monitoramento de desempenho do Firebase para medir o desempenho de um app da Web de chat. Acesse https://fireperf-Friendlychat.web.app/ para ver uma demonstração ao vivo.

O que você aprenderá

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

Pré-requisitos

• O ambiente de desenvolvimento integrado ou o editor de texto de sua escolha, como WebStorm, Atom, Sublime ou VS Code.
• Um terminal/console
• em um navegador da sua escolha, como o Chrome;
• O exemplo de código do codelab. Consulte a próxima seção para saber como acessar o código.

2. Acessar o exemplo de código

Clone o repositório do 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, faça o download do repositório como um arquivo ZIP (link em inglês).

Importar o app inicial

Usando seu ambiente de desenvolvimento integrado, abra ou importe o diretório 📁 performance-monitoring-start do repositório clonado. Esse diretório 📁 performance-monitoring-start contém o código inicial do codelab, que é um app da Web de chat.

3. Criar e configurar 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 ID do seu projeto do Firebase.

3. Clique em Criar projeto.

Adicionar um app da Web do Firebase ao projeto

1. Clique no ícone da Web para criar um novo app da Web do Firebase.
2. Registre o app com o apelido Friendly Chat e marque a caixa ao lado de Também configurar o Firebase Hosting para este app.
3. Clique em Registrar app.
4. Clique nas etapas restantes. Não é necessário seguir as instruções que aparecem na tela agora. Elas serão abordadas nas próximas etapas deste codelab.

Ativar o Login do Google para Firebase Authentication

Para permitir que os usuários façam login no app de chat com as próprias Contas do Google, usaremos o método de login do Google.

Será necessário ativar o login do Google:

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

Ativar o Cloud Firestore

O app da Web usa o Cloud Firestore para salvar mensagens de chat e receber novas mensagens.

Será necessário 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 depois de ler a exoneração de responsabilidade sobre as regras de segurança.

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

Ativar o Cloud Storage

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

Será necessário ativar o Cloud Storage:

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

O código inicial inclui uma regra básica de segurança, que vamos implantar mais adiante no codelab.

4. Instalar a interface de linha de comando do Firebase

A interface de linha de comando (CLI) do Firebase permite usar o Firebase Hosting para disponibilizar seu app da Web localmente e implantá-lo no 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 CLI do Firebase é a v8.0.0 ou mais recente.

3. Autorize a CLI do Firebase executando o seguinte comando:

firebase login

Definimos o modelo de app da Web para extrair a configuração do app para o Firebase Hosting do diretório local do app (o repositório que você clonou anteriormente no codelab). No entanto, para extrair a configuração, precisamos associar o app ao projeto do Firebase.

4. Confira se a linha de comando está acessando o diretório local performance-monitoring-start do app.
5. Associe o app ao projeto do Firebase executando o seguinte comando:

firebase use --add

6. Quando solicitado, selecione o ID do projeto e atribua um alias a ele.

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

7. Siga as instruções restantes na linha de comando.

5. Integrar com o Monitoramento de desempenho do Firebase

Há várias maneiras de integrar o SDK do Monitoramento de desempenho do Firebase para a Web. Consulte a documentação para ver detalhes. Neste codelab, ativaremos o monitoramento de desempenho de URLs do Hosting.

Adicionar monitoramento de desempenho e inicializar o Firebase

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Também precisamos inicializar o SDK do Firebase com um objeto de configuração que contenha informações sobre o projeto do Firebase e o app da Web que queremos usar. Como estamos usando o Firebase Hosting, é possível importar um script especial que fará essa configuração para você. Neste codelab, já adicionamos a linha abaixo na parte de baixo 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>

3. No arquivo src/index.js, adicione a seguinte linha abaixo de TODO para inicializar o monitoramento de desempenho.

index.js

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

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

Adicionar a biblioteca de polyfill de latência na primeira entrada

O latência na primeira entrada é útil porque o navegador que responde a uma interação fornece aos usuários as primeiras impressões sobre a capacidade de resposta do seu aplicativo.

A latência na 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. Ela é interrompida imediatamente após o navegador conseguir responder à entrada, ou seja, ele não está ocupado carregando ou analisando seu conteúdo.

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

Abra o arquivo public/index.html e remova a marca de 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 Monitoramento de desempenho do Firebase no seu código.

Nas etapas a seguir, você aprenderá a adicionar traces personalizados com o Monitoramento de desempenho do Firebase. Se você quiser coletar apenas os traces automáticos, acesse a seção "Implantar e começar a enviar imagens".

6. Adicionar um rastro personalizado ao app

O Monitoramento de desempenho permite criar traces personalizados. Um rastro personalizado é um relatório para a duração de um bloco de execução no app. Você define o início e o fim de um rastro personalizado usando as APIs fornecidas pelo SDK.

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Para registrar um rastro personalizado, especifique os pontos de partida e de parada. Pense no rastro 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 um rastro personalizado. Após a implantação do código, a duração do rastro personalizado vai ser registrada se um usuário enviar uma mensagem de imagem. Assim, você terá uma ideia de quanto tempo leva para que usuários reais enviem imagens ao seu aplicativo de chat.

7. Adicione uma métrica personalizada ao app.

É possível configurar ainda mais um trace personalizado para registrar métricas personalizadas para eventos relacionados ao desempenho que ocorrem no escopo. Por exemplo, você pode usar uma métrica para investigar se o tempo de upload é afetado pelo tamanho de uma imagem para o trace personalizado definido na última etapa.

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

index.js

 ...

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

 ...

Essa métrica permite que o monitoramento de desempenho registre a duração personalizada do trace, bem como o tamanho da imagem enviada.

8. Adicionar um atributo personalizado ao app

Com base nas etapas anteriores, também é possível coletar atributos personalizados nos traces personalizados. Os atributos personalizados podem ajudar a segmentar dados por categorias específicas para seu app. Por exemplo, é possível coletar o tipo MIME do arquivo de imagem para investigar como ele pode afetar o desempenho.

1. Use o trace personalizado definido no arquivo src/index.js.
2. Adicione a seguinte linha abaixo do TODO para registrar o tipo MIME da imagem enviada.

index.js

 ...

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

 ...

Esse atributo permite que o monitoramento de desempenho categorize a duração personalizada do trace com base no tipo de imagem enviada.

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

O SDK do Monitoramento de desempenho do Firebase foi projetado para ser carregado de forma assíncrona, sem afetar negativamente o desempenho dos apps da Web durante o carregamento da página. A API Firebase Performance Monitoring fica indisponível antes do carregamento do SDK. Nesse cenário, ainda é possível adicionar traces personalizados usando a API User Timing. O SDK de desempenho do Firebase coletará as durações de measure() e as registrará como traces personalizados.

Mediremos a duração do carregamento de scripts de estilo de app 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 de app.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Adicione as linhas abaixo para marcar o fim do carregamento dos scripts de estilo do app e 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 Monitoramento de desempenho do Firebase. Mais tarde, você poderá encontrar um trace personalizado chamado loadStyling no Console de desempenho do Firebase.

10. Implantar e enviar imagens

Implantar no Firebase Hosting

Depois de adicionar o Monitoramento de desempenho do Firebase ao seu código, siga estas etapas para implantar o código no Firebase Hosting:

1. Confira se a linha de comando está acessando o diretório local performance-monitoring-start do app.
2. Implante os arquivos no projeto do Firebase executando o seguinte comando:

firebase deploy

3. O console vai 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

4. Acesse seu app da Web que agora está totalmente hospedado usando o Firebase Hosting em dois dos seus subdomínios do Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app.

Verificar se o monitoramento de desempenho está ativado

Abra o Console do Firebase e acesse a guia Desempenho. Se a mensagem de boas-vindas for exibida como "SDK detectado", significa que a integração com o Monitoramento de desempenho do Firebase foi concluída.

Enviar mensagem com imagem

Gere alguns dados de desempenho enviando imagens no app de chat.

1. Depois de fazer login no app de chat, clique no botão de upload de imagem .
2. Selecione um arquivo de imagem usando o seletor de arquivos.
3. Envie várias imagens (algumas amostras são armazenadas no public/images/) para testar a distribuição das métricas e atributos personalizados.

Novas mensagens vão aparecer na interface do app com as imagens selecionadas.

11. Monitorar o painel

Depois de implantar seu app da Web e enviar mensagens de imagem como usuário, é possível analisar os dados de desempenho no painel do monitoramento de desempenho (no Console do Firebase).

Acessar seu painel

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

Analisar dados no dispositivo

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

1. Clique na guia No dispositivo.

• A tabela Carregamentos de página mostra as várias métricas de desempenho que o monitoramento de desempenho coleta automaticamente enquanto a página é carregada.
• A tabela Durações mostra todos os traces personalizados definidos no código do app.

2. Clique em saveImageMessage na tabela Durações para analisar métricas específicas do trace.

3. Clique em Agregar para revisar a distribuição dos tamanhos das imagens. Você pode conferir a métrica adicionada para medir o tamanho da imagem desse trace personalizado.

4. Clique em Ao longo do tempo, ao lado de Agregar na etapa anterior. Também é possível conferir a Duração do trace personalizado. Clique em Mostrar mais para analisar os dados coletados em mais detalhes.

5. Na página exibida, clique em imageType para segmentar os dados de duração por tipo MIME de imagem. Esses dados específicos foram registrados por causa do atributo imageType que você adicionou ao rastreamento personalizado.

Analisar dados da rede

Uma solicitação de rede HTTP/S é um relatório que captura o tempo de resposta e o tamanho do payload de chamadas de rede.

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

12. Parabéns!

Você ativou o SDK do Firebase para monitoramento de desempenho e coletou traces automáticos e personalizados para medir o desempenho real do seu app de chat.

O que vimos:

• Adicionar o SDK do Monitoramento de desempenho do Firebase ao seu app da Web
• Adicionar rastros personalizados ao código.
• Registro de métricas personalizadas vinculadas ao trace personalizado.
• Segmentar dados de performance usando atributos personalizados.
• Entender como usar o painel de monitoramento de desempenho para ter insights sobre o desempenho do seu app.

Saiba mais:

• firebase.google.com (link em inglês)
• firebase.google.com/docs/perf-mon/get-started-web (em inglês)
• web.dev/fast/ (link em inglês)