Não existe um "tamanho perfeito" único de página web, mas manter o peso total abaixo de 1 MB (idealmente 500 KB) garante carregamentos rápidos em diversos dispositivos e conexões. Aqui está um detalhamento abrangente de metas e técnicas.
Metas de Tamanho por Tipo de Página
| Tipo de Página | Excelente | Bom | Precisa Melhorar |
|---|
| Landing/Marketing | <300 KB | 300-600 KB | >1 MB |
| Blog/Artigo | <200 KB | 200-500 KB | >800 KB |
| E-commerce Produto | <500 KB | 500 KB-1 MB | >2 MB |
| Web App/Dashboard | <400 KB | 400-800 KB | >1.5 MB |
Detalhamento do Peso Típico da Página
- Imagens: 50-70% (otimize primeiro!)
- JavaScript: 15-25%
- CSS: 5-10%
- Fontes: 5-15%
- HTML: <5%
- Vídeo/Outros: Variável
Estratégias de Otimização
1. Otimização de Imagens (Maior Impacto)
- Formato: WebP/AVIF > JPEG > PNG (para fotos); SVG para ícones/logos
- Compressão: 75-85% qualidade para JPEG/WebP; lossless para PNG
- Imagens responsivas:
<picture> + srcset para tamanhos adequados ao dispositivo
- Lazy loading:
loading="lazy" para imagens abaixo da dobra
- Dimensões: Sirva tamanho exato de exibição — sem redimensionamento via CSS
2. Minificação e Compressão de Código
- Minifique: Remova espaços, comentários, código não usado (HTML, CSS, JS)
- Gzip/Brotli: Ative compressão no servidor (redução de 70-90%)
- Tree shaking: Remova módulos JS não usados (Webpack, Vite, Rollup)
- Code splitting: Carregue apenas JS necessário por rota/página
3. Estratégia de Cache
- Assets estáticos:
Cache-Control: max-age=31536000, immutable (1 ano)
- HTML:
max-age=0, must-revalidate ou cache curto
- Nomes de arquivo versionados:
app.v2.3.1.js para cache busting
- Service Workers: Cache offline para PWAs
4. Otimização de Fontes
- Subconjunto de fontes: Inclua apenas glifos necessários (Latim, Cirílico, etc.)
- WOFF2 apenas: Melhor compressão; descarte TTF/EOT/WOFF
- Pré-carregue fontes-chave:
<link rel="preload" as="font" crossorigin>
- font-display: swap: Evita texto invisível durante carregamento
- Fontes variáveis: Arquivo único para múltiplos pesos
5. Scripts de Terceiros
- Audite todo script: analytics, chat, anúncios, widgets sociais
- Carregue assincronamente:
async ou defer
- Considere auto-hospedar scripts críticos
- Use
preconnect/dns-prefetch para domínios externos
6. CDN e Entrega
- Sirva assets estáticos de CDN (Cloudflare, CloudFront, Bunny)
- Ative HTTP/2 ou HTTP/3 (QUIC)
- Edge caching para conteúdo dinâmico quando possível
Ferramentas de Teste
- Google PageSpeed Insights — Core Web Vitals + oportunidades
- WebPageTest — Waterfall detalhado, filmstrip, localidades globais
- GTmetrix — Rastreamento histórico, scores Lighthouse
- Lighthouse CI — Automatizado em pipeline CI/CD
Métricas-Chave para Monitorar
- LCP (Largest Contentful Paint): <2.5s
- CLS (Cumulative Layout Shift): <0.1
- FID/INP (Interatividade): <200ms
- TTFB (Time to First Byte): <600ms
- Total Blocking Time: <200ms
Lembre-se: Desempenho percebido importa mais que bytes brutos. Priorize caminho de renderização crítico, adie não-essenciais, e teste em dispositivos reais (especialmente Android intermediário em 3G/4G).
