Introdução: A Performance Como Requisito, Não Como Opcional
A performance web não é um aspeto para otimizar “quando houver tempo”. Cada milissegundo de atraso no carregamento traduz-se em utilizadores perdidos. Os performance budgets transformam a performance de um objetivo vago numa restrição mensurável e automatizada no pipeline CI/CD.
O Que Você Aprenderá Neste Artigo
- O que são performance budgets e por que são importantes
- Como configurar os budgets no
angular.json - Como instalar e configurar o Lighthouse CI (lhci)
- Como integrar o Lighthouse CI com GitHub Actions
- Como rastrear as pontuações ao longo do tempo
- Como monitorar o tamanho do bundle
- Como fazer o build falhar em caso de regressões
1. O Que São Performance Budgets
Métricas de Performance Budget
| Métrica | Descrição | Budget Recomendado |
|---|---|---|
| Bundle size | Tamanho total dos ficheiros JS e CSS | JS inicial < 300 KB (gzip) |
| LCP | Largest Contentful Paint | < 2,5 segundos |
| FID/INP | Interaction to Next Paint | < 200 ms |
| CLS | Cumulative Layout Shift | < 0,1 |
2. Performance Budgets no angular.json
3. Setup do Lighthouse CI
Diferença entre Error e Warn nas Assertions
As assertions com nível error fazem o build falhar. As de nível warn geram um aviso sem bloquear o pipeline.
4. Integração com GitHub Actions
5. Rastrear Pontuações ao Longo do Tempo
6. Monitoramento do Tamanho do Bundle
7. Comparação com Ferramentas Alternativas
8. Fazer o Build Falhar em Regressões
Estratégia de Implementação Gradual
- Semana 1: Executar Lighthouse CI em modo
warnpara recolher uma baseline - Semana 2: Definir limiares baseados na baseline (média - 5%)
- Semana 3: Passar as métricas críticas (LCP, CLS) para
error - Semana 4: Ativar as branch protection rules para exigir o check do Lighthouse
Conclusão
Construímos um sistema completo de monitoramento de performance no pipeline CI/CD.
No último artigo abordaremos o monitoramento e alertas para aplicações web.