169 lines
7.6 KiB
Markdown
169 lines
7.6 KiB
Markdown
## 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
|