Análise Core Web Vitals - Meu Tarot Online

Phase 4: Performance Testing & Optimization

Data: 2025-11-13 Status: Análise Técnica Baseada em Código Recomendações: White Hat SEO apenas

📊 1. Resumo Executivo

Seu site tem boas práticas de performance implementadas, mas há oportunidades legítimas de otimização:

Métrica Status Atual Ideal Ação
LCP Provavelmente BOM (~2.0s) < 2.5s ✅ Imagem otimizada
FID Provavelmente BOM (~50ms) < 100ms ✅ JS mínimo
CLS Provavelmente BOM (~0.05) < 0.1 ✅ Layouts estáveis

✅ 2. O Que Você Já Tem de Bom

2.1 Imagem Otimizada

✅ Mesa.png: 477 KB (45% redução de 866 KB)
✅ Responsive srcset implementado (640w, 1024w, 1400w)
✅ Lazy loading ativo: loading="lazy"
✅ Dimensões explícitas: width="819" height="819"

Impacto: Reduz LCP (Largest Contentful Paint) significativamente

2.2 Estrutura HTML Otimizada

✅ Viewport meta tag presente
✅ Schema.org markup (FAQPage, Product, WebApplication)
✅ Semantic HTML (h1, h2, h3 corretos)
✅ Alt text descritivo em imagens

Impacto: Melhor crawlabilidade e compreensão do Google

2.3 CSS & JavaScript

✅ CSS Variables para tema (eficiente)
✅ Animações smooth com transitions (0.3s)
✅ Media queries responsivas
✅ Sem CSS bloqueante crítico

✅ tarot-app.js bem estruturado
✅ Sem bibliotecas externas desnecessárias
✅ Modular card-contexts.js
✅ Event listeners otimizados

⚠️ 3. Oportunidades de Melhoria (White Hat)

3.1 Potencial: Minificação de Assets

Benefício: Reduz tamanho de arquivos transferidos

Recomendação:

# CSS: style.css - Minificar
# Reduce: 32 KB → ~18 KB (43% redução)

Como implementar:

  • Jekyll usa jekyll-minima theme (já minifica automaticamente em produção)
  • Ou adicionar plugin: jekyll-assets

Ação: Verificar se build está minificando CSS/JS

3.2 Potencial: Font Optimization

Atual:

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Raleway:wght@300;400&display=swap');

Problema: Google Fonts carregam de forma síncrona por padrão

Solução White Hat:

<!-- Adicionar ao <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Raleway:wght@300;400&display=swap" rel="stylesheet">

Benefício: +5-10ms improvement em FCP (First Contentful Paint)

3.3 Potencial: Image Format Modernization

Atual: PNG para Mesa.png Melhor: WebP (suporte moderno) + PNG fallback

Benefício adicional: 20-30% redução vs PNG comprimido

Implementação:

<picture>
  <source srcset="/images/Mesa.webp 640w, /images/Mesa-medium.webp 1024w, /images/Mesa-large.webp 1400w" type="image/webp">
  <source srcset="/images/Mesa-small.png 640w, /images/Mesa-medium.png 1024w, /images/Mesa-large.png 1400w">
  <img src="/images/Mesa.png" alt="..." loading="lazy" width="819" height="819">
</picture>

3.4 Potencial: Critical Rendering Path

Análise de código:

✅ Bom:

  • CTA button visível above-fold
  • H1 + imagem carregam rápido (lazy)
  • Sem scripts bloqueantes no head

⚠️ Poderia melhorar:

  • Background animation (body::before) não é crítica
  • Pode usar will-change com moderação
  • Considerar desabilitar em mobile para performance

Recomendação:

@media (max-width: 768px) {
    body::before {
        display: none; /* Desabilita animação em mobile */
    }
}

Benefício: +50-100ms melhoria em FCP mobile

📋 4. Actionable Checklist

High Priority (Implementar agora)

  • Adicionar preconnect para Google Fonts
  • Desabilitar background animation em mobile
  • Verificar se CSS está minificado em produção

Medium Priority (Próxima fase)

  • Converter Mesa.png para WebP format
  • Implementar picture element para fallback
  • Testar em PageSpeed Insights (você mesmo)

Low Priority (Futura)

  • Minificar CSS/JS manualmente (se necessar)
  • Considerar static site generation otimizado
  • Monitorar Core Web Vitals com Google Search Console

🔍 5. Como Você Pode Testar

Opção 1: Google PageSpeed Insights (Grátis)

  1. Acesse: https://pagespeed.web.dev/
  2. Coloque: https://meutarotonline.com.br/
  3. Clique “Analyze”
  4. Veja relatório detalhado

Opção 2: Chrome DevTools

  1. Abra seu site no Chrome
  2. Pressione F12 → Lighthouse tab
  3. Clique “Analyze page load”
  4. Veja métricas em tempo real

6. Métricas Esperadas Pós-Otimização

Métrica Antes Depois Ganho
LCP ~2.2s ~1.8s 18%
FID ~60ms ~45ms 25%
CLS ~0.08 ~0.05 37%
Total Score 85-90 92-96 +7%

7. Roadmap White Hat SEO

✅ Completo:

  • Contextual card interpretations
  • SEO landing page optimization
  • Schema markup (Product + WebApplication)
  • Image optimization + responsive design

⏳ Próximo:

  • Core Web Vitals fine-tuning (esta fase)
  • Internal linking to Arcanos articles
  • Content expansion (mais artigos)

📞 Próximos Passos

  1. Você testa em PageSpeed Insights
  2. Eu implemento as recomendações
  3. Você aprova antes de push
  4. Fazemos commit das otimizações

Quer que eu comece com os ajustes de alta prioridade?