Análise integrada de estrutura, UX/UI, carregamento e diagramação. Combina métricas oficiais do PageSpeed Insights (Lighthouse 13.3.0 · Moto G Power emulado · 4G lenta · 26/05/2026), medição direta dos assets via HTTP, e análise estática do HTML/CSS/JS embarcado.
Design system bem resolvido e estrutura semântica limpa, mas arruinada por imagens absurdamente pesadas que produzem LCP de 55,9 segundos no perfil mobile — métrica que invalida qualquer outro acerto na hora de converter tráfego pago.
Quase 1 minuto para o conteúdo principal aparecer. No filmstrip do Lighthouse, os 3 primeiros frames mostram a página completamente branca. Em tráfego pago via Meta Ads, essa página perde mais de 80% dos visitantes antes mesmo de renderizar.
Causa raiz isolada: a imagem do Dr. Salik no hero
(DR. FLÁVIO SALIK 4.png) tem 9,76 MB e é carregada com
loading="eager". Esse único arquivo, em conexão 4G lenta, demora ~50s para baixar.
Otimização desta imagem (WebP/AVIF + compressão) reduz o LCP em ~95% sem
tocar em nenhuma outra parte da página.
A página inicial pesa 10,67 MB de payload antes mesmo do above-the-fold ficar pronto, contra os ~1,5 MB de uma LP otimizada. 97% desse peso é imagem.
| Recurso | Tipo | Loading | Tamanho | Diagnóstico |
|---|---|---|---|---|
| workshop-ombro/ | HTML | — | 75 KB | OK |
| DR. FLÁVIO SALIK 4.png | Hero (LCP) | eager | 9,76 MB | CAUSA RAIZ DO LCP |
| DR. FLÁVIO SALIK 2.png | Sobre o instrutor | lazy | 16,25 MB | Maior arquivo da página |
| 3d-male-medical-figure...jpg | Para quem é | lazy | 4,83 MB | JPG não otimizado |
| LOGO - SALIK INSTITUTE.svg | Logo (header + footer) | — | 732 KB | SVG provavelmente com bitmap embedded |
| fonts.googleapis.com/css2 | CSS de fontes | render-blocking | ~3 KB | Bloqueia render (~930ms) |
| Playfair + DM Sans WOFF2 | 10 arquivos de fonte | swap | ~200 KB | Excesso de pesos carregados |
| beacon.min.js | Cloudflare Insights | defer | ~7 KB | OK |
| Problema | Economia | Severidade |
|---|---|---|
| Melhorar a entrega de imagens | 9.987 KiB | P0 |
| Solicitações que bloqueiam a renderização | 930 ms | P0 |
| Trabalho da thread principal | 4,9 s | P1 |
Elementos de imagem sem width/height | — | P1 |
| Payload de rede muito grande | 10.673 KiB | P1 |
| Tarefas longas (long tasks) | 6 ocorrências | P1 |
| Reflow forçado | — | P1 |
| Animação não composta | 1 elemento | P2 |
| Ciclos de vida eficientes de cache | 5 KiB | P2 |
O Lighthouse identifica como elemento LCP a imagem do Dr. Salik no hero. Em conexão 4G simulada (1,6 Mbps download), baixar 9,76 MB custa aproximadamente:
9.760.000 bytes × 8 bits = 78.080.000 bits 78.080.000 bits ÷ 1.600.000 bps ≈ 48,8 segundos só de download + DNS + TLS + TTFB + parse + paint ≈ 55,9 s reportado pelo PageSpeed
Meta do Google: LCP ≤ 2,5s. Com otimização correta da imagem (WebP qualidade 80, redimensionada para o tamanho real de exibição), o mesmo arquivo deveria pesar entre 80 KB e 150 KB — redução de até 120x.
requestAnimationFrame contínuo,
desenhando linhas entre partículas próximas (loop O(n²)). Mais mix-blend-mode: multiply na foto
do Dr. Salik e backdrop-filter: blur em múltiplos elementos. Em mobile médio, drena bateria
continuamente. Considerar pausar quando o canvas sai do viewport.
defer
11 blocos verticais bem delimitados, cada um com <section id="...">, seguindo arco clássico
de página de vendas (dor → solução → autoridade → prova → oferta → objeções).
#inicioLogo + urgency badge · Tag · H1 com 3 linhas (display/italic/display) · Lead · Countdown live · CTA primário + secundário · Garantia · Foto Dr. Salik full-height · Stats bar (5.000/20/16h/98%)
#dores5 cards grid (diagnósticos confusos, protocolos inconsistentes, evolução insatisfatória, exercícios sem critério, testes em excesso). Background gray-100, ícone emoji, hover lift.
#workshop3 pilares numerados (Avaliação Clínica · Protocolos baseados em evidências · Técnicas Manuais Avançadas). Background navy, cards com backdrop-filter.
#para-quemGrid 50/50 · Imagem 3D do ombro com badge "16h de prática" + lista de 5 itens com check verde. Mobile colapsa em 1 coluna.
#conteudo8 módulos em grid auto-fit (anatomia, diagnóstico diferencial, testes, protocolos, terapia manual, exercícios, casos clínicos, Q&A bonus). Background gray-100.
#sobreGrid 50/50 navy · Foto com badge "20+ anos" · Bio + 6 credenciais em pill format. Mobile colapsa.
#depoimentos3 cards (Mariana SP · Rafael BH · Paula PR) · 5 stars · avatar com iniciais (não foto real) · cidade.
#bonus4 cards 2-colunas (Apostila R$197 · Comunidade R$97 · Certificado · Gravação 30 dias R$297) · Total R$591 destacado. Background navy gradient.
#ofertaDe R$997 por R$497 · 12x R$46,90 · CTA primário grande · Caixa de garantia 7 dias · Pagamento seguro
#faqAccordion de 5 perguntas (formato presencial/online · experiência prévia · certificado · ausência · garantia)
Logo · links (Política · Termos · Contato) · disclaimer COFFITO · copyright
<section>, <nav>, <footer>, <article> implícito nos cards#oferta, mas o CTA da oferta leva para #O botão "Garantir Minha Vaga Agora" na seção de oferta tem href="#" (link morto).
Quem chegou ali e clicou: nada acontece, scroll volta pro topo. Conversão zero a partir do hot moment.
Não há integração com gateway (Hotmart, VOOMP, Eduzz). Os CTAs todos apontam para anchors internas ou hash vazio. A página atual não consegue vender.
JS faz new Date(); setDate(+10) — toda visita o countdown reinicia em 10 dias. Falsa urgência detectável; quebra de credibilidade se o usuário visitar 2x.
position: fixed sem safe-area-inset-bottomEm iPhones com home indicator, pode ficar sobreposto à barra do sistema. Adicionar padding-bottom: env(safe-area-inset-bottom).
Direção de arte e linguagem visual acima da média para o nicho. Problema é operacional: CTAs quebrados, prova social fraca e algumas escolhas que sangram credibilidade.
O botão "Garantir Minha Vaga Agora" não leva a lugar nenhum. Toda a copy converge para um buraco.
3 depoimentos com avatares de iniciais (MC/RL/PS) reduzem percepção de prova social genuína. Em saúde profissional, foto + crachá CREFITO/CRF vale 10x mais que ★★★★★.
Sem fonte, sem print, sem evidência. Stats anônimos em LP de saúde acionam ceticismo no avatar profissional (fisioterapeuta busca evidência).
.hero-ctas .btn-outline { display: none; } em ≤768px. "Conhecer o Dr. Salik" some — mas é justamente onde a autoridade do expert precisa ser apresentada antes do CTA.
Mas o resto da copy não menciona cidade/data. Conflito: usuário vai até FAQ buscar informação que deveria estar no hero ou perto da oferta.
Hero, oferta e FAQ todos repetem "garantia de 7 dias". Reforçar tudo bem, mas se for redundância textual literal, parece encheção. Variar abordagem por contexto.
13 pontos foram subtraídos. Sem o relatório detalhado a verificar, mas a leitura do código aponta:
aria-label nem role--text-mute sobre navy pode estar abaixo de 4.5:1 em alguns trechosonerror inline na logo é fallback inteligente, mas usa style.display direto (não muda aria-hidden)data-count animadas — leitor de tela vai ler "0" inicialmente; considerar aria-live="polite" ou marcar o valor final em aria-labelA página usa CSS custom properties organizadas, escala tipográfica fluida e breakpoints racionais. Boa base.
--gold armazena #1BBCD4, que é um ciano/teal, não dourado.
Naming confunde quem vai dar manutenção e quem revisa o design system. Sugestão: renomear para
--accent ou --cyan.
| Elemento | Tamanho | Peso | Família |
|---|---|---|---|
| Hero title (H1) | clamp(2.6rem, 3vw, 3rem) | 900 | Playfair Display |
| Section title (H2) | clamp(1.8rem, 4vw, 3rem) | 700 | Playfair Display |
| Card title (H3/H4) | 1rem – 1.2rem | 700 | Playfair Display |
| Body | 16px | 400 | DM Sans |
| Section label | 0.75rem | 700 | DM Sans |
| Preço grande | clamp(4rem, 10vw, 7rem) | 900 | Playfair Display |
| BP | Largura | Mudanças principais |
|---|---|---|
| desktop | ≥ 1025px | Layout completo; pilares 3 colunas; grids 50/50 |
| tablet | ≤ 1024px | Pilares 1 coluna; sobre/para-quem colapsam; depoimentos 1 coluna; bônus 1 coluna |
| mobile | ≤ 768px | Hero stacka (foto vai pra baixo); btn-outline some; floating CTA aparece; dores em 1 coluna |
| small | ≤ 480px | H1 reduz para 1.55rem; countdown encolhe; section-title force 1.6rem |
| xs | ≤ 375px | iPhone SE; H1 1.4rem; countdown 1.3rem |
clamp(60px, 8vw, 100px) clamp(20px, 5vw, 40px) — escala bem entre breakpoints@keyframes pulse-badge — pulso no urgency badge (2s loop)@keyframes blink — dot piscando (1.4s loop)transform (composto pela GPU — ótimo). Já animações de keyframe
no badge usam box-shadow e a do countdown muda textContent com setTimeout (causa
pequenos reflows). O canvas de partículas roda em loop infinito mesmo quando fora do viewport.
A página tem apenas Cloudflare Insights instalado. Nenhum GTM, nenhum Meta Pixel, nenhum Google Analytics, nenhuma instrumentação de conversão. Se essa LP recebe tráfego pago, não há como otimizar o funil.
| Ferramenta | Status | Função esperada |
|---|---|---|
| Cloudflare Insights | Instalado | Web vitals básicos |
| Google Tag Manager | Ausente | Orquestração de pixels e eventos |
| Google Analytics 4 | Ausente | Sessões, funil, atribuição |
| Meta Pixel | Ausente | Otimização de Meta Ads + retargeting |
| Pixel de checkout (VK/Hotmart) | Ausente | Atribuição de venda |
| Hotjar / Clarity | Ausente | Heatmaps + sessões para diagnóstico UX |
| UTM passthrough no checkout | N/A | (não existe checkout configurado) |
DR. FLÁVIO SALIK 4.png é PNG sem otimização, carregada com loading="eager".
Em 4G, demora ~50s só para baixar. É o gargalo único e isolado da página.
Converter para WebP/AVIF, redimensionar para 1200×... (uso real), qualidade 80. Servir via
<picture> com fallback. Alvo: 80–150 KB. Adicionar fetchpriority="high".
Reduz LCP de 55,9s para ~2-3s.
# (link morto)Botão "Garantir Minha Vaga Agora" na seção #oferta tem href="#".
Clicar não leva a checkout — apenas faz scroll para o topo da página. A página não consegue vender.
Apontar para checkout (Hotmart/VOOMP/Eduzz) com UTMs preservadas. Repetir o mesmo link no CTA do hero e no floating CTA mobile.
Página não consegue medir conversão, retargetar visitantes, otimizar campanhas. Tráfego pago atual (se houver) está cego.
Instalar GTM, configurar GA4 + Meta Pixel + (se houver checkout) pixel do gateway. Adicionar
eventos: page_view, cta_click, scroll_50, scroll_90,
faq_open, checkout_init.
DR. FLÁVIO SALIK 2.png (16,25 MB) e 3d-male-medical-figure...jpg (4,83 MB)
estão lazy-loaded, então não pegam o LCP — mas quando o usuário rola a página, ele baixa 21 MB.
Em mobile com plano de dados, predatório.
Mesmo tratamento: WebP/AVIF + resize + qualidade 80. Adicionar width/height
explícitos em todas as <img> (PageSpeed já alertou).
10 arquivos de fonte sendo carregados (6 pesos de Playfair Display + 4 de DM Sans), CSS no
<head> bloqueando renderização. Em muitos casos, só 2-3 pesos são realmente usados.
Auditar pesos efetivamente usados (provavelmente 400 + 700 de cada). Self-host as fontes em
WOFF2 + font-display: swap + <link rel="preload" as="font">. Ganho 400-600ms no FCP.
60 partículas + connections (loop O(n²)) com requestAnimationFrame infinito,
mesmo quando o hero está fora do viewport. Consome bateria e CPU mobile.
Pausar a animação quando o hero não está visível (IntersectionObserver). Em mobile, considerar desativar completamente ou reduzir para 20 partículas sem connections.
"MC", "RL", "PS" como avatar. Cidade e profissão sem comprovação. Em nicho de saúde profissional, isso aciona ceticismo. O avatar (fisioterapeuta) é exigente.
Substituir por fotos reais, com CREFITO visível e link para Instagram público. Idealmente 1 vídeo curto (30s) + 2 escritos. Adicionar "Fisioterapeuta · CREFITO 12345-F · Atende em [bairro]".
JS faz new Date(); setDate(now + 10) — toda visita o relógio começa do zero.
Usuário que volta na semana seguinte vê os mesmos "10 dias restantes". Detectável em 1 minuto.
Definir data-alvo real no código (new Date('2026-06-XX')) ou persistir em localStorage.
Ou remover o countdown e usar contagem regressiva de vagas. Falsa urgência detectada destrói confiança.
aria-labelFAQ chevron, setas dos CTAs, ícones de credenciais — todos sem rótulo acessível. Leitor de tela vai pular ou anunciar "botão".
Adicionar aria-hidden="true" nos SVGs decorativos (dentro de elementos com texto)
e aria-label nos botões standalone. Score A11y sobe de 87 para ~95+.
width/height explícitosFlagged pelo PageSpeed. Hoje CLS=0 porque o aspect-ratio é definido via CSS no wrapper, mas é frágil — qualquer mudança quebra.
Adicionar atributos width e height em todas as <img> (com
valores intrínsecos da imagem). Garante CLS=0 estável independente do CSS.
Score SEO 100 do PageSpeed mede só fundamentos. Mas a página não tem <meta property="og:...">
nem <link rel="icon">. Compartilhamentos no WhatsApp/Instagram mostram preview genérico.
Adicionar OG image 1200×630, OG title, OG description, Twitter card, favicon (ICO + PNG 512px).
SVG vetorial real raramente passa de 20 KB. 732 KB sugere que tem um PNG/JPG embedded como base64, ou paths complexos demais.
Reexportar logo a partir do arquivo vetorial original (Illustrator/Figma) limpo, ou recriar como SVG inline simples. Alvo: ≤ 10 KB.
--gold armazena cianoNaming engana. Quem entra no código achando que vai alterar dourado, altera ciano.
Renomear para --accent ou --cyan via search/replace nos ~40 usos.
safe-area-inset-bottomiPhones com home indicator podem ter sobreposição visual.
padding-bottom: max(12px, env(safe-area-inset-bottom)) na .floating-cta.
Os 4 primeiros itens resolvem 80% do problema crítico em meio dia de trabalho e desbloqueiam a página para tráfego pago.
Converter para WebP/AVIF, redimensionar para uso real, qualidade 80. Logo SVG limpo.
Subir produto em Hotmart/VOOMP, gerar link, plugar nos 3 CTAs (hero, oferta, floating mobile).
Container GTM no head, configurar eventos básicos. Sem isso, ads voam às cegas.
Manter só 400 + 700 de cada família. WOFF2 + preload + font-display:swap.
width/height em todas as imagensGarante CLS=0 estável e remove warning do PageSpeed.
3 depoimentos genuínos valem mais que 30 fake. Idealmente 1 em vídeo.
Hardcode da data do evento ou use persistência local. Falsa urgência destrói confiança.
IntersectionObserver na seção hero, parar/retomar o requestAnimationFrame.
Score A11y de 87 para 95+.
Previews bonitos em WhatsApp/Instagram/X. Aumenta CTR de compartilhamentos orgânicos.
Auditoria gerada por análise estática + dados oficiais do PageSpeed Insights (Lighthouse 13.3.0).
SALIK INSTITUTE · Squad Turbo v3.0 · 26/05/2026