Introdução à Performance Web

Por que Performance Importa?

Performance web é crucial porque:

• Experiência do usuário: Sites rápidos são mais agradáveis de usar
• Conversão: Cada segundo de atraso pode reduzir conversões
• SEO: Google considera velocidade como fator de ranking
• Acessibilidade: Sites rápidos funcionam melhor em conexões lentas
• Custos: Menos recursos = menos custos de servidor e banda

Métricas Principais

Core Web Vitals

Métricas essenciais do Google:

1. Largest Contentful Paint (LCP)

Tempo até o maior elemento de conteúdo ser renderizado.

• Bom: ≤ 2.5 segundos
• Precisa melhorar: 2.5 - 4.0 segundos
• Ruim: > 4.0 segundos

2. First Input Delay (FID)

Tempo entre interação do usuário e resposta do navegador.

• Bom: ≤ 100 milissegundos
• Precisa melhorar: 100 - 300 milissegundos
• Ruim: > 300 milissegundos

3. Cumulative Layout Shift (CLS)

Medida de estabilidade visual durante carregamento.

• Bom: ≤ 0.1
• Precisa melhorar: 0.1 - 0.25
• Ruim: > 0.25

Outras Métricas Importantes

• Time to First Byte (TTFB): Tempo até primeiro byte do servidor
• First Contentful Paint (FCP): Primeiro conteúdo visível
• Time to Interactive (TTI): Quando a página fica interativa
• Total Blocking Time (TBT): Tempo bloqueado por JavaScript

Fatores que Afetam Performance

1. Tamanho de Arquivos

• Imagens: Maior impacto visual
• JavaScript: Pode bloquear renderização
• CSS: Bloqueia renderização se não otimizado
• Fontes: Podem causar FOIT/FOUT

2. Requisições de Rede

• Número de requisições: Mais requisições = mais latência
• Latência de rede: Distância até servidor
• Protocolo: HTTP/2 e HTTP/3 são mais rápidos
• CDN: Reduz latência geográfica

3. Renderização

• CSS bloqueante: CSS crítico inline
• JavaScript bloqueante: Scripts que bloqueiam parsing
• Layout shifts: Mudanças de layout durante carregamento
• Repaints e reflows: Operações custosas do navegador

4. Processamento

• JavaScript pesado: Cálculos complexos
• Animações: Animações não otimizadas
• Parsing: HTML/CSS/JS grandes demais

Estratégias de Otimização

1. Otimização de Imagens

• Comprimir imagens
• Usar formatos modernos (WebP, AVIF)
• Lazy loading
• Responsive images

2. Minificação e Compressão

• Minificar CSS, JS e HTML
• Gzip/Brotli compression
• Tree shaking
• Code splitting

3. Caching

• Browser caching
• Service Workers
• CDN caching
• HTTP caching headers

4. Carregamento Otimizado

• Lazy loading
• Preload/Prefetch
• Code splitting
• Async/Defer scripts

5. Otimização de Servidor

• TTFB baixo
• HTTP/2 ou HTTP/3
• CDN
• Compressão no servidor

Ferramentas de Medição

Ferramentas do Navegador

• Chrome DevTools: Performance tab, Lighthouse
• Firefox DevTools: Performance profiler
• Safari Web Inspector: Timeline

Ferramentas Online

• PageSpeed Insights: Análise do Google
• WebPageTest: Testes detalhados
• GTmetrix: Análise completa
• Lighthouse CI: Integração contínua

APIs de Performance

• Performance API: Métricas programáticas
• Web Vitals: Biblioteca para Core Web Vitals
• Resource Timing: Tempo de recursos
• Navigation Timing: Tempo de navegação

Boas Práticas Gerais

1. Medir primeiro: Use ferramentas para identificar problemas
2. Otimizar o crítico: Foque no que mais impacta
3. Testar regularmente: Performance muda com o tempo
4. Monitorar em produção: Métricas reais de usuários
5. Otimizar progressivamente: Melhorias incrementais

Próximos Passos

• Otimização de Imagens: Reduza tamanho de imagens
• JavaScript Otimizado: Carregue JS de forma eficiente
• CSS Performance: Otimize CSS
• Caching e CDN: Use cache efetivamente
• Métricas e Monitoramento: Meça e monitore performance