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.

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 limite padrão para recursos e pontos de entrada é de 250 KB. Defina seus próprios destinos no arquivo de configuração.

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.

.

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.

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.

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.

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. ⛔

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.

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