Initial commit
This commit is contained in:
Zhongwei Li
168
commands/analyze-performance.md
Normal file
168
commands/analyze-performance.md
Normal file
@@ -0,0 +1,168 @@
|
||||
## Analyze Performance
|
||||
|
||||
Analisa o desempenho da aplicação sob a perspectiva da experiência do usuário e quantifica as melhorias de velocidade percebida através de otimizações. Calcula pontuações UX baseadas em Core Web Vitals e propõe estratégias de otimização priorizadas.
|
||||
|
||||
### Pontuação de Performance UX
|
||||
|
||||
```text
|
||||
Pontuação de Experiência do Usuário: B+ (78/100)
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
⏱️ Core Web Vitals
|
||||
├─ LCP (carregamento): 2.3s [Bom] Meta<2.5s ✅
|
||||
├─ FID (resposta): 95ms [Bom] Meta<100ms ✅
|
||||
├─ CLS (estabilidade): 0.08 [Bom] Meta<0.1 ✅
|
||||
├─ FCP (primeiro desenho): 1.8s [Bom] Meta<1.8s ✅
|
||||
├─ TTFB (servidor): 450ms [Precisa melhorar] Meta<200ms ⚠️
|
||||
└─ TTI (interativo): 3.5s [Precisa melhorar] Meta<3.8s ⚠️
|
||||
|
||||
📊 Velocidade Percebida pelo Usuário
|
||||
├─ Exibição inicial: 2.3s [Média da indústria: 3.0s]
|
||||
├─ Transição de página: 1.1s [Média da indústria: 1.5s]
|
||||
├─ Exibição resultados busca: 0.8s [Média da indústria: 1.2s]
|
||||
├─ Envio de formulário: 1.5s [Média da indústria: 2.0s]
|
||||
└─ Carregamento de imagens: lazy loading implementado ✅
|
||||
|
||||
😊 Previsão de Satisfação do Usuário
|
||||
├─ Previsão taxa de rejeição: 12% (média da indústria: 20%)
|
||||
├─ Previsão taxa de conclusão: 78% (objetivo: 85%)
|
||||
├─ NPS recomendado: +24 (média da indústria: +15)
|
||||
└─ Taxa de retorno: 65% (objetivo: 70%)
|
||||
|
||||
📊 Impacto na Experiência do Usuário
|
||||
├─ Acelerar exibição 0.5s → taxa rejeição -7%
|
||||
├─ Reduzir taxa rejeição 5% → duração sessão +15%
|
||||
├─ Melhorar busca → tempo permanência +15%
|
||||
└─ Melhoria UX geral: +25%
|
||||
|
||||
🎯 Efeitos Esperados de Melhoria (ordem de prioridade)
|
||||
├─ [P0] Melhoria TTFB (introduzir CDN) → LCP -0.3s = velocidade percebida +15%
|
||||
├─ [P1] Otimização bundle JS → TTI -0.8s = tempo interativo -20%
|
||||
├─ [P2] Otimização imagens (WebP) → volume transferência -40% = tempo carregamento -25%
|
||||
└─ [P3] Estratégia cache → 50% mais rápido em visitas repetidas
|
||||
```
|
||||
|
||||
### Uso
|
||||
|
||||
```bash
|
||||
# Análise integral da pontuação UX
|
||||
find . -name "*.js" -o -name "*.ts" | xargs wc -l | sort -rn | head -10
|
||||
「Calcular pontuação de performance UX e avaliar Core Web Vitals」
|
||||
|
||||
# Detecção de gargalos de performance
|
||||
grep -r "for.*await\|forEach.*await" . --include="*.js"
|
||||
「Detectar gargalos de processamento assíncrono e analisar impacto na experiência do usuário」
|
||||
|
||||
# Análise de impacto na experiência do usuário
|
||||
grep -r "addEventListener\|setInterval" . --include="*.js" | grep -v "removeEventListener\|clearInterval"
|
||||
「Analisar o impacto de problemas de performance na experiência do usuário」
|
||||
```
|
||||
|
||||
### Exemplos Básicos
|
||||
|
||||
```bash
|
||||
# Tamanho de bundle e tempo de carregamento
|
||||
npm ls --depth=0 && find ./public -name "*.js" -o -name "*.css" | xargs ls -lh
|
||||
"Identificar pontos de melhoria no tamanho do bundle e otimização de assets"
|
||||
|
||||
# Performance de banco de dados
|
||||
grep -r "SELECT\|findAll\|query" . --include="*.js" | head -20
|
||||
"Analisar pontos de otimização de consultas de banco de dados"
|
||||
|
||||
# Impacto de performance das dependências
|
||||
npm outdated && npm audit
|
||||
"Avaliar o impacto de dependências desatualizadas no desempenho"
|
||||
```
|
||||
|
||||
### Perspectivas de Análise
|
||||
|
||||
#### 1. Problemas no Nível de Código
|
||||
|
||||
- **Algoritmos O(n²)**: Detecção de operações de array ineficientes
|
||||
- **I/O síncrono**: Identificação de processos bloqueantes
|
||||
- **Processamento duplicado**: Remoção de cálculos e requests desnecessários
|
||||
- **Vazamentos de memória**: Gestão de event listeners e timers
|
||||
|
||||
#### 2. Problemas no Nível de Arquitetura
|
||||
|
||||
- **Consultas N+1**: Padrões de acesso ao banco de dados
|
||||
- **Falta de cache**: Cálculos repetidos e chamadas API
|
||||
- **Tamanho de bundle**: Bibliotecas desnecessárias e divisão de código
|
||||
- **Gestão de recursos**: Uso de connection pools e threads
|
||||
|
||||
#### 3. Impacto da Dívida Técnica
|
||||
|
||||
- **Código legacy**: Degradação de performance por implementações antigas
|
||||
- **Problemas de design**: Alto acoplamento por falta de distribuição de responsabilidades
|
||||
- **Falta de testes**: Falta de detecção de regressões de performance
|
||||
- **Falta de monitoramento**: Sistema de detecção precoce de problemas
|
||||
|
||||
### Matriz ROI de Melhoria de Performance
|
||||
|
||||
```text
|
||||
ROI de melhoria = (efeito redução tempo + melhoria qualidade) ÷ horas implementação
|
||||
```
|
||||
|
||||
| Prioridade | Melhoria Experiência Usuário | Dificuldade Implementação | Efeito Redução Tempo | Exemplo Concreto | Horas | Efeito |
|
||||
| ----------------------------------- | ---------------------------- | ------------------------- | -------------------- | ------------------- | ----- | ----------------- |
|
||||
| **[P0] Implementar imediatamente** | Alta | Baixa | > 50% | Introduzir CDN | 8h | Resposta -60% |
|
||||
| **[P1] Implementar em breve** | Alta | Média | 20-50% | Otimizar imagens | 16h | Carregamento -30% |
|
||||
| **[P2] Implementar planejadamente** | Baixa | Alta | 10-20% | Divisão código | 40h | Inicial -15% |
|
||||
| **[P3] Reter/observar** | Baixa | Baixa | < 10% | Otimizações menores | 20h | Parcial -5% |
|
||||
|
||||
#### Critérios de Determinação de Prioridade
|
||||
|
||||
- **P0 (implementar imediatamente)**: Melhoria UX "Alta" × Dificuldade "Baixa" = ROI máximo
|
||||
- **P1 (implementar em breve)**: Melhoria UX "Alta" × Dificuldade "Média" = ROI alto
|
||||
- **P2 (planejadamente)**: Melhoria UX "Baixa" × Dificuldade "Alta" = ROI médio
|
||||
- **P3 (reter)**: Melhoria UX "Baixa" × Dificuldade "Baixa" = ROI baixo
|
||||
|
||||
### Correlação entre Métricas de Performance e Melhoria UX
|
||||
|
||||
| Métrica | Faixa Melhoria | Melhoria Velocidade Percebida | Satisfação Usuário | Horas Implementação |
|
||||
| ---------------------- | -------------- | ----------------------------- | ------------------------- | ------------------- |
|
||||
| **LCP (carregamento)** | -0.5s | +30% | Taxa rejeição -7% | 16h |
|
||||
| **FID (resposta)** | -50ms | +15% | Estresse -20% | 8h |
|
||||
| **CLS (estabilidade)** | -0.05 | +10% | Operação errônea -50% | 4h |
|
||||
| **TTFB (servidor)** | -200ms | +25% | Velocidade percebida +40% | 24h |
|
||||
| **TTI (interativo)** | -1.0s | +35% | Taxa conclusão +15% | 32h |
|
||||
| **Tamanho bundle** | -30% | +20% | Primeira visita +25% | 16h |
|
||||
|
||||
### Medição e Ferramentas
|
||||
|
||||
#### Node.js / JavaScript
|
||||
|
||||
```bash
|
||||
# Profiling
|
||||
node --prof app.js
|
||||
clinic doctor -- node app.js
|
||||
|
||||
# Análise de bundle
|
||||
npx webpack-bundle-analyzer
|
||||
lighthouse --chrome-flags="--headless"
|
||||
```
|
||||
|
||||
#### Banco de Dados
|
||||
|
||||
```sql
|
||||
-- Análise de consultas
|
||||
EXPLAIN ANALYZE SELECT ...
|
||||
SHOW SLOW LOG;
|
||||
```
|
||||
|
||||
#### Frontend
|
||||
|
||||
```bash
|
||||
# Performance React
|
||||
grep -r "useMemo\|useCallback" . --include="*.jsx"
|
||||
|
||||
# Análise de recursos
|
||||
find ./src -name "*.png" -o -name "*.jpg" | xargs ls -lh
|
||||
```
|
||||
|
||||
### Melhoria Contínua
|
||||
|
||||
- **Auditoria regular**: Execução de testes de performance semanais
|
||||
- **Coleta de métricas**: Rastreamento de tempo de resposta e uso de memória
|
||||
- **Configuração de alertas**: Notificação automática quando limites são excedidos
|
||||
- **Compartilhamento com equipe**: Documentação de casos de melhoria e antipadrões
|
||||
Reference in New Issue
Block a user