🇺🇸 EN← PortfólioGitHub ↗
⚡ Skill Autoral Oficial Chrome 143+ / Lighthouse 13+ Lighthouse 13.3 Agentic Browsing Ready

pagespeed-optimizer-alexlivre:
Engenharia de Otimização Web 100/100, GEO & WebMCP

A skill de engenharia concebida e desenvolvida por Alex Santos (alexlivre) para instruir agentes de IA e engenheiros a auditar, refatorar e elevar aplicações web a notas perfeitas no Google PageSpeed Insights, garantindo domínio nos Core Web Vitals, prontidão para motores generativos (GEO) e automação por agentes com WebMCP.

Inspecionar Código no GitHub → Explorar Pilares Técnicos ↓
100
Performance
LCP < 2.5s · INP < 200ms
100
Acessibilidade
WCAG 2.2 AA Estrito
100
Melhores Práticas
0 Unload · 100% bfcache
100
SEO Técnico
JSON-LD @graph & Schema
GEO
Generative Engine
Perplexity & ChatGPT Ready
MCP
WebMCP
Lighthouse 13.3 Agentic

pagespeed-optimizer-alexlivre é uma especificação e conjunto de ferramentas determinísticas criadas por Alex Santos para automatizar a refatoração de projetos web. Seu objetivo é eliminar gargalos de tempo de carregamento e renderização, atingindo 90-100 no Google PageSpeed Insights (Mobile e Desktop) e preparando o ecossistema para motores de busca generativos (GEO) e navegação autônoma por IA (WebMCP).

Diferente de abordagens ingênuas que removem scripts vitais de negócio para fingir altas pontuações de laboratório, a skill adota como pré-requisito a Regra de Ferro da Proteção ao Negócio: nenhuma tag de conversão (GTM, GA4, Meta Pixel) é deletada e nenhum parâmetro UTM é perdido.

🚀 Core Web Vitals Cirúrgicos

LCP otimizado com preload e fetchpriority="high", CLS zerado com dimensionamento explícito e fontes ajustadas, INP rápido com yield da thread principal.

🤖 GEO (IA Search) Nativo

Blocos TL;DR citáveis, propriedades speakable no Schema.org, definições <dfn> e diretivas explícitas para crawlers no robots.txt e llms.txt.

⚡ WebMCP & Agentic Browsing

Compatibilidade total com o Lighthouse 13.3 (Chrome 149+ Origin Trial), expondo ferramentas e formulários acionáveis para agentes de IA.

🛡️ Guardrail Determinístico

Script mandatória verify-rules.mjs que valida regras críticas antes do commit, proibindo encerramento de tarefas com qualquer falha pendente.

Pilar 01

Performance Extrema & Core Web Vitals

Como a skill alcança notas 95-100 em dispositivos móveis sob emulação de rede 4G throttled e 4x CPU slowdown (o padrão real de ranqueamento do Google).

⏱️

Métricas Vitais Sob Controle Determinístico

Target: LCP < 2.5s | INP < 200ms | CLS < 0.1

🖼️ LCP (Largest Contentful Paint)

O elemento herói (hero image ou banner) recebe preload com atributo fetchpriority="high". Lazy-loading acima da dobra é estritamente proibido. O CSS crítico é embutido inline (mantido abaixo de 14KB para caber na primeira janela TCP/CWND de 10 pacotes), evitando roundtrips extras de rede.

⚡ INP (Interaction to Next Paint)

Eliminação de bloqueios na main thread. Tarefas JavaScript superiores a 50ms são particionadas usando scheduler.yield() (com fallback para scheduler.postTask ou setTimeout(0)). Listeners de scroll e touch utilizam { passive: true } para respostas táteis imediatas.

📐 CLS (Cumulative Layout Shift)

Toda imagem, ícone SVG e iframe possui atributos explícitos width e height, complementados por aspect-ratio no CSS. As fontes utilizam font-display: swap associado a métricas de fallback sincronizadas (size-adjust), erradicando saltos visuais no carregamento de texto.

📦 FCP & TBT (Tempo de Bloqueio Total)

