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

Milica Mihajlija

Depois de definir um orçamento de desempenho, é hora de configurar o processo de build para acompanhá-lo. Há diversas ferramentas que permitem definir limites das métricas de performance escolhidas e avisar se você ultrapassar o orçamento. Descubra como escolher a mais adequada às suas necessidades e à configuração atual. 🕵️‍♀️

Orçamentos de performance 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 da linha de comando do Lighthouse (v5+) é compatível com a definição de orçamentos de desempenho com base nos seguintes fatores:

• 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. Após serem definidos, o novo valor "Superior" aparece informa se você está excedendo algum limite.

"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. Também é possível definir orçamentos de performance com base no tamanho do recurso.

Ative as dicas de desempenho em webpack.config.js para receber avisos ou erros na 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. Qualquer valor acima do orçamento é destacado em amarelo.

O bundle.js destacado é maior do que seu orçamento

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

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.

Observação : os tamanhos de recursos compactados afetam o tempo de transferência, que é muito importante em redes lentas.

.

Recurso extra: o webpack não só avisa você, como também dá recomendações sobre como reduzir seus pacotes. 💁

.

Tamanho do pacote

Bundlesize é um pacote npm simples que testa o tamanho do recurso em relação a um limite definido por você. Ele pode ser executado localmente e se integrar à 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 testes codificados por cores em uma linha.

Reprovação no teste da CLI de tamanho de pacote ❌

Aprovação no teste da CLI bundlesize ✔️

Tamanho do pacote para CI

Você vai aproveitar ao máximo o tamanho do pacote se integrá-lo a uma CI para aplicar automaticamente limites de tamanho às solicitações de envio. Se o teste de tamanho de pacote falhar, a solicitação de envio não será mesclada. Ela funciona para solicitações de envio no GitHub com Travis CI, CircleCI, Wercker e Drone.

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

Talvez você tenha um app rápido hoje, mas adicionar novos códigos muitas vezes pode alterar isso. Verificar solicitações de envio com bundlesize ajuda a evitar regressões de desempenho. O Bootstrap, o Tinder, o Trivago e muitos outros usam para manter os orçamentos sob controle.

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

Por padrão, testa tamanhos de recursos compactados em gzip. Você pode usar a opção de compactação para mudar para a compressão brotli ou desativá-la completamente.

Bot do Lighthouse

O Lighthouse Bot integra-se 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 farol 👋

O Lighthouse Bot faz uma auditoria depois que você implanta um site no servidor de preparo. Em .travis.yml, defina orçamentos para categorias específicas do Lighthouse com as opções --perf, --a11y, --bp, --seo ou --pwa. Tente permanecer 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 envio no GitHub ficarem abaixo do limite definido, o bot do Lighthouse pode impedir a mesclagem da solicitação de envio. ⛔

Status de verificação do bot do Lighthouse 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 o código muda.

O Lighthouse relata pontuações na solicitação de envio 💬

Se você achar que sua solicitação de envio está bloqueada por uma pontuação baixa do Lighthouse, faça uma auditoria com a CLI do Lighthouse ou nas Ferramentas de 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 em seu tamanho ou contagem.
webpack	✔️	❌	Orçamentos com base nos tamanhos dos recursos gerados pelo webpack. Verifica tamanhos não compactados.
tamanho do pacote	✔️	✔️	Orçamentos baseados no tamanho de recursos específicos. Verifica tamanhos compactados ou não.
Bot do Lighthouse	❌	✔️	Orçamentos baseados nas pontuações do Lighthouse.