Você trabalhou duro para ter velocidade. Agora, automatize os testes de desempenho com o Lighthouse Bot para manter essa velocidade.
O Lighthouse avalia seu app em cinco categorias, e uma delas é a performance. Você pode tentar lembrar de monitorar as mudanças de performance 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 as coisas chatas por você. O Travis CI é um ótimo serviço que executa automaticamente testes para seu app na nuvem sempre que você envia um novo código.
O bot do Lighthouse se integra ao Travis CI, e o recurso de montante de desempenho garante que você não vai reduzir a performance sem perceber. É possível configurar seu repositório para que ele não permita a fusão de solicitações de pull 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 tem um desempenho diferente em servidores ativos. Para ter uma ideia mais realista, é melhor implantar seu site em um servidor de teste. Você pode usar qualquer serviço de hospedagem. Este guia vai usar o Firebase Hosting.
1. Configuração
Esse app 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 projeto no console do Firebase clicando em "Adicionar projeto":
Como implantar no Firebase
Você vai precisar da Firebase CLI para implantar o app. Mesmo que ela já esteja instalada, é recomendável atualizar a CLI com frequência para a versão mais recente com 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 recursos, escolha "Hospedagem".
- 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" (não) 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, tudo pronto para a implantação! Execute:
firebase deploy
Em um instante, você terá um app ativo.
3. Como configurar o Travis
Você precisa registrar uma conta no Travis e ativar a integração dos apps do GitHub na seção "Configurações" do seu perfil.
Depois de criar uma conta
Acesse "Configurações" no seu perfil, clique no botão "Sincronizar conta" e verifique se o repositório do 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 fazendo um git push 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 informa ao Travis para 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. Se ainda não tiver feito isso, execute o seguinte comando:
git push origin main
Clique no seu repositório em "Settings" no Travis para ver o painel do Travis do seu projeto. Se tudo estiver certo, a cor da sua 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 na
linha de comando com firebase deploy. Para que o Travis implante seu app no
Firebase, é necessário autorizar. 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 verificar você. Depois disso, volte ao console e confira o 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, nomeie a variável como FIREBASE_TOKEN e adicione-a.
Adicionar a implantação à configuração do Travis
Você precisa das seguintes linhas para informar ao Travis que implante 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 mudança para o GitHub e aguarde sua primeira implantação automatizada. Se você consultar o registro do Travis, ele vai mostrar ✔️ Deploy complete! em breve.
Agora, sempre que você fizer mudanças no app, elas serão implantadas automaticamente no Firebase.
5. Configurar o bot do Lighthouse
O bot do Lighthouse amigável informa sobre as pontuações do Lighthouse do seu app. Basta um convite para seu repositório.
No GitHub, acesse as configurações do projeto e adicione "lighthousebot" como um colaborador (Settings>Collaborators):
A aprovação dessas solicitações é um processo manual, então nem sempre acontece instantaneamente. Antes de começar a testar, verifique se o lighthousebot aprovou o status de colaborador. Enquanto isso, adicione outra chave às variáveis de ambiente do seu projeto no Travis. Deixe seu e-mail aqui, e você vai receber uma chave do bot do Lighthouse na sua caixa de entrada. 📬
No Travis, adicione essa chave como uma variável de ambiente e nomeie-a como LIGHTHOUSE_API_KEY:
Adicionar o bot do Lighthouse ao seu projeto
Em seguida, adicione o bot do Lighthouse ao seu projeto executando:
npm i --save-dev https://github.com/ebidel/lighthousebot
E adicione este trecho ao package.json:
"scripts": {
"lh": "lighthousebot"
}
Adicionar o bot do Lighthouse à configuração do Travis
Para o truque final, teste o desempenho do app após cada solicitação de extração.
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 vai executar uma auditoria do Lighthouse no URL especificado. Portanto, substitua
https://staging.example.com pelo URL do seu app
(your-app-123.firebaseapp.com).
Defina padrões altos e ajuste a configuração para não aceitar mudanças no app que façam a pontuação de desempenho ficar abaixo de 95:
- npm run lh -- --perf=95 https://staging.example.com
Faça uma solicitação de pull para acionar o teste do bot do Lighthouse no Travis
O bot do Lighthouse só testa solicitações de pull. Portanto, se você enviar para a ramificação principal agora, vai receber apenas "This script can only be run on Travis PR requests" no registro do Travis.
Para acionar o teste do bot do Lighthouse:
- Fazer checkout de uma nova ramificação
- Envie para o GitHub
- Fazer uma solicitação de pull
Aguarde na página de solicitação de pull e espere o Lighthouse Bot cantar! 🎤
A pontuação de performance está ótima, o app está dentro do orçamento e a verificação foi aprovada.
Mais opções do Lighthouse
Lembra que o Lighthouse testa cinco categorias diferentes? É possível aplicar pontuações a qualquer um deles com flags do 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 a solicitação de pull se a pontuação de desempenho cair abaixo de 93 ou a pontuação de SEO cair abaixo de 100.
Você também pode desativar os comentários do bot do Lighthouse com a opção --no-comment.