🇧🇷 PT← PortfolioGitHub ↗
⚡ Official Authorial Skill Chrome 143+ / Lighthouse 13+ Lighthouse 13.3 Agentic Browsing Ready

pagespeed-optimizer-alexlivre:
100/100 Web Optimization Engineering, GEO & WebMCP

The engineering skill conceived and developed by Alex Santos (alexlivre) to instruct AI agents and engineers to audit, refactor, and elevate web applications to perfect scores on Google PageSpeed Insights, mastering Core Web Vitals, generative engine readiness (GEO), and AI agent automation via WebMCP.

Inspect Code on GitHub → Explore Technical Pillars ↓
100
Performance
LCP < 2.5s · INP < 200ms
100
Accessibility
Strict WCAG 2.2 AA
100
Best Practices
0 Unload · 100% bfcache
100
Technical SEO
JSON-LD @graph & Schema
GEO
Generative Engine
Perplexity & ChatGPT Ready
MCP
WebMCP
Lighthouse 13.3 Agentic

pagespeed-optimizer-alexlivre is a specification and set of deterministic tools created by Alex Santos to automate the refactoring of web applications. Its objective is to eliminate load time and rendering bottlenecks, achieving 90-100 on Google PageSpeed Insights (Mobile and Desktop) while priming the ecosystem for generative search engines (GEO) and autonomous AI browsing (WebMCP).

Unlike naive approaches that strip vital business scripts to fake high lab scores, the skill enforces the non-negotiable Iron Law of Business Protection: no conversion tags (GTM, GA4, Meta Pixel) are deleted, and no tracking parameters (UTMs) are lost.

🚀 Surgical Core Web Vitals

LCP optimized with preload and fetchpriority="high", zero CLS via explicit dimensions and matched fallbacks, snappy INP via main-thread yielding.

🤖 Native GEO (AI Search)

Citable TL;DR blocks, speakable Schema.org markup, <dfn> entity declarations, and explicit crawler directives in robots.txt and llms.txt.

⚡ WebMCP & Agentic Browsing

Full compatibility with Lighthouse 13.3 (Chrome 149+ Origin Trial), exposing actionable tools and declarative forms to AI agents.

🛡️ Deterministic Guardrails

Mandatory verify-rules.mjs script enforcing critical rules prior to commits, preventing task completion with outstanding violations.

Pillar 01

Extreme Performance & Core Web Vitals