Purga agressiva de classes CSS mortas, compressão moderna (AVIF e WebP), minificação de código e distribuição sob compressão Brotli (br). Recursos que não afetam a primeira dobra são carregados de forma assíncrona ou no evento requestIdleCallback. 

<!-- ❌ Código Ingênuo que destrói o LCP e o CLS -->
<img src="hero.jpg" class="responsive-img" loading="lazy">

<!-- ✅ Engenharia da skill pagespeed-optimizer-alexlivre -->
<link rel="preload" href="/img/hero.webp" as="image" type="image/webp" fetchpriority="high">
<img src="/img/hero.webp" alt="Hero Principal" width="1200" height="630" fetchpriority="high" style="aspect-ratio: 1200/630;">
Pilar 02

SEO Técnico & Arquitetura Semântica

A indexação orgânica requer consistência rígida entre árvore semântica do DOM, cabeçalhos de metadados e grafos de dados estruturados Schema.org.

🏷️

Fundamentos do Score 100 de SEO

Target: 100/100 Lighthouse SEO

🏛️ Hierarquia Estrita de Heading Tags

Uma única tag <h1> por documento, contendo o nome explícito da entidade principal. A árvore de títulos desce estritamente de <h2> a <h6> sem nunca pular níveis estruturais para atender a robôs e leitores de tela.

🌐 Grafo Unificado JSON-LD (@graph)

Implementação de schemas interconectados em um único bloco <script type="application/ld+json">: WebPage, BreadcrumbList, TechArticle, Person, Organization e FAQPage, amarrados por identificadores canônicos @id.

🔗 Canonização & Metadados Canônicos

Tag <link rel="canonical"> auto-referenciada, metatags Open Graph (Facebook/LinkedIn) e Twitter Cards em alta definição, diretivas max-image-preview:large e arquivos de indexação sitemap.xml estritamente válidos.

📱 Meta Viewport & Mobile-First

Viewport configurado para width=device-width, initial-scale=1.0 sem bloqueios artificiais de zoom pelo usuário, garantindo usabilidade total em smartphones.

Pilar 03

GEO — Generative Engine Optimization

Como otimizar a página para ser citada, sintetizada e recomendada com precisão por motores de IA: Perplexity, ChatGPT Search, Google Gemini e Google AI Overviews.

🧠

Preparação Cirúrgica para Pesquisas por IA

Foco: Alta Densidade Factual & Citações

📊 Factual Density & Blocos TL;DR

Motores de IA priorizam fontes que entregam respostas objetivas, fatos sem enrolação e definições diretas. A skill exige um resumo executivo sintetizado e a declaração de entidades usando a tag semântica <dfn>.

🔊 Speakable Specification no Schema

Inclusão de speakable.cssSelector no JSON-LD referenciando diretamente os blocos TL;DR, sinalizando para assistentes de voz e mecanismos de resposta generativa quais trechos são fontes primárias de síntese.

📋 Tabelas Comparativas Estruturadas

LLMs assimilam matrizes de dados de forma significativamente mais confiável em formato tabular HTML do que em listas soltas de texto. Tabelas comparativas aumentam em mais de 300% as chances de citação como fonte de autoridade.

📄 llms.txt & llms-full.txt (Answer.AI Spec)

Criação de versões de documentação prontas para consumo por agentes e LLMs no formato padrão /llms.txt, contendo nota de desambiguação de entidade (Entity Disambiguation Note) e links diretos para especificações completas.

Crawler de IA Finalidade Política da Skill Benefício ao Negócio
PerplexityBot / OAI-SearchBot Busca conversacional & Citação Permitido (Allow: /) Tráfego qualificado de referência direta
GPTBot / ClaudeBot / CCBot Scraping para treino de modelos Configurável / Seletivo Proteção de propriedade intelectual e economia de banda
Google-Extended Treino Gemini / Vertex Opcional / Conforme estratégia Separação entre indexação do Google Search e treino de IA
Pilar 04

WebMCP — Web Model Context Protocol

