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.
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 limite padrão para recursos e pontos de entrada é de 250 KB. Você pode definir seus próprios destinos no arquivo de configuração.
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.
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.
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).
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.
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). ⛔
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.
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 | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
tamanho do pacote | ✔️ | ✔️ |
|
Bot do Lighthouse | ❌ | ✔️ |
|