Orçamento de Performance
Ferramenta gratuita online de acompanhamento de orcamento de desempenho
O que é um orçamento de desempenho?
Um orçamento de desempenho define limites para o tamanho e tempo de recursos web (bundles JavaScript, imagens, fontes, CSS). Rastrear esses orçamentos ajuda a prevenir regressão de desempenho conforme o projeto cresce. Orçamentos comuns incluem peso total da página abaixo de 1MB e JavaScript abaixo de 200KB.
Como rastrear orçamentos de recursos
Adicione recursos com seus tamanhos reais e defina limites de orçamento. A ferramenta rastreia o tamanho total e sinaliza quaisquer recursos que excedem seus orçamentos. Use isso durante o desenvolvimento para capturar problemas de desempenho cedo.
▶O que é um bom orçamento de desempenho?
Recomendações comuns: Peso total da página < 1MB, JavaScript < 200KB (comprimido), CSS < 50KB, Imagens < 500KB, Time to Interactive < 5 segundos em 3G.
▶Como medir os tamanhos reais dos recursos?
Use a aba Network do Chrome DevTools para ver tamanhos de transferência. Para aplicações com bundler, use webpack-bundle-analyzer ou ferramentas similares para inspecionar a composição do bundle.