---
name: page-optimizer
description: "Otimiza páginas para máxima nota no PageSpeed Insights e GTmetrix. Pergunta a plataforma de destino (GHL, WordPress, GreatPages) e aplica otimizações específicas. Cobre performance, responsividade, código limpo e Core Web Vitals."
allowed-tools: Read Write Edit Bash Glob Grep
metadata:
  author: "7D/SECRETS LTDA"
  version: "1.0"
---

# Page Optimizer — Performance + Responsividade + Código Limpo

## Trigger

Ativar quando:
- Página finalizada precisa ser otimizada para PageSpeed/GTmetrix
- @web-designer concluiu o design e o dono aprovou
- User pede: "otimizar página", "melhorar nota", "pagespeed", "gtmetrix", "responsividade"

---

## PASSO 0 — PERGUNTAR PLATAFORMA (OBRIGATÓRIO)

**ANTES de qualquer otimização, perguntar:**

```
Onde essa página vai ser publicada?

  1. GoHighLevel (GHL) — Custom Code no Funnel Builder
  2. Full Funnel — white label do GHL (mesmas otimizações)
  3. WordPress — tema/builder (Elementor, Divi, etc.)
  4. GreatPages — builder nativo
  5. HTML puro — servidor próprio
  6. Outra plataforma — especificar

**NOTA:** Full Funnel = white label do GoHighLevel. Aplicar EXATAMENTE as mesmas otimizações do GHL.

Isso define as otimizações específicas que vou aplicar.
```

**NÃO prosseguir sem resposta.** Cada plataforma tem limitações e otimizações diferentes.

---

## FASE 1 — Diagnóstico

### 1.1 Ler o HTML completo
- Catalogar todos os `<style>`, `<script>`, `<link>`, `<img>`
- Identificar LCP element (maior elemento visível no viewport)
- Listar scripts externos

### 1.2 Métricas-alvo (Core Web Vitals 2026)

| Métrica | Bom | Precisa melhorar | Ruim |
|---------|-----|------------------|------|
| **LCP** (Largest Contentful Paint) | < 2.5s | 2.5-4.0s | > 4.0s |
| **INP** (Interaction to Next Paint) | < 200ms | 200-500ms | > 500ms |
| **CLS** (Cumulative Layout Shift) | < 0.1 | 0.1-0.25 | > 0.25 |
| **FCP** (First Contentful Paint) | < 1.8s | 1.8-3.0s | > 3.0s |
| **TBT** (Total Blocking Time) | < 200ms | 200-600ms | > 600ms |
| **Speed Index** | < 3.4s | 3.4-5.8s | > 5.8s |
| **TTFB** (Time to First Byte) | < 800ms | 800-1800ms | > 1800ms |

### 1.3 Metas de score

| Plataforma | Meta mobile | Meta desktop | Realista máximo |
|------------|-------------|-------------|-----------------|
| HTML puro | 95+ | 98+ | 100 |
| WordPress (com cache) | 85+ | 95+ | 95 |
| GHL Custom Code | 78-85 | 70-80 | 87 |
| Full Funnel (white label GHL) | 78-85 | 70-80 | 87 |
| GreatPages | 80+ | 90+ | 92 |

---

## FASE 2 — Otimizações por Prioridade

### PRIORIDADE 1 — Eliminar CLS
→ Ver: [cls-fix.md](references/cls-fix.md)

- Fontes: `display=optional` para headings, `display=swap` para body com fallback `size-adjust`
- Imagens: `width` e `height` explícitos em TODAS
- JS de manipulação DOM: double `requestAnimationFrame`

### PRIORIDADE 2 — Fontes não-bloqueantes
→ Ver: [fonts.md](references/fonts.md)

**Método preferido: self-hosting (Cloudinary ou servidor)**
- Hospedar woff2 (latin subset) no mesmo domínio/CDN das imagens
- `preconnect` + `preload` no topo
- `@font-face` inline com `font-display: swap`
- Remover TODO JS de Google Fonts

**Fallback: Google Fonts async**
- `media="print" onload="this.media='all'"` trick
- NUNCA `@import url(...)` dentro de `<style>`
- NUNCA preload cross-origin (mata LCP)

### PRIORIDADE 3 — CSS limpo
→ Ver: [css-audit.md](references/css-audit.md)

