Orçamento de peso de imagens no CI: mantendo o controle em 2025
Defina e faça cumprir budgets de tamanho e variantes de imagens direto no CI/CD para evitar regressões de performance.
Problema
O peso acumulado das imagens cresce silenciosamente, degradando LCP e elevando custos de CDN quando não é monitorado de forma contínua e automática.
1. Definição de budgets
Tipos:
- Tamanho máximo por categoria (hero, thumbnail, ícone)
- Limite total em KB por página crítica
- Número máximo de variantes por recurso
- Taxa mínima de compressão (original vs otimizada)
2. Métricas rastreadas no CI
| Métrica | Fonte | Ferramenta |
|---|---|---|
| Peso hero p95 | Artefatos de build | Script interno |
| Total de bytes das imagens da home | Static export | Análise de sitemap |
| Variantes por imagem | Pipeline gerador | Script auditor |
| % de economia vs original | Metadados do encode | Registro de encode |
3. Fluxo sugerido no CI
- Gerar/otimizar imagens
- Extrair metadados (bytes antes/depois, formato, qualidade)
- Comparar com thresholds versionados (JSON)
- Falhar o job se exceder (com diff legível)
- Registrar histórico em artefato para detectar regressões
4. Onde guardar os thresholds
Arquivo versionado image-budgets.json (exemplo em construção) com categorias e limites; alterações passam por revisão consciente em PR.
5. Estratégias de enforcement
| Estratégia | Vantagem | Risco |
|---|---|---|
| Hard fail | Impede regressão silenciosa | Pode travar pipeline por falso positivo |
| Warning + tracking | Menos fricção | Deixa dívida acumular |
| Degradação progressiva | Ajusta conforme tendência | Maior complexidade operacional |
6. Integração com Web Vitals
Correlacione a evolução real de LCP/INP (RUM) com variações no peso agregado; ajuste budgets dinamicamente conforme impacto percebido.
7. Comunicação para o time
Dashboard semanal mostrando: maiores infratores, % de uso do orçamento, tendência das últimas 4 semanas.
8. Próximos passos antes da publicação
- Criar exemplo real de JSON de budgets
- Adicionar snippet em Node para validar diffs
- Incluir captura de dashboard (futuro)
Conclusão
Sem budgets explícitos o crescimento é inevitável. Automatizar a verificação no CI mantém a disciplina de performance sem depender de checagens manuais constantes.