Esta página foi traduzida pela API Cloud Translation.

Monitoramento de desempenho com o Lighthouse CI

Como adicionar o Lighthouse a um sistema de integração contínua, como o GitHub Actions.

Katie Hempenius

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 ou startServerCommand propriedades.

Caso seu site seja estático, adicione a propriedade staticDistDir ao ci.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 propriedade startServerCommand ao Objeto ci.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 objeto ci.collect para indicar os URLs que o Lighthouse CI deve executar o Lighthouse. O valor da propriedade url 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']
}
```
Observação :esses URLs devem ser veiculados pelo servidor que você configurou na etapa anterior. Assim, se você executar o Lighthouse CI localmente, esses URLs devem provavelmente vai incluir localhost em vez do host de produção.
Adicione o método target como o objeto ci.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 ou lighthouserc.js. Por exemplo, a configuração lighthouserc.js abaixo indica que cinco execuções do Lighthouse precisam ser coletadas sempre que autorun é executado.

Atualize lighthouserc.js para usar a propriedade numberOfRuns:

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 stderr
error: 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

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

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 chamado lighthouse-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 .

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

Captura de tela comparando dois relatórios do Lighthouse no Lighthouse CI Server

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.

Saiba mais

Repositório do GitHub para CI do Lighthouse