1. Extrair todas as classes definidas no `<style>`
2. Extrair todas as classes usadas no HTML
3. Deletar classes mortas (verificar JS antes)
4. Minificar CSS restante
5. Critical CSS inline, non-critical async
6. Meta: reduzir CSS em 50-80%

### PRIORIDADE 4 — Imagens otimizadas
→ Ver: [images.md](references/images.md)

- Formato: WebP obrigatório (AVIF quando suportado via `<picture>`)
- LCP image: `fetchpriority="high"` + SEM `loading="lazy"`
- Below-fold: `loading="lazy"` + `decoding="async"`
- `srcset` + `sizes` para responsividade real
- Nunca servir imagem maior que o espaço visual

### PRIORIDADE 5 — Efeitos GPU no mobile
→ Ver: [mobile-gpu.md](references/mobile-gpu.md)

- Animações CSS → `@media(min-width:1024px)` apenas
- `backdrop-filter: blur()` → desktop only
- `box-shadow` pesados → desktop only
- Gradientes decorativos → `display:none` no mobile
- `prefers-reduced-motion` sempre implementar

### PRIORIDADE 6 — Scripts eficientes

- `defer` em todos os scripts não-críticos
- `async` apenas para analytics/tracking
- Minificar JS inline
- Event listeners mínimos
- NUNCA `document.write()`

### PRIORIDADE 7 — HTML semântico

- `<header>`, `<main>`, `<section>`, `<footer>` corretos
- `<h1>` único, hierarquia h1→h2→h3
- `alt` descritivo em todas as imagens
- `<meta>` tags: viewport, description, charset, og:tags
- Lang attribute no `<html>`

---

## FASE 3 — Responsividade Completa

### Breakpoints padrão 2026

| Device | Breakpoint | Teste obrigatório |
|--------|-----------|-------------------|
| Mobile small | 320px | iPhone SE |
| Mobile | 375px | iPhone 14/15 |
| Mobile large | 428px | iPhone 14 Pro Max |
| Tablet | 768px | iPad |
| Tablet landscape | 1024px | iPad landscape |
| Desktop | 1280px | Laptop |
| Desktop large | 1440px | Monitor |
| Ultra-wide | 1920px | Monitor grande |

### Checklist de responsividade

- [ ] Hero section: texto legível em 320px sem scroll horizontal
- [ ] Fontes: `clamp()` para fluid typography (`clamp(1rem, 2.5vw, 1.25rem)`)
- [ ] Imagens: `max-width: 100%` em todas
- [ ] CTAs: min 44x44px touch target no mobile
- [ ] Formulários: inputs full-width no mobile
- [ ] Espaçamentos: padding/margin reduzidos no mobile
- [ ] Grid: 1 coluna no mobile, 2-3 no desktop
- [ ] Texto: max-width 65ch para legibilidade
- [ ] Navegação: hamburger menu ou simplificada no mobile
- [ ] Scroll horizontal: ZERO em qualquer breakpoint

### Técnicas de responsividade

```css
/* Fluid typography — escala suavemente entre breakpoints */
h1 { font-size: clamp(1.75rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2.25rem); }
p  { font-size: clamp(0.875rem, 2vw, 1.125rem); }

/* Container responsivo */
.container { width: min(90%, 1200px); margin: 0 auto; }

/* Grid responsivo sem media query */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
```

---

## FASE 4 — Otimizações por Plataforma

### GoHighLevel (GHL)
→ Ver: [ghl-platform.md](references/ghl-platform.md)

**Limitações:**
- Sem controle do `<head>` — preload/preconnect via `<link>` no body funciona
- GHL injeta GTM, TikTok Pixel, tracking scripts → TBT mínimo ~250-350ms
- Template containers causam CLS → GHL Full-Screen Fix JS obrigatório
- GHL CSS externo (`leadconnectorhq.com`) → TBT desktop alto (normal, ignorar)
- **Score máximo realista mobile: 78-87**

**Otimizações GHL específicas:**
- GHL Full-Screen Fix com double `requestAnimationFrame`
- Prefixar TODAS as classes CSS (evitar conflito com GHL classes)
- `media="print" onload` para fontes (funciona sem `<head>`)
- Hero image < 200KB obrigatório
- Habilitar "Optimize Javascript" nas settings do GHL
- Lazy-load de widgets não-essenciais

### WordPress
→ Ver: [wordpress-platform.md](references/wordpress-platform.md)

