Orçamento de Desempenho Web: Métricas, Limites e Integração CI/CD

O que é Orçamento de Desempenho?

Orçamento de desempenho são os valores máximos definidos para as métricas de desempenho da página web. Tamanho da página, tamanho do bundle JavaScript, tempo de LCP, etc.

Propósito: Prevenir regressões de desempenho. Prevenir a degradação do desempenho ao adicionar novas funcionalidades.

Excesso de orçamento: Falha de build ou aviso. Verificação de desempenho no pipeline de CI/CD.

Orçamentos de exemplo: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, tamanho total da página < 1MB.

Métricas de Desempenho

Tamanho do bundle: Tamanhos de arquivo de JavaScript e CSS. Analise com webpack bundle analyzer.

LCP (Largest Contentful Paint): Tempo de carregamento do elemento de conteúdo mais grande. Alvo < 2.5s.

CLS (Cumulative Layout Shift): Deslocamentos no layout da página. Alvo < 0.1.

INP (Interaction to Next Paint): Tempo de resposta à interação do usuário. Alvo < 200ms.

TTFB (Time to First Byte): Tempo de resposta do servidor. Alvo < 600ms.

Peso total da página: Tamanho total da página. Alvo < 1-2MB (para mobile).

Criação do Orçamento

Meça o desempenho atual: Crie a linha de base com Lighthouse, WebPageTest.

Defina objetivos: Com base na análise de concorrentes e nas expectativas do usuário. Orçamento mais rigoroso para mobile.

Arquivo de orçamento: Defina métricas e limites com performance-budget.json.

Ajuste gradual: Comece com um orçamento próximo ao desempenho atual. Ajuste gradualmente.

Adoção da equipe: Toda a equipe deve adotar o orçamento de desempenho. Desempenho é responsabilidade de todos.

Integração CI/CD

Lighthouse CI: Auditoria de Lighthouse em cada PR. Verificação do limite de pontuação de desempenho. Falha de build se o orçamento for excedido.

WebPageTest: Integração do WebPageTest no pipeline de CI/CD. Comparação de filmstrip e waterfall.

Verificação de tamanho de bundle: Verificação do tamanho do bundle com webpack-bundle-analyzer ou bundlesize.

GitHub Actions: Teste de desempenho automático com a ação do Lighthouse CI. Relatório de resultados como comentário de PR.

Configuração de limite: Níveis de aviso e erro. Aviso: 90% do orçamento. Erro: 100% do orçamento.

Monitoramento e Relatórios

RUM (Real User Monitoring): Dados de desempenho de usuários reais. CrUX, Datadog, New Relic.

Synthetic monitoring: Testes de desempenho periódicos. WebPageTest, Pingdom, GTmetrix.

Dashboard: Visualize as tendências de desempenho. Dashboard de Grafana, Datadog.

Alerting: Alerta quando o orçamento é excedido. Notificação de Slack, email.

Relatórios: Relatório de desempenho semanal/mensal. Análise de tendências e recomendações de melhoria.

Melhores Práticas

Performance champion: Atribua a responsabilidade de desempenho na equipe. Dissemine a cultura de desempenho.

Revisão do orçamento: Revise o orçamento no final de cada sprint. Ajuste o orçamento para novas funcionalidades.

Trade-off: Nova funcionalidade vs desempenho. Cada funcionalidade traz um custo de desempenho. Tome uma decisão consciente.

Documentação: Documente o orçamento de desempenho e a justificativa. Para o onboarding da equipe.

Melhoria contínua: Ajuste gradualmente o orçamento de desempenho. Objetivo de melhoria de 10%.