⚡ Production Engineering Case Study: How deterministic AI agentic audits and disciplined test-driven workflows transformed real-world web performance to near-perfect Core Web Vitals on Google PageSpeed Insights.

📌 Executive Summary

In the AI-first era, modern SEO extends far beyond basic keyword density, meta descriptions, or static XML sitemaps. It demands an uncompromising engineering standard spanning Technical SEO, Core Web Vitals (LCP, INP, CLS), HTTP Security Headers (HSTS Preload, Strict CSP), and Generative Engine Optimization (GEO/AEO) to serve next-generation AI search engines such as Perplexity, ChatGPT Search, and Claude.

This engineering case study details how we integrated the deep deterministic diagnostic capabilities of Agentic-SEO-Skill with the rigorous execution guardrails of Coding Friend. By bridging automated audits with test-driven implementation, we catapulted a live Next.js production platform to 99/100 on Mobile, 100/100 on Desktop, and 100/100 SEO on Google PageSpeed Insights.

🧩 1. Why This Synergy? (The Architectural Problem)

Dimension / Role Agentic-SEO-Skill Coding Friend (CF)
Identity The Technical Auditor The Chief Implementation Engineer
Toolset 89 deterministic Python scripts, Schema validators, GEO tools cf-tdd, multi-agent code review, verification gates, cf-remember
Core Mission Deterministic evidence gathering, vulnerability detection, rubric scoring Architectural implementation, automated verification, institutional memory
Deliverables FULL-AUDIT-REPORT.md, ACTION-PLAN.md, SEO-REPORT.html Clean git commits, 100% test pass rate, docs/memory/

Core Architectural Insight:

  • An SEO audit tool alone yields a daunting backlog of issues without an engineering harness to safely implement code changes without regressions.
  • An AI coding assistant alone can write elegant code while completely missing hidden search engine signals (HSTS preload directives, MIME sniffing vulnerabilities, aspect-ratio CLS shifts, or incomplete Schema @graph entities).
💡 Agentic-SEO-Skill acts as the millisecond-accurate Diagnostic Specialist; Coding Friend acts as the disciplined Chief Surgeon.

🛠️ 2. The 6-Step Production Workflow

Step 1: Deterministic Evidence Gathering

Instead of relying on guesswork or hallucinated AI advice, Agentic-SEO-Skill triggers a deterministic suite of native scripts:

  • security_headers.py: Probes HTTPS enforcement, HSTS preload compliance, CSP directives, and clickjacking protection (X-Frame-Options).
  • llms_txt_checker.py: Verifies machine-readable AI documentation according to the llmstxt.org specification.
  • robots_checker.py & sitemap_checker.py: Validates crawler rules, disallowed internal routes, and canonical XML sitemaps.
  • entity_checker.py: Audits Schema.org JSON-LD nodes in the DOM for Google Knowledge Graph ingestion.

Step 2: Automated Report & Prioritized Action Plan

The skill synthesizes the diagnostic raw data into two definitive execution artifacts:

  • FULL-AUDIT-REPORT.md: Categorized audit scorecard with rigorous confidence ratings (Confirmed, Likely, Hypothesis).
  • ACTION-PLAN.md: Ranked execution checklist segmented into Phase 1 (Critical Infrastructure), Phase 2 (Quick Wins), and Phase 3 (Strategic Long-Term).

Step 3: Implementation Under the cf-tdd Quality Gate

Every production modification is strictly governed by Coding Friend's cf-tdd workflow gates:

  • HTTP Security Headers in next.config.ts: Enforced HSTS max-age=63072000; includeSubDomains; preload, X-Frame-Options: SAMEORIGIN, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin, and a comprehensive Content-Security-Policy.
  • Generative Engine Optimization (public/llms.txt): Deployed a structured specification summarizing engineer background, technical stack, key projects, and case studies for LLM web search agents.
  • Schema.org Knowledge Graph (app/page.tsx & app/layout.tsx): Unified WebSite, Person (with verified sameAs social profiles: LinkedIn, GitHub, Twitter/X), and ProfilePage into an interconnected @graph schema.
  • Mobile LCP Optimization (components/Hero.tsx & app/layout.tsx):
    • Replaced fixed image dimensions with responsive fill containers and adaptive sizes="(max-width: 640px) 256px, 320px".
    • Declared priority and fetchPriority="high" to trigger immediate resource discovery by browser preloaders.
    • Added <link rel="preconnect" href="https://res.cloudinary.com" /> in <head> to eliminate DNS resolution and SSL handshake latency.
    • Configured modern next-generation image compression formats (formats: ["image/avif", "image/webp"]) in next.config.ts.

Step 4: Automated Verification Suite Prior to Commit

All 55 automated quality and security tests (tests/run-all-tests.mjs) must pass 100% before committing — validating cryptographic integrity (AES-256-GCM + PBKDF2), authenticated sessions, rate limiting (429), and canonical sitemaps.

Step 5: Live Production Benchmarking (Google PageSpeed Insights)

Benchmarking the live production deployment against Google PageSpeed Insights for impartial third-party measurement across both mobile and desktop profiles.

Step 6: Institutional Knowledge Capture via cf-remember

Triggered cf-remember to document the entire architectural baseline and regression prevention checklist into docs/memory/features/2026-10-14-seo-performance-architecture.md, ensuring future code changes never degrade performance.

📊 3. Before & After Benchmark Scorecard

(Measured live on Google PageSpeed Insights for https://thhoang.io.vn)

Platform Metric Baseline Optimized (Post-Implementation) Improvement (Delta)
📱 Mobile Performance 68 / 100 🟡 99 / 100 🟢 +31 Points (LCP 3.1s ➔ 1.2s)
📱 Mobile SEO 100 / 100 🟢 100 / 100 🟢 Perfect score maintained
📱 Mobile Best Practices 82 / 100 🟢 92 / 100 🟢 +10 Points (Security Headers + CSP)
📱 Mobile Accessibility 96 / 100 🟢 96 / 100 🟢 WCAG AA Compliant
💻 Desktop Performance 100 / 100 🟢 100 / 100 🟢 LCP 0.5s, FCP 0.3s, CLS 0
💻 Desktop SEO 100 / 100 🟢 100 / 100 🟢 Flawless
🤖 AI Agents Agentic Browsing Unsupported 3 / 3 Pass 🟢 Optimized for Generative Search

💡 4. Key Architectural Takeaways for Engineers

  1. LCP is King on Mobile: Never load raw 640px or 1200px images into a 256px viewport container. Always leverage Next.js responsive sizes, fill, and fetchPriority="high".
  2. Preconnect Critical CDNs Early: Adding <link rel="preconnect" href="https://your-cdn.com" /> eliminates 300ms to 800ms of SSL handshake latency on cellular 4G/5G networks.
  3. Explicit Entity Linking via Schema @graph: Don't settle for isolated meta tags. Bind your WebSite to its Person author with verified sameAs entity links to establish authoritative Google Knowledge Graph standing.
  4. Embrace Generative Engine Optimization (GEO): Deploy a standardized /llms.txt. It functions as a structured digital business card allowing Perplexity, ChatGPT Search, and Claude to accurately reference and cite your technical expertise.
  5. Enforce Memory Discipline (cf-remember): Scoring 100 once is a sprint; keeping it at 99–100 over six months of active feature development is a marathon. Always record the technical rationale and configuration parameters into persistent project memory (docs/memory/).

🔗 References & Repositories