**Plugin obrigatório de cache (escolher 1):**
- **WP Rocket** (pago, mais fácil): page cache, file optimization, lazy load, CDN, database cleanup
- **LiteSpeed Cache** (grátis se servidor LiteSpeed): server-level cache, QUIC.cloud CDN

**Otimizações WordPress específicas:**
- Minificar + combinar CSS/JS (WP Rocket ou Autoptimize)
- Lazy load nativo do WordPress 5.5+ (já incluso)
- Converter imagens para WebP (ShortPixel ou Imagify)
- Preload critical CSS (WP Rocket faz automaticamente)
- Database cleanup mensal (WP Rocket ou WP-Optimize)
- Desativar plugins desnecessários (cada plugin = +50-200ms)
- CDN: Cloudflare (grátis) ou BunnyCDN
- PHP 8.1+ obrigatório
- **Score máximo realista mobile: 85-95**

### GreatPages
→ Ver: [greatpages-platform.md](references/greatpages-platform.md)

**Otimizações GreatPages específicas:**
- Otimizar imagens ANTES de fazer upload (Squoosh/TinyPNG)
- Minimizar seções — cada seção = mais DOM nodes
- Evitar widgets pesados (vídeo embed, maps) acima do fold
- Custom CSS: purgar classes não utilizadas
- Custom JS: mínimo e com `defer`
- Lazy-load seções abaixo do fold (se suportado)
- **Score máximo realista mobile: 80-92**

### HTML Puro
**Otimizações HTML puro:**
- Controle total do `<head>` — preload, preconnect, resource hints
- Critical CSS inline + non-critical via `media="print" onload`
- HTTP/2 server push (se servidor suporta)
- Gzip/Brotli compression
- Cache headers longos para assets estáticos
- **Score máximo realista mobile: 95-100**

---

## FASE 5 — Validação

### GTmetrix — Como atingir Grade A

| Métrica GTmetrix | Peso no score | Meta Grade A |
|-----------------|---------------|-------------|
| LCP | 25% | < 1.2s |
| TBT | 30% | < 150ms |
| CLS | 15% | < 0.1 |
| Speed Index | 15% | < 1.5s |
| FCP | 10% | < 0.9s |
| TTFB | 5% | < 500ms |

### Relatório final

Após otimizar, entregar:

```
## Relatório de Otimização — Page Optimizer

**Página:** [nome]
**Plataforma:** [GHL/WordPress/GreatPages/HTML]
**Data:** [data]

### Métricas Estimadas (pós-otimização)

| Métrica | Antes | Depois | Meta |
|---------|-------|--------|------|
| LCP | Xs | Xs | <2.5s |
| CLS | X | X | <0.1 |
| TBT | Xms | Xms | <200ms |
| FCP | Xs | Xs | <1.8s |
| Score mobile | X | X | 85+ |

### Otimizações Aplicadas
1. [lista de cada mudança]

### Limitações da Plataforma
[o que não pode ser otimizado]

### Próximos Passos
[recomendações adicionais]
```

---

## Checklist Final (verificar ANTES de entregar)

### Performance
- [ ] LCP image com `fetchpriority="high"`
- [ ] Todas as imagens em WebP com `width`/`height`
- [ ] Below-fold images com `loading="lazy"`
- [ ] Fontes não bloqueiam render
- [ ] CSS morto removido e minificado
- [ ] Scripts com `defer` ou `async`
- [ ] Animações desktop-only no mobile

### Responsividade
- [ ] Testado em 320px (sem scroll horizontal)
- [ ] Testado em 375px (iPhone)
- [ ] Testado em 768px (tablet)
- [ ] Testado em 1024px (desktop)
- [ ] Touch targets >= 44x44px
- [ ] Fluid typography com `clamp()`
- [ ] Formulários usáveis no mobile

### Código Limpo
- [ ] HTML semântico (header, main, section, footer)
- [ ] Hierarquia de headings correta (h1 único)
- [ ] Alt text em todas as imagens
- [ ] Meta tags completas (viewport, description, og:)
- [ ] Sem erros de validação HTML
- [ ] CSS organizado e minificado
- [ ] JS mínimo e eficiente

### Plataforma
- [ ] Otimizações específicas da plataforma aplicadas
- [ ] Limitações documentadas
- [ ] Score dentro do teto realista da plataforma

---

*Page Optimizer v1.0 — MSE Funnel Labs*
*© 2026 7D/SECRETS LTDA — Anthony Nichols & André Cia*
