Incorporar orçamentos de performance no processo de criação

Depois de definir um orçamento de performance, é hora de configurar o processo de build para acompanhar. Há várias ferramentas que permitem definir limites para as métricas de performance escolhidas e receber um aviso se você ultrapassar o orçamento. Descubra como escolher a que melhor se adapta às suas necessidades e à configuração atual. 🕵️‍♀️

Orçamentos de desempenho do Lighthouse

O Lighthouse é uma ferramenta de auditoria que testa sites em algumas áreas importantes: desempenho, acessibilidade, práticas recomendadas e o desempenho do seu site como Progressive Web App.

A versão de linha de comando do Lighthouse (v5+) oferece suporte à definição de orçamentos de performance com base em:

  • tamanho do recurso
  • contagem de recursos

É possível definir orçamentos para qualquer um dos seguintes tipos de recursos:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

Os orçamentos são definidos em um arquivo JSON e, depois de definidos, a nova coluna "Excede o orçamento" informa se você está excedendo os limites.

Seção "Orçamentos" no relatório do Lighthouse
"Orçamentos" no relatório do Lighthouse

Dicas de desempenho do Webpack

O Webpack é uma ferramenta de build avançada para otimizar a forma como o código é entregue aos usuários. Ele também oferece suporte para definir orçamentos de desempenho com base no tamanho do recurso.

Ative as dicas de performance no webpack.config.js para receber avisos ou erros de linha de comando quando o tamanho do pacote ultrapassar o limite. Essa é uma ótima maneira de ficar atento aos tamanhos dos recursos durante o desenvolvimento.

Após a etapa de build, o webpack gera uma lista codificada por cores com recursos e tamanhos. Tudo que ultrapassar o orçamento é destacado em amarelo.

Saída do Webpack destacando bundle.js
O bundle.js destacado é maior do que seu orçamento

O limite padrão para recursos e pontos de entrada é de 250 KB. É possível definir seus próprios destinos no arquivo de configuração.

Aviso de tamanho do pacote do Webpack
Aviso sobre o tamanho do pacote do Webpack ⚠️

Os orçamentos são comparados com tamanhos de recursos não compactados. O tamanho do JavaScript não compactado está relacionado ao tempo de execução, e arquivos grandes podem levar muito tempo para serem executados, especialmente em dispositivos móveis.

Recomendação de otimização de desempenho do Webpack
Recurso extra: o Webpack não apenas alerta você, mas também dá uma recomendação sobre como reduzir o tamanho dos seus pacotes. 💁

Tamanho do pacote

Bundlesize é um pacote npm simples que testa o tamanho do recurso em relação a um limite definido. Ele pode ser executado localmente e integrado à CI.

CLI Bundlesize

Execute a CLI do bundlesize especificando um limite e o arquivo que você quer testar.

bundlesize -f "dist/bundle.js" -s 170kB

O Bundlesize gera resultados de teste codificados por cores em uma linha.

Falha no teste da CLI de bundlesize
Falha no teste da CLI de tamanho de pacote ❌
Como passar no teste da CLI do bundlesize
Aprovação no teste de CLI de bundlesize ✔️

Tamanho do pacote para CI

Você vai aproveitar ao máximo o bundlesize se o integrar a uma CI para aplicar automaticamente os limites de tamanho nos pedidos de pull. Se o teste de tamanho de pacote falhar, a solicitação de pull não será mesclada. Ele funciona para solicitações de pull no GitHub com o Travis CI, o CircleCI, o Wercker e o Drone.

Status da verificação do tamanho de pacote no GitHub
Status da verificação do Bundlesize no GitHub

Talvez você tenha um app rápido hoje, mas a adição de um novo código pode mudar isso. A verificação de solicitações de pull com o bundlesize ajuda a evitar regressões de desempenho. O Bootstrap, o Tinder, o Trivago e muitos outros usam esse recurso para manter os orçamentos sob controle.

Com o bundlesize, é possível definir limites para cada arquivo separadamente. Isso é útil principalmente se você estiver dividindo um pacote no seu app.

Por padrão, ele testa os tamanhos de recursos compactados com GZIP. Você pode usar a opção de compactação para mudar para a compactação Brotli ou desativá-la completamente.

Bot do farol

Bot do farol

O Lighthouse Bot se integra ao Travis CI e aplica orçamentos com base em qualquer uma das cinco categorias de auditoria do Lighthouse. Por exemplo, um orçamento de 100 para sua pontuação de desempenho do Lighthouse. Às vezes, é mais simples acompanhar um único número do que os orçamentos de recursos individuais, e as pontuações do Lighthouse consideram muitos fatores.

Pontuações do Lighthouse 💯
Pontuações do Lighthouse 💯

O Lighthouse Bot executa uma auditoria depois que você implanta um site no servidor de pré-produção. Em .travis.yml, defina orçamentos para categorias específicas do Lighthouse com as opções --perf, --a11y, --bp, --seo ou --pwa. Tente ficar na zona verde com pontuações de pelo menos 90.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Se as pontuações de uma solicitação de pull no GitHub ficarem abaixo do limite definido, o Bot do Lighthouse pode impedir a mesclagem da solicitação de pull. ⛔

Status de verificação do bot do Lighthouse no GitHub
Status da verificação do Lighthouse Bot no GitHub

Em seguida, o bot do Lighthouse comenta sua solicitação de envio com pontuações atualizadas. Esse é um recurso interessante que incentiva a conversa sobre desempenho à medida que as mudanças de código acontecem.

Pontuações de relatórios do Lighthouse na solicitação de envio
O Lighthouse relata pontuações na solicitação de envio 💬

Se você descobrir que sua solicitação de pull foi bloqueada por uma pontuação baixa do Lighthouse, execute uma auditoria com a CLI do Lighthouse ou nas Ferramentas do desenvolvedor. Ele gera um relatório com detalhes sobre gargalos e dicas para otimizações simples.

Resumo

Ferramenta CLI CI Resumo
Farol ✔️
  • Orçamentos para diferentes tipos de recursos com base no tamanho ou na contagem.
webpack ✔️
  • Orçamentos com base nos tamanhos dos recursos gerados pelo webpack.
  • Verifica os tamanhos descompactados.
tamanho do pacote ✔️ ✔️
  • Orçamentos com base no tamanho de recursos específicos.
  • Verifica tamanhos compactados ou descompactados.
Bot do farol ✔️
  • Orçamentos baseados nas pontuações do Lighthouse.