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

Milica Mihajlija

Depois de definir um orçamento de performance, é hora de configurar o processo de build para monitorá-lo. Há várias ferramentas que permitem definir limites para as métricas de desempenho escolhidas e avisar se você ultrapassar o orçamento. Descubra como escolher aquele que melhor atenda às suas necessidades e à sua configuração atual. 🕵️ ♀️

Use os orçamentos de performance do Lighthouse

O Lighthouse é uma ferramenta de auditoria que testa sites em algumas áreas importantes, como 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+) é compatível com a 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 recurso:

• 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 "Acima do orçamento" informa se você está excedendo algum limite.

Seção "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 permite 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 se atentar ao tamanho dos recursos durante todo o desenvolvimento.

Após a etapa de build, o webpack gera uma lista de recursos codificada por cores e os tamanhos deles. 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. Você pode definir seus próprios destinos no arquivo de configuração.

Aviso sobre o tamanho do pacote do Webpack ⚠️

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

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

Recurso bônus: além de alertar você, o Webpack também mostra recomendações sobre como reduzir o tamanho dos 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 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.

Reprovado no teste da CLI de bundlesize ❌

Aprovação no teste da CLI de bundlesize ✔️

Bundlesize para CI

Você aproveitará ao máximo o tamanho do pacote se o integrar a uma CI para aplicar automaticamente os limites de tamanho em solicitações de envio. Se o teste do bundlesize falhar, essa solicitação de envio não será mesclada. Ela funciona para solicitações de envio no GitHub com o Travis CI, CircleCI, Wercker e Drone (links em inglês).

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

Você pode ter um app rápido hoje, mas, muitas vezes, adicionar um novo código pode mudar isso. Verificar as solicitações de envio com o bundlesize ajuda a evitar regressões de desempenho. Bootstrap, Tinder, Trivago e muitos outros usam o serviço para controlar os orçamentos.

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

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

Bot do Lighthouse

O Lighthouse Bot é integrado 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 fácil monitorar um único número do que os orçamentos de recursos individuais e as pontuações do Lighthouse levam muitos fatores em consideração.

Pontuações do Lighthouse 💯

O bot do Lighthouse executa uma auditoria após a implantação de um site no servidor de teste. 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 Lighthouse Bot pode impedir que essa solicitação seja mesclada (em inglês). ⛔

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

Lighthouse Bot: comenta sua solicitação de envio com as pontuações atualizadas. Esse é um recurso interessante que incentiva conversas sobre o desempenho à medida que as mudanças no código acontecem.

Pontuações de relatórios do Lighthouse em solicitações de envio 🛍

Se você achar que sua solicitação de envio está bloqueada por uma pontuação insatisfatória no Lighthouse, faça uma auditoria com a CLI do Lighthouse ou nas Ferramentas para Desenvolvedores. Ele gera um relatório com detalhes sobre gargalos e dicas para otimizações simples.

Resumo

Ferramenta	CLI	CI	Resumo
Farol	✔️	❌	Faz orçamentos para diferentes tipos de recursos com base no tamanho ou número deles.
Webpack	✔️	❌	Orçamentos com base nos tamanhos dos recursos gerados pelo webpack. Verifica tamanhos não compactados.
tamanho do pacote	✔️	✔️	Orçamentos com base nos tamanhos de recursos específicos. Verifica tamanhos compactados ou não compactados.
Bot do Lighthouse	❌	✔️	Orçamentos com base nas pontuações do Lighthouse.