Performance de Frontend
Camada: Arquitetura — Padrões e boas práticas técnicas para o time de desenvolvimento. Aplica-se a: Todas as interfaces do CRM (portal web, painéis administrativos).
1. Metas de Performance (Targets)
| Métrica | Meta |
|---|---|
| Peso total da página | < 1.500 KB (idealmente < 500 KB) |
| Tempo de carregamento | < 3 segundos |
| TTFB (Time to First Byte) | < 1,3 segundos |
| Tamanho de fonte web | < 300 KB |
| Tamanho de cookie | < 4.096 bytes |
| Quantidade de cookies | < 20 |
2. Alta Prioridade
JavaScript
- Use
asyncedeferpara scripts não-críticos — nunca bloqueie o parser HTML. - Minifique todos os arquivos JS para produção.
- Evite múltiplos blocos
<script>embutidos no HTML.
CSS
- Minifique e remova comentários e espaços desnecessários.
- Incorpore o CSS crítico (above the fold) diretamente no
<head>. - Arquivos CSS não devem bloquear o carregamento da página.
- Evite CSS inline ou
<style>em elementos — centralize nas folhas de estilo. - Analise a complexidade das folhas de estilo regularmente.
Imagens
- Comprima todas as imagens antes do deploy.
- Escolha o formato adequado: WebP para fotos, SVG para ícones e ilustrações.
- Defina sempre os atributos
widtheheightpara evitar layout shift (CLS). - Evite imagens Base64 embutidas.
- Mantenha a contagem de imagens baixa.
HTTP e Rede
- Habilite compressão GZIP ou Brotli no servidor.
- Configure corretamente os cabeçalhos de cache HTTP (
Cache-Control,ETag). - Use HTTPS obrigatoriamente.
- Sirva todos os arquivos do mesmo protocolo (evite mixed content).
- Minimize o número de requisições HTTP.
- Evite requisições que retornam 404.
3. Prioridade Média
- Minifique o HTML — remova comentários e espaços desnecessários.
- Use CDN para distribuição geográfica de assets.
- Prefira imagens vetoriais (SVG) a bitmaps quando possível.
- Implemente lazy loading para imagens fora da viewport.
- Sirva imagens no tamanho mais próximo ao exibido na tela.
- Use Service Workers para cache offline e execução de tarefas pesadas em background.
- Mantenha dependências atualizadas.
- Monitore o tamanho do bundle JavaScript regularmente.
4. Prioridade Baixa
- Pré-carregue URLs críticas com
<link rel="preload">. - Concatene CSS em um único arquivo quando possível.
- Remova CSS não utilizado (tree shaking de estilos).
- Use o formato de fonte WOFF2.
- Use
preconnectpara carregar fontes externas mais rapidamente. - Evite FOIT/FOUT (Flash of Invisible/Unstyled Text).
- Minimize o uso de
<iframe>. - Monitore o tamanho total das dependências (
bundlephobia).
5. Ferramentas Recomendadas
| Ferramenta | Finalidade | Link |
|---|---|---|
| PageSpeed Insights | Análise de performance web | pagespeed.web.dev |
| Lighthouse | Auditoria completa (performance, acessibilidade, SEO) | Chrome Lighthouse |
| WebPageTest | Teste de carregamento real em diferentes regiões | webpagetest.org |
| Chrome DevTools | Profiling, análise de rede e memória | DevTools |
| bundlephobia | Análise do tamanho de dependências npm | bundlephobia.com |
| Squoosh | Compressão e conversão de imagens | squoosh.app |