Desempenho

Guia de Desempenho

Princípios Chave

• Construa para performance desde o início
• Meça métricas centradas no usuário (LCP, FID, CLS)
• Monitore continuamente e otimize regularmente

Ferramentas Essenciais

• web-vitals, lighthouse, bundlesize, webpack-bundle-analyzer
• @perfume/react, @sentry/react, datadog-browser-rum

Métricas e Metas Principais

Métrica	Meta
LCP	< 2.5s
FID	< 100ms
CLS	< 0.1
Bundle	< 250KB

Como Monitorar

• Use web-vitals para rastrear LCP, FID, CLS em sua aplicação
• Execute npm run analyze:bundle para o tamanho do bundle
• Execute npm run test:performance para benchmarks de componentes
• Use o Lighthouse para auditorias: npm run audit:lighthouse

Exemplo: Rastrear Web Vitals

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

Dicas de Otimização

• Use divisão de código (code splitting) e carregamento preguiçoso (lazy loading) para componentes grandes
• Analise e reduza o tamanho do bundle
• Monitore os tempos de renderização e o uso de memória

Verificações de CI/CD

• Adicione verificações de tamanho do bundle e do Lighthouse em seu pipeline

Comandos Rápidos

• npm run analyze:bundle - Análise do bundle
• npm run test:performance - Testes de performance
• npm run audit:lighthouse - Auditoria do Lighthouse

---

Mantenha seus componentes rápidos, pequenos e focados no usuário para obter os melhores resultados.