zark-seo 1.0.0

package/templates/core-web-vitals-fixer-SKILL.md

@@ -0,0 +1,582 @@
+---
+name: core-web-vitals-fixer
+description: Diagnostica e corrige problemas de performance e Core Web Vitals (LCP, INP, CLS) em sites brasileiros, com foco em WordPress + Elementor (stack predominante de clientes ZARK). Use SEMPRE que o usuário pedir para "site lento", "melhorar performance", "PageSpeed baixo", "Core Web Vitals", "LCP alto", "INP ruim", "CLS", "Lighthouse", "passar nos Core Web Vitals", "site demora pra carregar", "Google está reclamando da velocidade", "GTmetrix", "tempo de carregamento", "otimizar velocidade", "imagens grandes", "JavaScript pesado", "fontes lentas". Acionar também quando uma auditoria SEO identifica gargalo de performance, ou quando estiver criando site novo e for momento de validar performance antes de publicar. Domina a hierarquia de impacto por causa-raiz, diferença entre dados de campo (CrUX) e laboratório (Lighthouse), trade-offs de cada otimização, e plugins/serviços recomendados pra mercado brasileiro.
+---
+
+# Core Web Vitals Fixer — Padrão ZARK
+
+Skill especialista em performance web e Core Web Vitals para sites brasileiros, principalmente o stack **WordPress + Elementor + hospedagem BR**. Diagnostica antes de prescrever, prioriza por impacto, e alerta sobre trade-offs.
+
+## Por que Core Web Vitals importam
+
+**Core Web Vitals são fator de ranking confirmado** desde 2021 (com expansão pra mobile-first). Não são o fator mais forte, mas em SERPs disputadas viram desempate. Para Local SEO, sites lentos têm CTR menor (usuário desiste) e bounce rate alto, o que pode reduzir destaque no Local Pack.
+
+**Mais importante que ranking: experiência real.** Site com LCP de 5s perde 40-60% de conversão vs site com LCP de 2s. Em e-commerce e prestação de serviço local, isso é dinheiro deixado na mesa.
+
+**O que o Google mede em 2026:**
+
+| Métrica | O que mede | Bom | A melhorar | Ruim |
+|---|---|---|---|---|
+| **LCP** (Largest Contentful Paint) | Tempo até a maior parte visível aparecer | < 2.5s | 2.5–4s | > 4s |
+| **INP** (Interaction to Next Paint) | Tempo do clique até a tela reagir | < 200ms | 200–500ms | > 500ms |
+| **CLS** (Cumulative Layout Shift) | Quanto a tela "pula" durante carregamento | < 0.1 | 0.1–0.25 | > 0.25 |
+
+**INP substituiu FID** em março de 2024. Skill considera INP como métrica oficial.
+
+## Princípios não-negociáveis
+
+1. **Diagnóstico antes de prescrição.** Sempre rodar PageSpeed Insights primeiro. Não recomendar fix sem ter o problema medido.
+
+2. **Mobile-first sempre.** Métricas de mobile são as que rankeiam. Desktop pode ir bem e mobile mal — atacar mobile.
+
+3. **CrUX > Lighthouse.** Quando dado de campo (CrUX) e laboratório (Lighthouse) divergem, CrUX é o que conta pro ranking. Lighthouse é guia de diagnóstico.
+
+4. **Meta realista, não score 100.** Passar Core Web Vitals (LCP < 2.5s, INP < 200ms, CLS < 0.1) é o objetivo. Score 100 raramente vale o esforço.
+
+5. **Hierarquia de impacto.** Imagem hero não otimizada destrói LCP — fix de 30 minutos. JS bloat afeta INP — fix complexo. Sempre priorizar por **impacto × esforço**.
+
+6. **Trade-offs explícitos.** Toda otimização tem custo. Lazy loading agressivo pode quebrar LCP da hero. Defer JS pode quebrar formulário. Skill alerta sempre.
+
+7. **Não tocar em produção sem backup.** Cliente ZARK precisa de plano de rollback antes de qualquer mudança em hospedagem ou plugins.
+
+## Fluxo de execução
+
+### Etapa 1 — Diagnóstico inicial (sempre)
+
+Antes de qualquer recomendação, peça ou execute:
+
+**Dados obrigatórios:**
+
+1. **URL da página principal** + 2-3 páginas internas representativas (home, página de serviço/produto, blog post)
+
+2. **Resultado do PageSpeed Insights** (https://pagespeed.web.dev) para cada URL — **mobile e desktop**:
+ - LCP, INP, CLS (campo + lab)
+ - Speed Index
+ - Total Blocking Time
+ - Lista de "Diagnostics" e "Opportunities" do Lighthouse
+
+3. **Stack atual:**
+ - CMS (WordPress, Wix, Squarespace, Shopify, custom)
+ - Tema (Astra, Hello Elementor, Avada, Divi, custom)
+ - Page builder (Elementor, Divi, Bricks, Oxygen, sem)
+ - Plugins instalados (lista)
+ - Hospedagem (provedor + plano)
+ - CDN (Cloudflare? sem? outro?)
+ - Plugin de cache atual (se houver)
+ - Plugin de otimização de imagem atual (se houver)
+
+**Se o usuário não tem alguns dados, peça pra rodar PageSpeed Insights e enviar prints/JSON.** Não chute.
+
+### Etapa 2 — Classificação do problema
+
+Use a árvore de decisão:
+
+**LCP ruim (> 2.5s):**
+- TTFB alto (> 600ms)? → Problema de **hospedagem/cache**
+- Hero image grande/não otimizada? → Problema de **imagem**
+- Fonte custom carregando depois? → Problema de **fonte**
+- CSS render-blocking? → Problema de **CSS**
+- JS bloqueando primeiro paint? → Problema de **JS render-blocking**
+
+**INP ruim (> 200ms):**
+- Muito JavaScript carregando? → Problema de **JS bloat**
+- Plugins com handlers pesados? → Problema de **plugin específico**
+- Long tasks no main thread? → Problema de **execução de JS**
+
+**CLS ruim (> 0.1):**
+- Imagens sem `width`/`height`? → Problema de **dimensões fixas**
+- Fontes que trocam de tamanho? → Problema de **font swap**
+- Pop-ups injetados depois do load? → Problema de **layout dinâmico**
+- Ads ou widgets terceiros? → Problema de **terceiros**
+
+### Etapa 3 — Plano de correção priorizado
+
+Sempre entregar em 3 fases:
+
+**Fase 1 — Quick Wins (1-2h, alto impacto):**
+Coisas que mexem em 1 hora e melhoram score 20-40 pontos.
+
+**Fase 2 — Otimizações estruturais (1-3 dias):**
+Plugins, configurações, refatorações que exigem mais cuidado.
+
+**Fase 3 — Infraestrutura (1-2 semanas):**
+Trocas de hospedagem, refatoração de tema, mudanças que exigem migração.
+
+## Catálogo de problemas e soluções (referência principal)
+
+### LCP — Largest Contentful Paint
+
+#### Problema 1: Hero image grande e/ou não otimizada
+**Sintoma:** LCP > 3s, "Properly size images" alto no Lighthouse.
+
+**Diagnóstico:** clique direito na imagem hero → "Inspect" → ver tamanho original (`naturalWidth × naturalHeight`) vs renderizado (`width × height`). Se original é 4000×3000 e renderiza em 1200×800, está sendo redimensionado pelo navegador.
+
+**Solução (em ordem):**
+
+1. **Comprimir imagens existentes** com plugin ShortPixel, Smush, ou Imagify
+ - ShortPixel: melhor qualidade, plano gratuito 100 imagens/mês
+ - Smush: mais simples, gratuito ilimitado mas menos eficiente
+ - Imagify: meio termo
+
+2. **Servir em WebP/AVIF**
+ - WebP: 25-35% menor que JPG, suporte universal hoje
+ - AVIF: 50% menor, suporte 95%+ em 2026
+ - Plugins acima fazem conversão automática
+
+3. **Dimensões corretas** — imagem renderizada em 1200px não deve ter original de 4000px
+ - WordPress gera múltiplos tamanhos automaticamente, mas Elementor às vezes força full size
+ - Usar atributo `srcset` corretamente
+
+4. **Preload da hero image:**
+ ```html
+ <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
+ ```
+
+5. **Lazy loading EXCETO na hero**:
+ - Imagens below-the-fold: `loading="lazy"`
+ - Imagem hero (above-the-fold): SEM lazy loading + `fetchpriority="high"`
+ - **Trade-off crítico:** lazy loading na hero piora LCP. Erro comum.
+
+#### Problema 2: TTFB alto (servidor lento)
+**Sintoma:** "Reduce server response time" alto no Lighthouse, TTFB > 600ms no GTmetrix.
+
+**Diagnóstico:** rodar GTmetrix ou WebPageTest, olhar Waterfall — primeira requisição do HTML quanto demora?
+
+**Solução:**
+
+1. **Cache de página ativo** (sempre):
+ - WordPress: WP Rocket (pago) > LiteSpeed Cache (gratuito, ótimo se hospedagem é LiteSpeed) > W3 Total Cache (legado, evitar) > WP Super Cache (simples)
+ - Configurar TTL alto pra páginas estáticas
+ - Cache para usuário não-logado
+
+2. **CDN Cloudflare** (gratuito e essencial):
+ - Cadastrar domínio em cloudflare.com
+ - Apontar nameservers
+ - Ativar "Auto Minify" (CSS, JS, HTML)
+ - Ativar "Brotli compression"
+ - Configurar Page Rules pra cache agressivo de estáticos
+
+3. **Hospedagem decente**:
+ - Brasil: Hostinger Premium+, KingHost SSD, HostGator Reseller, Locaweb Cloud
+ - Internacional com data center BR: SiteGround GoGeek+, Kinsta, WP Engine
+ - Evitar: hospedagem compartilhada barata < R$ 30/mês (TTFB sempre ruim)
+ - VPS managed (Cloudways, GridPane) pra clientes mais robustos
+
+4. **PHP atualizado**: PHP 8.2+ é 2-3x mais rápido que PHP 7.4. Verificar no painel da hospedagem.
+
+5. **Banco de dados otimizado**:
+ - Plugin WP-Optimize ou Advanced Database Cleaner
+ - Limpar revisões antigas, transients, post-meta órfão
+ - InnoDB > MyISAM (deve estar default)
+
+#### Problema 3: Render-blocking CSS/JS
+**Sintoma:** "Eliminate render-blocking resources" no Lighthouse.
+
+**Solução:**
+
+1. **CSS crítico inline** (o CSS necessário pro above-the-fold no `<head>`)
+ - WP Rocket faz automaticamente
+ - Manualmente: usar critical-path-css-generator
+
+2. **CSS não-crítico async**:
+ ```html
+ <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+ ```
+
+3. **JS defer/async**:
+ - `defer`: baixa em paralelo, executa depois do HTML parser. Ideal pra maioria dos scripts.
+ - `async`: baixa em paralelo, executa quando termina (pode bloquear). Só pra analytics tipo GA.
+ - **Trade-off:** defer/async em scripts de formulário ou plugin específico pode quebrar funcionalidade. Testar.
+
+4. **Eliminar CSS/JS não usado**:
+ - WP Rocket: "Remove Unused CSS"
+ - LiteSpeed Cache: "CSS / JS Combine + Optimize"
+ - **Trade-off:** geração de cache demora; primeiro carregamento pós-mudança é lento
+
+#### Problema 4: Fontes carregando lento
+**Sintoma:** "Ensure text remains visible during webfont load" no Lighthouse.
+
+**Solução:**
+
+1. **`font-display: swap`** em todas as `@font-face`:
+ ```css
+ @font-face {
+ font-family: 'CustomFont';
+ src: url('font.woff2') format('woff2');
+ font-display: swap;
+ }
+ ```
+ - Com swap, texto aparece com fallback enquanto a fonte custom carrega
+
+2. **Self-hosting de Google Fonts** (gratuito e melhor):
+ - Plugin OMGF (Optimize My Google Fonts) ou WP Rocket
+ - Baixa fontes pro próprio domínio
+ - Reduz dependência de fonts.googleapis.com
+
+3. **Preload de fontes críticas**:
+ ```html
+ <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
+ ```
+ - Só pras fontes usadas no above-the-fold
+
+4. **Remover variantes de peso desnecessárias**:
+ - Site usa Inter Regular, Bold e... Black, Light, Italic, etc?
+ - Manter só os pesos realmente usados. Cada variante são ~30-80KB.
+
+### INP — Interaction to Next Paint
+
+#### Problema 1: JavaScript bloat
+**Sintoma:** INP > 300ms, "Reduce JavaScript execution time" alto.
+
+**Diagnóstico:** Lighthouse → Performance → "Coverage" tab → ver % de JS não usado por arquivo.
+
+**Solução:**
+
+1. **Auditar plugins ativos** — desativar 1 por 1 e medir impacto:
+ - Plugins de analytics múltiplos (Google Analytics + GTM + Hotjar + Clarity = 800KB de JS)
+ - Plugins de chat ao vivo (carregam mesmo sem uso)
+ - Plugins de pop-up
+ - Plugins de slider antigo (NextGEN, Revolution Slider) — substituir por nativo do tema
+
+2. **Lazy load de iframes** (YouTube, Maps):
+ - Plugin "Lazy Load for Videos" ou nativo do WP Rocket
+ - Vídeo só carrega quando usuário rola até ele
+ - Maps: usar imagem placeholder + carregar real ao clicar
+
+3. **Defer todos os scripts não-críticos**:
+ - Conforme item LCP/Problema 3
+
+4. **Tree shaking / minify**:
+ - Cloudflare Auto Minify
+ - WP Rocket "Minify JS"
+
+#### Problema 2: Plugins com handlers pesados
+**Sintoma:** Long tasks no Performance tab do DevTools, INP ruim mesmo com pouco JS.
+
+**Solução:**
+
+1. **Identificar o plugin culpado**:
+ - DevTools → Performance → gravar interação → ver qual script ocupa main thread
+
+2. **Substituir ou eliminar**:
+ - Plugins comuns que pesam: WPBakery (Visual Composer), Avada Builder, plugins de "live edit"
+ - Migrar pra Elementor (geralmente mais leve) ou Bricks (significativamente mais leve)
+
+3. **WPCode em vez de plugins individuais**:
+ - Em vez de 5 plugins pra "adicionar header", "adicionar footer", "adicionar Google Analytics" — um WPCode resolve tudo
+
+#### Problema 3: Third-party scripts (analytics, chat, pixel)
+**Sintoma:** "Reduce third-party usage" no Lighthouse.
+
+**Solução:**
+
+1. **Google Tag Manager unificado** em vez de scripts soltos
+2. **Lazy load** de chat (Intercom, Tawk, Crisp) — não carregar até usuário interagir
+3. **Pixels (Meta, TikTok)** apenas em páginas de conversão, não site inteiro
+4. **Heatmap (Hotjar, Clarity)** com sample rate baixo
+
+### CLS — Cumulative Layout Shift
+
+#### Problema 1: Imagens sem dimensões fixas
+**Sintoma:** CLS > 0.1, "Image elements do not have explicit width and height" no Lighthouse.
+
+**Solução:**
+
+```html
+<!-- Errado -->
+<img src="hero.jpg" alt="...">
+
+<!-- Certo -->
+<img src="hero.jpg" alt="..." width="1200" height="630">
+```
+
+Com `width` e `height`, navegador reserva o espaço antes da imagem carregar. Sem, conteúdo pula quando a imagem aparece.
+
+**Em WordPress:** o editor já adiciona automaticamente. Em Elementor, verificar configuração de imagem do widget.
+
+#### Problema 2: Fontes que mudam de largura
+**Sintoma:** Texto "redimensiona" no carregamento.
+
+**Solução:**
+
+1. **Self-host de fontes** (item Fontes acima)
+2. **`size-adjust` no `@font-face`** pra equalizar fallback:
+ ```css
+ @font-face {
+ font-family: 'Inter';
+ src: url('inter.woff2') format('woff2');
+ font-display: swap;
+ size-adjust: 100%;
+ ascent-override: 90%;
+ descent-override: 22%;
+ line-gap-override: 0%;
+ }
+ ```
+ - Ajustar valores até fallback ter mesma altura que custom
+
+#### Problema 3: Pop-ups e banners injetados depois
+**Sintoma:** Conteúdo "desce" 200px quando aparece banner de cookie.
+
+**Solução:**
+
+1. **Reservar espaço** pro banner via CSS:
+ ```css
+ #cookie-banner-placeholder { min-height: 80px; }
+ ```
+
+2. **Posicionar fixo (overlay)** em vez de empurrar conteúdo:
+ ```css
+ #cookie-banner { position: fixed; bottom: 0; }
+ ```
+
+3. **Renderizar no SSR** se possível (próximo de sites estáticos / Next.js)
+
+#### Problema 4: Anúncios e embeds
+**Sintoma:** Embeds de Twitter, Instagram, YouTube com altura variável.
+
+**Solução:**
+
+1. **`aspect-ratio` no container** (CSS moderno):
+ ```css
+ .youtube-embed { aspect-ratio: 16/9; }
+ ```
+
+2. **Plugin "Wonder Embed" ou similar** que reserva espaço fixo pra embed.
+
+## Stack ZARK recomendado para WordPress + Elementor
+
+Configuração-padrão pra todo cliente WordPress:
+
+### Hospedagem (escolher conforme orçamento)
+
+| Cliente | Recomendação |
+|---|---|
+| Pequeno (ticket baixo, < 5k visitas/mês) | Hostinger Premium ou KingHost SSD |
+| Médio (5k–50k visitas/mês) | Hostinger Business, HostGator Reseller, ou Cloudways DigitalOcean |
+| Grande (> 50k visitas/mês) | Cloudways Vultr High Frequency, Kinsta, ou WP Engine |
+| Empresa BR sensível a localidade | Locaweb Cloud, Hostinger BR data center |
+
+### Plugins essenciais (nessa ordem de instalação)
+
+1. **Cache + otimização**: WP Rocket (pago, R$ 290/ano, melhor relação custo-benefício) OU LiteSpeed Cache (gratuito, exige hospedagem com LiteSpeed)
+2. **CDN**: Cloudflare (gratuito) — apontar nameservers
+3. **Imagens**: ShortPixel ou Imagify (plano gratuito basta pra começar)
+4. **Fontes**: OMGF (gratuito) — self-host de Google Fonts
+5. **Lazy load avançado**: nativo do WP Rocket OU plugin "a3 Lazy Load"
+6. **Database cleanup**: WP-Optimize (gratuito)
+7. **Code snippets**: WPCode (gratuito) — substitui 3-5 plugins individuais
+8. **Segurança**: Wordfence ou Solid Security — não diretamente performance, mas plugins de segurança ruins matam INP
+
+### Configuração WP Rocket recomendada (presets)
+
+- **Cache:** ativado, TTL 24h pra logged-out
+- **File optimization:**
+ - Minify CSS: ON
+ - Combine CSS: OFF (pode causar problemas com Elementor)
+ - Minify JS: ON
+ - Combine JS: OFF
+ - Defer JavaScript: ON
+ - Delay JavaScript Execution: ON (selecionar GA, GTM, FB Pixel, Hotjar)
+- **Media:**
+ - LazyLoad imagens: ON (mas excluir hero image manualmente)
+ - LazyLoad iframes: ON
+ - Add missing image dimensions: ON
+ - Disable Emoji: ON
+- **Preload:** Sitemap-based preload, ON
+- **Database:** limpar manualmente uma vez por mês via WP-Optimize
+- **CDN:** integrar com Cloudflare se aplicável
+
+### Configuração Cloudflare recomendada (free tier)
+
+- **SSL/TLS:** Full (strict)
+- **Always Use HTTPS:** ON
+- **Auto Minify:** CSS, JS, HTML — todos ON
+- **Brotli:** ON
+- **Rocket Loader:** OFF (causa problemas com Elementor — ironia do nome)
+- **Page Rules:**
+ - `*.dominio.com.br/wp-admin/*` → Cache Level: Bypass
+ - `*.dominio.com.br/wp-content/uploads/*` → Cache Level: Cache Everything, Edge TTL 1 mês
+- **Bot Fight Mode:** ON (gratuito, bloqueia bots ruins)
+- **Browser Cache TTL:** 1 ano
+
+## Estrutura obrigatória do entregável
+
+Quando esta skill é acionada, sempre entregar nesse formato:
+
+```markdown
+# ⚡ AUDITORIA PERFORMANCE — [URL OU EMPRESA]
+
+## 📊 DIAGNÓSTICO
+
+**URL analisada:** [URL]
+**Data:** [data]
+**Ferramenta:** PageSpeed Insights
+
+### Métricas atuais
+
+| Métrica | Mobile | Desktop | Status |
+|---|---|---|---|
+| LCP | X.Xs | X.Xs | ✅/⚠️/❌ |
+| INP | XXXms | XXXms | ✅/⚠️/❌ |
+| CLS | 0.XX | 0.XX | ✅/⚠️/❌ |
+| TTFB | XXXms | XXXms | ✅/⚠️/❌ |
+
+**Passa Core Web Vitals?** [Sim / Não]
+
+### Stack identificado
+
+- CMS: [...]
+- Tema: [...]
+- Page builder: [...]
+- Hospedagem: [...]
+- CDN: [...]
+- Cache: [...]
+
+## 🚨 PROBLEMAS CRÍTICOS IDENTIFICADOS
+
+### Problema #1: [Título]
+**Métrica afetada:** [LCP/INP/CLS]
+**Sintoma:** [...]
+**Causa-raiz:** [...]
+**Impacto estimado se corrigido:** [...]
+
+[Repetir 2-5 críticos]
+
+## 🛠️ PLANO DE CORREÇÃO PRIORIZADO
+
+### FASE 1 — Quick Wins (1-2h, alto impacto)
+
+1. **[Ação]** — [Descrição prática]
+ **Como fazer:** [passo a passo]
+ **Trade-off / risco:** [se houver]
+ **Impacto esperado:** [LCP -X.Xs, etc]
+
+[Repetir 3-5 quick wins]
+
+### FASE 2 — Otimizações estruturais (1-3 dias)
+
+[Mesma estrutura]
+
+### FASE 3 — Infraestrutura (1-2 semanas, se necessário)
+
+[Mesma estrutura]
+
+## 📦 STACK RECOMENDADO PARA ESTE CASO
+
+[Plugins, configurações específicas pra esse cliente]
+
+## ✅ CHECKLIST DE EXECUÇÃO
+
+- [ ] Backup completo (UpdraftPlus ou similar)
+- [ ] Testar mudanças em staging primeiro (se possível)
+- [ ] Aplicar Quick Wins
+- [ ] Re-rodar PageSpeed Insights e comparar
+- [ ] Aplicar Fase 2
+- [ ] Re-medir
+- [ ] Monitorar por 7 dias (CrUX leva 28 dias pra atualizar dados de campo)
+
+## 🎯 META REALISTA
+
+Após execução completa: LCP < 2.5s, INP < 200ms, CLS < 0.1 — passa Core Web Vitals.
+
+Não promete score Lighthouse 100. Promete: passar nos 3 thresholds que o Google rankeia.
+
+## ⚠️ ALERTAS
+
+[Trade-offs específicos do caso, ações que podem quebrar funcionalidade existente]
+```
+
+## Erros comuns que esta skill EVITA
+
+1. **Recomendar otimização sem ter medido o problema.** "Habilita cache" pra um site que já tem cache é ruído.
+
+2. **Ignorar mobile e otimizar só desktop.** Google rankeia mobile.
+
+3. **Confundir Lighthouse com CrUX.** Cliente vê Lighthouse 95 e acha que está bom. Mas o CrUX (que rankeia) está em 60. Skill alerta.
+
+4. **Lazy load na hero image.** Erro comum em plugins que aplicam lazy a tudo. Hero NÃO leva lazy load.
+
+5. **Combinar CSS/JS sem testar.** WP Rocket "Combine CSS" quebra muito Elementor. Skill recomenda DESLIGAR.
+
+6. **Usar Rocket Loader do Cloudflare com Elementor.** Quebra interações. Skill recomenda DESLIGAR.
+
+7. **Manter PHP 7.4 ou inferior.** PHP 8.2+ é gratuito (mudança no painel da hospedagem) e dobra performance.
+
+8. **Hospedagem barata < R$ 30/mês.** Não passa CWV. Skill alerta antes de qualquer otimização.
+
+9. **3 plugins de cache simultâneos.** Briga entre eles, perde performance. Skill instrui escolher UM.
+
+10. **Imagem em 4000px renderizada em 800px.** Banda desperdiçada. Comprimir + redimensionar.
+
+11. **Google Fonts via CDN do Elementor.** Bloqueia render. Usar OMGF pra self-host.
+
+12. **Esquecer width/height em imagens.** Causa CLS alto. Skill instrui sempre.
+
+13. **Pop-up de cookie que desce a página.** Reservar espaço ou usar overlay fixo.
+
+14. **Achar que score 100 é a meta.** Skill alerta: meta é passar CWV (LCP/INP/CLS), não Lighthouse 100.
+
+15. **Não fazer backup antes de mudar plugin.** Cliente fica fora do ar e culpa a skill. Skill sempre recomenda backup.
+
+## Edge cases
+
+**Site em construção (página em manutenção):**
+Performance não importa ainda. Foco em terminar o site primeiro.
+
+**Site WooCommerce / e-commerce:**
+INP é mais sensível por interações com carrinho. JS de tema de loja (Astra Pro, Flatsome, Dokan) é mais pesado. Considerar tema mais leve (Blocksy, GeneratePress).
+
+**Site estático (Next.js, Astro, Hugo):**
+Geralmente passa CWV nativamente. Skill ainda útil pra otimizar imagens e fonts, mas Fase 3 (hospedagem) raramente é problema.
+
+**Site com plugin de tradução (WPML, Polylang):**
+Sites multilíngues somam DB queries. WPML costuma ser pesado. Considerar Polylang gratuito ou TranslatePress se WPML está matando perf.
+
+**Site em VPS/dedicado sem managed:**
+Otimização exige acesso a servidor (Nginx config, PHP-FPM, MySQL tuning). Recomendar managed (Cloudways, GridPane) se cliente não tem dev DevOps.
+
+**Cliente que mexeu no `wp-config.php` e quebrou:**
+Sempre recomendar backup antes de qualquer mudança. Se quebrou, restaurar do backup do hospedeiro (cPanel → restore).
+
+**Site com tráfego pago alto (campanhas Meta/Google):**
+Performance é direto $$. LCP -1s pode reduzir CPC em 10-15% por melhorar Quality Score. Alta prioridade.
+
+**Cliente que insiste em manter plugin pesado (NextGEN, Revolution Slider):**
+Negociar substituição. Se cliente recusa, otimizar o que dá no resto. Documentar limitação.
+
+## Ferramentas e comandos úteis
+
+**Validação:**
+- PageSpeed Insights: https://pagespeed.web.dev
+- GTmetrix: https://gtmetrix.com (com servidor BR)
+- WebPageTest: https://webpagetest.org (mais granular)
+- Chrome DevTools → Lighthouse + Performance tab
+
+**Monitoramento contínuo:**
+- Google Search Console → Core Web Vitals report
+- DebugBear (pago, monitora CrUX e simulado)
+- Calibre (pago)
+- Treo.sh (gratuito até 5 sites)
+
+**Análise específica:**
+- Imagens: https://squoosh.app (compressão manual)
+- Fontes: https://font-display.glitch.me (ver impacto de font-display)
+- Critical CSS: https://www.sitelocity.com/critical-path-css-generator
+
+## Exemplo de invocação esperada
+
+**Usuário:** "Site da Limppetec tá lento, PageSpeed deu 38 no mobile"
+
+**Resposta esperada:** acionar skill, pedir URL + screenshot do PageSpeed Insights + stack atual, classificar problema (provável: imagens não otimizadas + Elementor sem cache), entregar plano em 3 fases com Quick Wins primeiro.
+
+**Usuário:** "Como melhorar Core Web Vitals do meu cliente WordPress?"
+
+**Resposta esperada:** acionar skill, pedir URL e métricas atuais, gerar plano específico do stack identificado.
+
+**Usuário:** "Cliente reclamou que site demora pra abrir no celular"
+
+**Resposta esperada:** acionar skill, pedir URL + medições mobile específicas, focar em LCP e INP mobile (provavelmente o problema), executar fluxo padrão.
+
+**Usuário:** "Lighthouse deu 95 mas Search Console mostra que não passa Core Web Vitals"
+
+**Resposta esperada:** acionar skill, explicar diferença CrUX × Lighthouse, focar em dados de campo, identificar gap entre lab e produção (geralmente: TTFB ruim em produção, hospedagem fraca, ou cache mal configurado).