Você fez um trabalho duro para acelerar o processo. Agora, automatize o teste de performance com o Lighthouse Bot para continuar rápido.
O Lighthouse classifica seu app em cinco categorias, e uma delas é o desempenho. É possível se lembrar de monitorar as mudanças de desempenho com o DevTools ou a CLI do Lighthouse sempre que editar o código, mas não é necessário fazer isso. As ferramentas podem fazer o tedioso por você. O Travis CI é um ótimo serviço que executa automaticamente testes do app na nuvem sempre que você envia um novo código.
O Lighthouse Bot se integra ao Travis CI, e o recurso de orçamento de desempenho garante que você não fará downgrade acidentalmente do desempenho sem perceber. É possível configurar seu repositório para que ele não permita a mesclagem de solicitações de envio se as pontuações do Lighthouse ficarem abaixo do limite definido (por exemplo, < 96/100).
Embora seja possível testar o desempenho no localhost, seu site geralmente terá um desempenho diferente em servidores ativos. Para ter uma visão mais realista, convém implantar seu site em um servidor temporário. É possível usar qualquer serviço de hospedagem. Neste guia, você vai dar uma olhada no Firebase Hosting.
1. Instalação
Este aplicativo simples ajuda você a classificar três números.
Clone o exemplo do GitHub e adicione-o como um repositório na sua conta do GitHub.
2. Implantar no Firebase
Para começar, você precisa de uma conta do Firebase. Depois de fazer isso, crie um novo projeto no Console do Firebase clicando em "Adicionar projeto":
Como implantar no Firebase
Você precisará da CLI do Firebase para implantar o app. Mesmo que você já o tenha instalado, é recomendável atualizar com frequência a CLI para a versão mais recente usando este comando:
npm install -g firebase-tools
Para autorizar a CLI do Firebase, execute:
firebase login
Agora inicialize o projeto:
firebase init
O console vai fazer uma série de perguntas durante a configuração:
- Quando solicitado a selecionar os recursos, escolha "Hosting".
- Para o projeto padrão do Firebase, selecione o projeto que você criou no Console do Firebase.
- Digite "public" como seu diretório público.
- Digite "N" (no) para configurar como um app de página única.
Esse processo cria um arquivo de configuração firebase.json na raiz do
diretório do projeto.
Parabéns, você está pronto para implantar! Execute:
firebase deploy
Em uma fração de segundo, você terá um app ativo.
3. Como configurar o Travis
Você precisará registrar uma conta no Travis e ativar a integração de apps do GitHub na seção "Configurações" do seu perfil.
Depois de criar uma conta
Acesse as configurações no seu perfil, clique no botão "Sincronizar conta" e verifique se o repositório do seu projeto está listado no Travis.
Para iniciar a integração contínua, você precisa de duas coisas:
- Ter um arquivo
.travis.ymlno diretório raiz - Para acionar um build usando um push do Git antigo normal.
O repositório lighthouse-bot-starter já tem um arquivo YAML .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
O arquivo YAML instrui o Travis a instalar todas as dependências e criar seu app. Agora é sua vez de enviar o app de exemplo para seu próprio repositório do GitHub. Execute o seguinte comando se ainda não tiver feito isso:
git push origin main
Clique no seu repositório em "Configurações" no Travis para ver o painel do Travis do seu projeto. Se tudo estiver certo, o build vai mudar de amarelo para verde em alguns minutos. 🎉
4. Automatizar a implantação do Firebase com o Travis
Na etapa 2, você fez login na sua conta do Firebase e implantou o app da
linha de comando com firebase deploy. Para que o Travis implante seu app no Firebase, você precisa autorizá-lo. Como fazer isso? Com um token do Firebase.
🗝️🔥
Autorizar o Firebase
Para gerar o token, execute este comando:
firebase login:ci
Uma nova guia será aberta em uma janela do navegador para que o Firebase possa fazer a verificação. Depois disso, volte ao console para encontrar seu token recém-criado. Copie e volte para o Travis.
No painel do Travis do seu projeto, acesse Mais opções > Configurações > Variáveis de ambiente.
Cole o token no campo de valor, dê um nome à variável FIREBASE_TOKEN e adicione-a.
Adicionar implantação à sua configuração do Travis
Você precisa das seguintes linhas para instruir o Travis a implantar o app após cada build bem-sucedido.
Adicione-os ao final do arquivo .travis.yml. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Envie essa alteração para o GitHub e aguarde sua primeira implantação automatizada. Se você der uma olhada no seu registro do Travis, ele vai mostrar em breve ✔️ Implantação concluída!
Agora, sempre que você fizer alterações no app, elas serão implantadas automaticamente no Firebase.
5. Configurando o bot do Lighthouse
O Friendly Lighthouse Bot atualiza você sobre as pontuações do Lighthouse do seu app. Você só precisa de um convite para seu repositório.
No GitHub, acesse as configurações do seu projeto e adicione "beaconbot" como colaborador (Configurações>Colaboradores):
A aprovação dessas solicitações é um processo manual. Portanto, elas nem sempre ocorrem instantaneamente. Antes de iniciar os testes, verifique se o farolbot aprovou o status de colaborador. Enquanto isso, você também precisa adicionar outra chave às variáveis de ambiente do seu projeto no Travis. Deixe seu e-mail aqui para receber uma chave do bot do Lighthouse na sua caixa de entrada. 📬
No Travis, adicione esta chave como uma variável de ambiente e nomeie-a como LIGHTHOUSE_API_KEY:
Adicionar o bot do Lighthouse ao seu projeto
Depois, adicione o bot do Lighthouse ao seu projeto executando:
npm i --save-dev https://github.com/ebidel/lighthousebot
E adicione este bit a package.json:
"scripts": {
"lh": "lighthousebot"
}
Adicionar o bot do Lighthouse à sua configuração do Travis
O último truque é testar o desempenho do app após cada solicitação de envio.
Em .travis.yml, adicione outra etapa em after_success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Ele executará uma auditoria do Lighthouse no URL fornecido. Portanto, substitua
https://staging.example.com pelo URL do seu app
(seu-app-123.firebaseapp.com).
Defina altos padrões e ajuste a configuração para não aceitar mudanças no app que reduzam a pontuação de desempenho abaixo de 95:
- npm run lh -- --perf=95 https://staging.example.com
Faça uma solicitação de envio para acionar o teste do bot do Lighthouse no Travis
O bot do Lighthouse só testará solicitações de envio. Portanto, se você enviar para a ramificação principal agora, verá apenas a mensagem "Este script só pode ser executado em solicitações de PR do Travis" no registro do Travis.
Para acionar o teste de bot do Lighthouse:
- Finalizar uma nova ramificação
- Envie por push para o GitHub
- Fazer uma solicitação de envio
Aguarde a página de solicitação de envio e aguarde o bot do Lighthouse cantar. 🎤
A pontuação de desempenho é ótima, o app está abaixo do orçamento e a verificação foi aprovada.
Mais opções do Lighthouse
Lembra-se de como o Lighthouse testa cinco categorias diferentes? É possível aplicar pontuações a qualquer um deles com sinalizações de bot do Lighthouse:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Exemplo:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Isso vai falhar no PR se a pontuação de desempenho ficar abaixo de 93 ou a pontuação de SEO ficar abaixo de 100.
Também é possível optar por não receber comentários do bot do Lighthouse com a opção --no-comment.