Como adicionar o Lighthouse a um sistema de integração contínua, como o GitHub Actions.
O Lighthouse CI é um pacote de ferramentas para usar o Lighthouse durante a integração contínua. O Lighthouse CI pode ser incorporadas aos fluxos de trabalho dos desenvolvedores de muitas maneiras diferentes. Este guia abrange os seguintes tópicos:
- Como usar a CLI do Lighthouse CI.
- Como configurar o provedor de CI para executar o Lighthouse CI.
- Como configurar uma ação do GitHub e status verificação para o Lighthouse CI. Essa ação mostra automaticamente os resultados do Lighthouse em solicitações de envio do GitHub.
- Criar um painel de desempenho e um repositório de dados para relatórios do Lighthouse.
Visão geral
O Lighthouse CI é um pacote de ferramentas sem custo financeiro que facilita o uso do Lighthouse para e o monitoramento de desempenho. Um único relatório do Lighthouse fornece um resumo da Web do desempenho da página no momento em que é executada. O Lighthouse CI mostra como as descobertas mudaram com o tempo. Isso pode ser usado para identificar o impacto alterações específicas no código ou garantir que os limites de desempenho sejam atingidos durante processos de integração contínua. Embora o monitoramento de desempenho seja o método caso de uso comum para o Lighthouse CI, ele pode ser usado para monitorar outros aspectos do do relatório do Lighthouse, como SEO ou acessibilidade.
A funcionalidade principal do Lighthouse CI é fornecida pelo comando Lighthouse CI
de linha de comando. Observação: esta é uma ferramenta separada do Lighthouse
CLI). A
A CLI do Lighthouse CI oferece um conjunto de
comandos
por usar o Lighthouse CI. Por exemplo, o comando autorun
executa vários
O Lighthouse gera, identifica o relatório médio do Lighthouse e faz o upload do relatório
para armazenamento. Esse comportamento pode ser altamente personalizado ao transmitir sinalizações adicionais
ou personalizando o arquivo de configuração do Lighthouse CI, lighthouserc.js
.
Embora a funcionalidade principal do Lighthouse CI seja encapsulada principalmente a CLI do Lighthouse CI, a Lighthouse CI normalmente é usada por meio de uma das as seguintes abordagens:
- Executar o Lighthouse CI como parte da integração contínua
- Usar uma ação do GitHub do Lighthouse CI que executa e comenta em cada pull solicitação
- Acompanhamento do desempenho ao longo do tempo pelo painel fornecido pelo Lighthouse Servidor.
Todas essas abordagens são baseadas na CLI do Lighthouse CI.
As alternativas ao Lighthouse CI incluem o monitoramento de performance terceirizado serviços ou escrever seu próprio script para coletar dados de desempenho durante a CI de desenvolvimento de software. Considere usar um serviço de terceiros se preferir permitir outra pessoa cuidar do gerenciamento do seu servidor de monitoramento de desempenho e dispositivos de teste ou, se quiser recursos de notificação (como e-mail ou Slack integração) sem precisar criar esses recursos por conta própria.
Usar o Lighthouse CI localmente
Esta seção explica como executar e instalar a CLI do Lighthouse CI localmente e
como configurar lighthouserc.js
. Executar a CLI do Lighthouse CI localmente é
maneira mais fácil de garantir que o lighthouserc.js
esteja configurado corretamente.
Instale a CLI do Lighthouse CI.
npm install -g @lhci/cli
O Lighthouse CI é configurado colocando um arquivo
lighthouserc.js
na raiz do repositório do seu projeto. Este arquivo é obrigatório e conterá o Lighthouse CI informações de configuração relacionadas. Embora o Lighthouse CI possa ser configurado para ser usada sem um Git repositório, as instruções neste artigo presumem que seu repositório do projeto esteja configurado para use o Git.Na raiz do repositório, crie uma configuração
lighthouserc.js
arquivo.touch lighthouserc.js
Adicione o código abaixo ao arquivo
lighthouserc.js
. Este código está vazio Configuração da CI do Lighthouse. Você vai adicionar elementos a essa configuração etapas posteriores.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
Sempre que o Lighthouse CI é executado, ele inicia um servidor para exibir seu site. É por esse servidor que o Lighthouse pode carregar seu site mesmo quando nenhum outro servidores estão em execução. Quando o Lighthouse CI terminar de ser executado, encerrar automaticamente o servidor. Para garantir que a veiculação funcione corretamente, é preciso configurar
staticDistDir
oustartServerCommand
propriedades.Caso seu site seja estático, adicione a propriedade
staticDistDir
aoci.collect
para indicar onde seus arquivos estáticos estão localizados. A Lighthouse CI vai usará seu próprio servidor para veicular esses arquivos enquanto testa seu site. Se as não for estático, adicione a propriedadestartServerCommand
ao Objetoci.collect
para indicar o comando que inicia seu servidor. O Lighthouse CI iniciará um novo processo de servidor durante o teste e o encerrará durante o teste depois.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
Adicione o método
url
ao objetoci.collect
para indicar os URLs que o Lighthouse CI deve executar o Lighthouse. O valor da propriedadeurl
deve ser fornecidos como uma matriz de URLs. essa matriz pode conter um ou mais URLs. De padrão, o Lighthouse CI executará o Lighthouse três vezes em cada URL.collect: { // ... url: ['http://localhost:8080'] }
Adicione o método
target
como o objetoci.upload
e defina o valor como'temporary-public-storage'
. Os relatórios do Lighthouse coletados por O Lighthouse CI será enviado para o armazenamento público temporário. O relatório permanecem lá por sete dias e depois são excluídos automaticamente. Essa configuração usa o modelo de "armazenamento público temporário" de enviar vídeos porque é rápido para configurar. Para informações sobre outras formas de armazenar relatórios do Lighthouse, consulte ao documentação.upload: { target: 'temporary-public-storage', }
O local de armazenamento do relatório será semelhante a este:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
Esse URL não vai funcionar porque o relatório já foi excluído.
Execute a CLI do Lighthouse CI no terminal usando o comando
autorun
. O Lighthouse vai executar o Lighthouse três vezes e, portanto, fará o upload da mediana do Lighthouse no relatório.lhci autorun
Se você configurou corretamente o Lighthouse CI, a execução desse comando deverá produza uma saída semelhante a esta:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Started a web server on port 65324... Running Lighthouse 3 time(s) on http://localhost:65324/index.html Run #1...done. Run #2...done. Run #3...done. Done running Lighthouse! Uploading median LHR of http://localhost:65324/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html No GitHub token set, skipping GitHub status check. Done running autorun.
Ignore a mensagem
GitHub token not set
na saída do console. Um O token do GitHub só será necessário se você quiser usar o Lighthouse CI com um GitHub Ação. Este artigo explica como configurar uma ação do GitHub.Clicando no link na saída que começa com
https://storage.googleapis.com...
vai levar você ao relatório do Lighthouse que corresponde à execução média do Lighthouse.Os padrões usados por
autorun
podem ser substituídos pela linha de comando oulighthouserc.js
. Por exemplo, a configuraçãolighthouserc.js
abaixo indica que cinco execuções do Lighthouse precisam ser coletadas sempre queautorun
é executado.Atualize
lighthouserc.js
para usar a propriedadenumberOfRuns
:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
Execute novamente o comando
autorun
:lhci autorun
A saída do terminal deve mostrar que o Lighthouse foi executado cinco vezes em vez do que os três padrão:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Automatically determined ./dist as `staticDistDir`. Set it explicitly in lighthouserc.json if incorrect. Started a web server on port 64444... Running Lighthouse 5 time(s) on http://localhost:64444/index.html Run #1...done. Run #2...done. Run #3...done. Run #4...done. Run #5...done. Done running Lighthouse! Uploading median LHR of http://localhost:64444/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html No GitHub token set, skipping GitHub status check. Done running autorun.
Para conhecer outras opções de configuração, consulte a documentação do configuração Documentação.
Configure seu processo de CI para executar o Lighthouse CI
O Lighthouse CI pode ser usado com sua ferramenta favorita de CI. A seção Como configurar sua CI Provedor da documentação do Lighthouse CI contém exemplos de código que mostram como incorporar o Lighthouse CI nos arquivos de configuração de ferramentas comuns de CI. Especificamente, esses exemplos de código mostram como executar o Lighthouse CI para coletar as medições de desempenho durante o processo de CI.
Usar o Lighthouse CI para coletar medidas de desempenho é um bom ponto de partida.
com o monitoramento de desempenho. No entanto, os usuários avançados podem querer ir além
e usar o Lighthouse CI para falhas nos builds se eles não atenderem aos requisitos predefinidos
como passar em auditorias específicas do Lighthouse ou atender a todas as exigências
orçamentos. Esse comportamento é configurado pela
assert
do arquivo lighthouserc.js
.
O Lighthouse CI oferece suporte a três níveis de declarações:
off
: ignora as declarações.warn
: falhas de impressão em stderrerror
: falhas de impressão no stderr e saem do Lighthouse CI com um valor diferente de zero. sair código
Confira abaixo um exemplo de configuração de lighthouserc.js
que inclui
declarações. Ele define declarações para as pontuações de desempenho do Lighthouse
categorias de acessibilidade. Para testar isso, adicione as declarações mostradas abaixo ao
seu arquivo lighthouserc.js
e execute o Lighthouse CI novamente.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
A saída do console gerada é assim:
![Captura de tela de uma mensagem de aviso gerada pelo Lighthouse CI](https://web.dev/static/articles/lighthouse-ci/image/screenshot-a-warning-mes-f1c97df5d1d.png?authuser=5&hl=pt)
Para mais informações sobre as declarações do Lighthouse CI, consulte documentação.
Configurar uma ação do GitHub para executar o Lighthouse CI
Uma ação do GitHub pode ser usada para executar CI do Lighthouse. Um novo relatório do Lighthouse gera um novo relatório sempre que um código elas são enviadas por push para qualquer ramificação de um repositório do GitHub. Use isto em conjunto com um status checa para exibir esses resultados em cada solicitação de envio.
![Captura de tela de uma verificação de status do GitHub](https://web.dev/static/articles/lighthouse-ci/image/screenshot-a-github-stat-667c532905358.png?authuser=5&hl=pt)
Na raiz do seu repositório, crie um diretório chamado
.github/workflows
: A fluxos de trabalho do seu projeto serão colocados nesse diretório. Um fluxo de trabalho é um processo que seja executado em um momento predeterminado (por exemplo, quando o código é enviado) e é composta por uma ou mais ações.mkdir .github mkdir .github/workflows
Em
.github/workflows
, crie um arquivo chamadolighthouse-ci.yaml
. Este arquivo vai manter a configuração de um novo fluxo de trabalho.touch lighthouse-ci.yaml
Adicione o texto abaixo a
lighthouse-ci.yaml
.name: Build project and run Lighthouse CI on: [push] jobs: lhci: name: Lighthouse CI runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Use Node.js 10.x uses: actions/setup-node@v1 with: node-version: 10.x - name: npm install run: | npm install - name: run Lighthouse CI run: | npm install -g @lhci/cli@0.3.x lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
Essa configuração define um fluxo de trabalho que consiste em um único job que será executado sempre que um novo código for enviado ao repositório. Esse job tem quatro etapas:
- Confira o repositório em que o Lighthouse CI vai ser executado
- Instalar e configurar o Node
- Instalar os pacotes npm necessários
- Execute o Lighthouse CI e faça upload dos resultados para o armazenamento público temporário.
Confirme e envie essas alterações por push para o GitHub. Se você seguiu corretamente as etapas acima, enviar o código para o GitHub acionará a execução do fluxo de trabalho que você acabou de adicionar.
Para confirmar que o Lighthouse CI foi acionado e visualizar o relatório, faça o seguinte: gerado, acesse a guia Ações do seu projeto. Aparecerá Crie o projeto e execute o fluxo de trabalho do Lighthouse CI listado nos seus commit recente.
Acesse o relatório do Lighthouse correspondente a uma confirmação específica na guia Ações. Clique na confirmação e em CI do Lighthouse. etapa do fluxo de trabalho e expanda os resultados de executar o Lighthouse CI.
Você acabou de configurar uma ação do GitHub para executar o Lighthouse CI. Isso será mais útil quando usado em conjunto com um status do GitHub .
Configurar uma verificação de status do GitHub
Uma verificação de status, se configurada, é uma mensagem que aparece em todos os PRs e normalmente inclui informações como os resultados de um teste ou o sucesso de um ser construído.
![Captura de tela das "Configurações" do GitHub .](https://web.dev/static/articles/lighthouse-ci/image/screenshot-the-github-s-67f929ea66a01.png?authuser=5&hl=pt)
As etapas abaixo explicam como configurar uma verificação de status para o Lighthouse CI.
Acesse o app GitHub do Lighthouse CI e clique em Configurar.
(Opcional) Se você faz parte de várias organizações no GitHub, escolha o organização proprietária do repositório em que você quer usar o Lighthouse e CI.
Selecione Todos os repositórios se quiser ativar o Lighthouse CI em todos ou selecione Somente repositórios selecionados se quiser usar apenas em repositórios específicos e os selecionar. Em seguida, clique em Instalar e Autorizar.
Copie o token exibido. Ela será usada na próxima etapa.
Para adicionar o token, acesse a página Configurações do GitHub clique em Secrets e depois em Adicionar um novo secret.
Defina o campo Nome como
LHCI_GITHUB_APP_TOKEN
e defina o Valor no token que você copiou na última etapa e depois clique no botão Add Secret.Acesse o arquivo
lighthouse-ci.yaml
e adicione o novo secret do ambiente ao comando "executar o Lighthouse CI" kubectl.
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+ env:
+ LHCI_GITHUB_APP_TOKEN: $
- A verificação de status está pronta para uso. Para testá-lo, crie um novo pull solicitação ou enviar um commit para uma solicitação de envio.
Configurar o servidor de CI do Lighthouse
O servidor do Lighthouse CI fornece um painel para explorar dados históricos Relatórios do Lighthouse. Ele também pode atuar como um repositório de dados privado e de longo prazo para do Lighthouse.
![Captura de tela do painel do Lighthouse CI Server](https://web.dev/static/articles/lighthouse-ci/image/screenshot-the-lighthous-bf52f6dd2ad0e.png?authuser=5&hl=pt)
![Captura de tela comparando dois relatórios do Lighthouse no Lighthouse CI Server](https://web.dev/static/articles/lighthouse-ci/image/screenshot-comparing-li-a86afa61fb603.png?authuser=5&hl=pt)
- Escolha quais commits serão comparados.
- O valor que a pontuação do Lighthouse mudou entre as duas commits.
- Esta seção mostra apenas as métricas que foram alteradas entre as duas commits.
- As regressões estão destacadas em rosa.
- As melhorias estão destacadas em azul.
O Lighthouse CI Server é mais adequado para usuários que se sentem confortáveis em implantar e gerenciar uma infraestrutura própria.
Para informações sobre como configurar o servidor do Lighthouse CI, incluindo receitas para usando Heroku e Docker para implantação, consulte esses instruções.