How the skill achieves 95-100 mobile scores under throttled 4G network emulation and 4x CPU slowdown (Google's real ranking benchmark).

⏱️

Vital Metrics Under Deterministic Control

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

🖼️ LCP (Largest Contentful Paint)

The hero element (image or banner) receives preload with fetchpriority="high". Above-the-fold lazy-loading is strictly prohibited. Critical CSS is inlined (kept under 14KB to fit within the initial 10-packet TCP/CWND window), avoiding extra network roundtrips.

⚡ INP (Interaction to Next Paint)

Main thread blockages are dismantled. JavaScript tasks exceeding 50ms are split using scheduler.yield() (with fallbacks to scheduler.postTask or setTimeout(0)). Scroll and touch listeners use { passive: true } for immediate tactile response.

📐 CLS (Cumulative Layout Shift)

Every image, SVG icon, and iframe features explicit width and height attributes, paired with CSS aspect-ratio. Web fonts use font-display: swap synchronized with metric-adjusted fallbacks (size-adjust), eliminating visual jumps during text rendering.

📦 FCP & TBT (Total Blocking Time)

Aggressive purge of dead CSS classes, modern media formats (AVIF and WebP), minification, and Brotli (br) compression. Below-the-fold resources load asynchronously or inside requestIdleCallback. 

<!-- ❌ Naive markup destroying LCP and CLS -->
<img src="hero.jpg" class="responsive-img" loading="lazy">

<!-- ✅ Engineering by pagespeed-optimizer-alexlivre -->
<link rel="preload" href="/img/hero.webp" as="image" type="image/webp" fetchpriority="high">
<img src="/img/hero.webp" alt="Primary Hero Banner" width="1200" height="630" fetchpriority="high" style="aspect-ratio: 1200/630;">
Pillar 02

Technical SEO & Semantic Architecture

Organic discovery requires airtight alignment across semantic DOM tree structure, metadata headers, and Schema.org structured data graphs.

🏷️

Foundations of a 100 SEO Score

Target: 100/100 Lighthouse SEO

🏛️ Strict Heading Hierarchy

Exactly one <h1> per document, stating the primary entity name. The heading hierarchy cascades orderly from <h2> through <h6> without skipping levels, serving both search crawlers and screen readers.

🌐 Unified JSON-LD (@graph)

Interconnected schemas unified in a single <script type="application/ld+json"> block: WebPage, BreadcrumbList, TechArticle, Person, Organization, and FAQPage, bound by canonical @id references.

🔗 Canonicalization & Metadata

Self-referencing <link rel="canonical"> tag, high-definition Open Graph and Twitter Card tags, max-image-preview:large robots directives, and strictly valid sitemap.xml indexing feeds.

📱 Mobile-First Meta Viewport

Viewport configured with width=device-width, initial-scale=1.0 without user zoom restrictions, providing flawless mobile ergonomics.

Pillar 03

GEO — Generative Engine Optimization

How to engineer web pages to be accurately cited, synthesized, and surfaced by leading AI engines: Perplexity, ChatGPT Search, Google Gemini, and AI Overviews.

🧠

Surgical Preparation for AI Discovery

Focus: High Factual Density & Citations

📊 Factual Density & TL;DR Blocks

AI search engines prioritize sources offering direct, fluff-free factual statements. The skill mandates synthesized executive summaries and semantic entity definitions using <dfn> tags.

🔊 Speakable Schema Specification

Inclusion of speakable.cssSelector in JSON-LD directly pointing to executive TL;DR sections, highlighting authoritative text chunks for voice assistants and AI synthesizers.

📋 Structured Comparative Tables

LLMs reliably extract tabular HTML data compared to loose text arrays. Comparative tables boost citation odds by over 300% as authoritative primary sources.

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

Clean documentation endpoints engineered for AI consumption via /llms.txt, featuring entity disambiguation notes and direct links to comprehensive specifications.

AI Crawler Purpose Skill Policy Business Impact
PerplexityBot / OAI-SearchBot Conversational Search & Citations Allowed (Allow: /) High-intent qualified referral traffic
GPTBot / ClaudeBot / CCBot Model Training Scraping Configurable / Selective IP protection and bandwidth conservation
Google-Extended Gemini / Vertex Model Training Optional / Strategic Separates Google Search indexing from generative training
Pillar 04

WebMCP — Web Model Context Protocol

The next web frontier: enabling AI agents to navigate, understand, and securely invoke client-side tools across your website declaratively.

🤖

Agentic Browsing (Lighthouse 13.3)

Chrome 149+ Origin Trial

🛠️ Declarative HTML Tools

WebMCP allows embedding actionable tools directly inside standard HTML using forms enriched with attributes such as <form toolname="quote_estimator">. AI browser agents can execute the action with native parameter validation.

📜 /mcp-manifest.json Manifest

Public endpoint documenting site capabilities, input schemas, and expected outputs, verified by Lighthouse 13.3's experimental Agentic Browsing audit.

🎯 Agent-Centric Accessibility

Form controls with deterministic labels, clear ARIA states, and pure semantic tags. Autonomous AI agents browse using the exact same accessibility tree utilized by screen readers.

🛡️ Sandboxing & Prompt Guard

Rigorous client and server validation of all agent-submitted payloads, neutralizing prompt injection attempts via web interfaces.

Pillar 05

Best Practices & Web Security

A perfect 100 Best Practices score demands clean console hygiene, instant page restoration compatibility, and robust security headers.

🔒

Clean Console, Events & Headers

Target: 100/100 Lighthouse Best Practices

🚫 Eradication of the 'unload' Event

The unload event is deprecated across modern browsers and destroys the bfcache (Back/Forward Cache). The skill strictly prohibits it, adopting pagehide or visibilitychange to ensure zero-millisecond history navigation.

🛡️ Hardened HTTP Headers

Full deployment of Strict-Transport-Security (HSTS), X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Referrer-Policy: strict-origin-when-cross-origin, and modern Content Security Policies (CSP).

🧹 Zero Console Warnings & Errors

Zero tolerance for uncaught exceptions, broken 404 image/font requests, corrupted sourcemaps, or deprecated web API notifications in DevTools.

🖼️ Accurate Media Aspect Ratios

All assets are delivered with intrinsic aspect ratios matching their display containers, preventing distorted rendering flags.

Pillar 06

Comprehensive Accessibility (WCAG 2.2 AA)

The web belongs to everyone. The skill rigorously applies WCAG 2.2 Level AA success criteria across the entire user journey.

♿

Inclusion & WCAG 2.2 AA Compliance

Target: 100/100 Lighthouse Accessibility

👁️ High Contrast Ratios

Minimum color contrast ratio of 4.5:1 for standard text and 3.0:1 for large text and UI controls, guaranteeing readability in any ambient lighting condition.

👆 Ergonomic Touch Targets

Buttons and links feature comfortable target dimensions (preferred 48x48px target size, with strict adherence to SC 2.5.8 minimums of 24x24px with clearance).

⌨️ Keyboard Navigation & Focus Visible

All interactive elements are reachable via Tab, displaying high-contrast :focus-visible indicators and proper scroll-padding so sticky navbars never obscure focused controls (SC 2.4.11).

🏷️ Semantic Labels & Alt Texts

Informative images feature descriptive alt text. Purely decorative visual assets are marked with alt="" aria-hidden="true" to keep screen reader flows clean.

⚖️ The Iron Law of Business Protection (Non-Negotiable)

Any amateur can hit 100 on Lighthouse by gutting tracking tags, custom typography, and conversion forms. That is vandalism disguised as optimization. The skill enforces 4 mandatory business commandments:

  • 1. Never Delete Measurement & Analytics Tools GTM, GA4, Meta Pixel, Hotmart, and CRMs are crucial for business attribution. The skill implements graceful deferral, keeping 100% of commercial telemetry active.
  • 2. Full Preservation of UTM & Click Parameters No redirect or canonical URL may strip query strings like utm_source, utm_campaign, gclid, or fbclid. Dropping parameters destroys paid media attribution.
  • 3. Never Lazy-Load Above-the-Fold Hero Media The primary hero media must load at maximum priority using fetchpriority="high".
  • 4. 100% Functional Forms and Calls to Action A website scoring 100 that fails to capture leads or has broken checkout triggers is a complete commercial failure. Performance exists to serve business outcomes—never the other way around.
Engineering in Action

How the Skill Operates

A 6-step automated workflow applied by AI agents and engineers throughout the optimization lifecycle:

1. Stack Detection & Baseline Audit

Automatically detects the underlying stack (Static HTML, React, Next.js, Vite, Astro), isolates redundant dependencies, and establishes baseline Core Web Vitals metrics.

2. Performance Refactoring

Converts imagery to WebP/AVIF, inlines critical CSS, removes render-blocking stylesheets, and schedules long JS tasks asynchronously.

3. Accessibility Remediation

Resolves contrast deficiencies, adds meaningful alt tags and ARIA labels, adjusts target sizes, and validates complete keyboard navigation.

4. Best Practices Hardening

Eliminates unload event listeners, validates complete bfcache eligibility, and applies modern HTTP security headers.

5. SEO & GEO Enrichment

Injects comprehensive JSON-LD @graph schemas, citable AI TL;DR blocks, standard /llms.txt manifests, and crawler directives in robots.txt.

6. Deterministic Gate Verification

Runs the automated validation test suite and dual-profile Lighthouse CLI audits (Mobile and Desktop) before authorizing task completion.

Frequently Asked Questions

Technical Questions & Answers

Everything you need to know about the architecture, implementation, and deployment of the skill.

What is the difference between traditional SEO and GEO?

Traditional SEO focuses on classic keyword density and SERP ranking algorithms. GEO (Generative Engine Optimization) designs semantic page structures so that large language models (powering Perplexity, ChatGPT Search, and Gemini) can reliably parse facts, directly citing your content as the primary trusted source in natural language responses.

Why does the skill strictly prohibit the 'unload' event?

Google Chrome and modern browsers have deprecated the unload event because it prevents pages from entering the bfcache (Back/Forward Cache). When visitors hit Back or Forward, an unload-encumbered site re-downloads and re-executes everything from scratch, spiking load times and hurting Lighthouse scores. The skill swaps these listeners for pagehide or visibilitychange, enabling instant 0ms restoration.

Does the skill work across frameworks like Next.js, Astro, and Vite?

Yes. The skill provides specialized blueprints and recipes for vanilla HTML/JS, Next.js (using next/image, next/font, and next/script), Astro (with zero-JS defaults and partial hydration), and Vite (with aggressive chunk splitting and CSS minification).

How can I integrate this skill into my own AI coding agents?

Simply clone or reference the skill's public repository in your agent environment (such as Claude Code, Gemini CLI, Cursor, or Antigravity). The SKILL.md file contains all actionable directives and deterministic checklists needed for autonomous, fail-safe execution.