# GreatPages — Otimizações Específicas

**Score máximo realista mobile:** 80-92

---

## Limitações da plataforma

- Builder visual injeta HTML/CSS próprio (não controlável)
- Cada seção/widget = mais DOM nodes
- Sem controle direto do `<head>` (depende do builder)
- Scripts do builder carregam automaticamente

---

## Otimizações obrigatórias

### Imagens (ANTES de fazer upload)
- Converter para WebP usando Squoosh (squoosh.app) ou TinyPNG
- Comprimir: qualidade 75-85% é suficiente
- Redimensionar: nunca uploadar imagem maior que o espaço visual
- Hero image: máximo 150-200KB
- Demais imagens: máximo 80-100KB cada

### Seções e widgets
- Minimizar número de seções — cada seção = mais DOM
- Evitar widgets pesados acima do fold: vídeo embed, Google Maps, carrosséis
- Vídeo: usar thumbnail estática + play on click (não autoplay embed)
- Maps: screenshot estático com link para Google Maps

### Custom CSS (se disponível)
- Purgar classes não utilizadas do builder
- Minificar CSS custom
- Mover animações para desktop only:
```css
@media(min-width:1024px) {
    .animacao { animation: fade 0.5s ease; }
}
```

### Custom JS (se disponível)
- Sempre com `defer`
- Mínimo possível — evitar bibliotecas extras
- Nunca jQuery se o builder já não usa

### Fontes
- Usar fontes do sistema quando possível (zero latência)
- Se usar Google Fonts: máximo 2 famílias, 3 weights
- Preconnect se o builder permitir custom `<head>`

---

## Otimizações no painel GreatPages

1. Ativar lazy load de imagens (se disponível nas settings)
2. Ativar compressão de imagens (se disponível)
3. Habilitar cache de página
4. Usar domínio próprio com SSL (não subdomínio do builder)
5. Ativar CDN se oferecido

---

## Checklist GreatPages

- [ ] Imagens comprimidas ANTES do upload (WebP, <200KB hero)
- [ ] Mínimo de seções e widgets
- [ ] Sem vídeo embed acima do fold
- [ ] Custom CSS minificado
- [ ] Custom JS com defer e mínimo
- [ ] Máximo 2 famílias de fontes
- [ ] Lazy load ativo
- [ ] Cache de página ativo
- [ ] Domínio próprio com SSL