A nova fronteira da web: permitir que agentes de inteligência artificial naveguem, compreendam e acionem ferramentas no seu site de forma declarativa e segura.

🤖

Navegação Agêntica (Lighthouse 13.3)

Chrome 149+ Origin Trial

🛠️ Ferramentas Declarativas no HTML

O WebMCP permite embutir ferramentas acionáveis diretamente no HTML usando formulários enriquecidos com atributos como <form toolname="calcular_orcamento">. Agentes de IA que operam navegadores podem invocar a ferramenta com parâmetros validados nativamente.

📜 Manifesto /mcp-manifest.json

Exposição de um endpoint de manifesto descrevendo capacidades, schemas de entrada e saídas de cada ferramenta web, auditado pela categoria experimental Agentic Browsing do Lighthouse 13.3.

🎯 Acessibilidade Centrada em Agentes

Inputs com labels determinísticos, estados ARIA explícitos e semântica pura. Agentes de IA navegam pela mesma infraestrutura de acessibilidade usada por leitores de tela humanos.

🛡️ Sandbox & Prevenção de Injeção

Validação rigorosa no cliente e no servidor de todos os payloads submetidos por automações e agentes, mitigando ataques de prompt injection via interface web.

Pilar 05

Melhores Práticas & Segurança Web

Pontuação 100 em Best Practices no Lighthouse exige higiene absoluta de eventos, compatibilidade com restauração instantânea de páginas e cabeçalhos de defesa.

🔒

Higiene de Console, Eventos e Cabeçalhos

Target: 100/100 Lighthouse Best Practices

🚫 Erradicação do Evento 'unload'

O evento unload foi descontinuado nos navegadores modernos e destrói o bfcache (Back/Forward Cache). A skill proíbe terminantemente seu uso, substituindo-o por pagehide ou visibilitychange para garantir restaurações instantâneas de histórico.

🛡️ Cabeçalhos HTTP de Proteção

Configuração de Strict-Transport-Security (HSTS), X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: strict-origin-when-cross-origin e políticas de Content Security Policy (CSP).

🧹 Zero Erros de Console

Tolerância zero a exceções não tratadas, links 404 quebrados para imagens/fontes, sourcemaps corrompidos ou avisos de APIs obsoletas no console de desenvolvimento.

🖼️ Formatos e Resoluções Corretas

Todas as imagens fornecidas possuem proporção compatível com seu container de exibição na tela, evitando avisos de renderização com distorção de aspect-ratio.

Pilar 06

Acessibilidade Total (WCAG 2.2 AA)

A web deve ser acessível a todas as pessoas e dispositivos. A skill aplica de forma irrestrita os critérios de sucesso do WCAG 2.2 nível AA.

♿

Inclusão e Conformidade WCAG 2.2 AA

Target: 100/100 Lighthouse Accessibility

👁️ Relação de Contraste Superior

Relação de contraste de cores mínima de 4.5:1 para texto normal e 3.0:1 para textos grandes ou componentes de interface, assegurando legibilidade em qualquer ambiente de luminosidade.

👆 Touch Targets Confortáveis

Botões, links e controles interativos possuem dimensões mínimas adequadas (alvo preferencial de 48x48px, com respeito rigoroso ao critério SC 2.5.8 de 24x24px com espaçamento de segurança).

⌨️ Navegação por Teclado & Foco Visível

Todos os elementos interativos são acessíveis via tecla Tab, com anéis de contorno :focus-visible de alto contraste e scroll-padding para evitar que cabeçalhos fixos ocultem o elemento focado (SC 2.4.11).

🏷️ Rótulos & Textos Alternativos

Imagens com conteúdo informativo possuem atributos alt detalhados. Elementos gráficos puramente decorativos recebem alt="" aria-hidden="true" para não poluir leitores de tela.

⚖️ A Regra de Ferro da Proteção ao Negócio (Não-Negociável)

Qualquer desenvolvedor amador consegue tirar nota 100 no Lighthouse deletando todos os scripts de rastreamento, fontes personalizadas e formulários de captura. Isso é vandalismo disfarçado de otimização. A skill impõe 4 mandamentos comerciais obrigatórios:

  • 1. Nunca Delete Ferramentas de Mensuração GTM, GA4, Meta Pixel, Hotmart e CRMs são indispensáveis para atribuição de vendas. A skill realiza o adiamento gracioso (graceful deferral), mantendo 100% dos dados comerciais ativos.
  • 2. Preservação Total de Parâmetros UTM Nenhum redirecionamento ou link canônico pode descartar query strings como utm_source, utm_campaign, gclid ou fbclid. Perder parâmetros é quebrar o ROI de mídia paga.
  • 3. Nunca Aplique Lazy-Load na Mídia Herói A imagem ou vídeo que compõe a primeira dobra deve carregar na velocidade máxima absoluta com fetchpriority="high".
  • 4. Formulários e CTAs 100% Funcionais Um site com nota 100 que não registra conversões ou cujo botão de compra trava é um fracasso completo. A performance serve ao negócio, e nunca o oposto.
Engenharia em Ação

Como a Skill Opera na Prática

Fluxo de 6 etapas automatizadas aplicadas por agentes de IA e engenheiros durante o ciclo de otimização:

1. Detecção de Stack & Baseline

Identifica automaticamente o framework (HTML puro, React, Next.js, Vite, Astro), detecta assets duplicados e estabelece o benchmark inicial de Core Web Vitals.

2. Refatoração de Performance

Converte imagens para WebP/AVIF, isola o CSS crítico, elimina recursos render-blocking e aplica particionamento assíncrono de tarefas JS.

3. Adequação de Acessibilidade

Corrige contrastes, insere textos alternativos e labels semânticos, garante dimensões de toque e testa navegação por teclado.

4. Blindagem de Melhores Práticas

Elimina listeners de evento unload, verifica compatibilidade total com o bfcache e aplica cabeçalhos de segurança HTTP modernos.

5. Enriquecimento de SEO & GEO

Gera schemas JSON-LD @graph completos, blocos TL;DR citáveis por IA, documentação /llms.txt e diretivas de rastreamento no robots.txt.

6. Gate Determinístico de Verificação

Executa a suíte de validação automatizada e auditorias com o Lighthouse CLI em perfis Mobile e Desktop antes de autorizar a entrega.

Dúvidas Frequentes

Perguntas & Respostas Técnicas

Tudo o que você precisa saber sobre a arquitetura e aplicação da skill.

Qual a diferença entre SEO tradicional e GEO?

O SEO tradicional foca em algoritmos de busca clássicos baseados em palavras-chave e ranqueamento de links azuis (Google SERP). O GEO (Generative Engine Optimization) projeta a estrutura semântica para que modelos de linguagem de grande escala (como os que alimentam Perplexity, SearchGPT e Gemini) consigam extrair fatos com facilidade, citando a sua página como a fonte primária e confiável na resposta gerada em linguagem natural.

Por que a skill proíbe o evento 'unload'?

O Google Chrome e outros navegadores modernos descontinuaram o evento unload porque ele impede que a página seja armazenada no bfcache (Back/Forward Cache). Quando o usuário clica no botão "Voltar" ou "Avançar", um site com unload é obrigado a baixar e reexecutar tudo do zero, gerando lentidão e piorando a nota no Lighthouse. A skill substitui esses listeners por pagehide ou visibilitychange, permitindo restaurações em 0 milissegundos.

A skill funciona em frameworks como Next.js, Astro e Vite?

Sim. A skill inclui recipes e diretrizes especializadas para HTML/JS estático, Next.js (com next/image, next/font e next/script), Astro (com processamento nativo de mídias e ilhas de hidratação) e Vite (com chunk splitting e minificação refinada de CSS).

Como posso utilizar essa skill nos meus agentes de IA?

Basta clonar ou referenciar o repositório público da skill no seu ecossistema de agentes (como Claude Code, Gemini CLI, Cursor ou Antigravity). O arquivo SKILL.md contém todas as diretrizes acionáveis e checklists determinísticos para que o agente opere de forma autônoma e à prova de falhas.