Frontend Performance & 100 Lighthouse — 0ms TBT & 3-Tier Viewport Protocol
Battle-tested Core Web Vitals (LCP, INP, CLS, 0ms TBT) and 100/100 Lighthouse engineering playbook by Dương Phúc Khánh (khanhdp.com).
Free
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsAbout this skill
Achieve 0ms Total Blocking Time (TBT), 100/100 Lighthouse Performance, 100/100 Accessibility, 100/100 Agentic Browsing, and All-Green Core Web Vitals on throttled mobile and desktop devices without sacrificing user experience, tracking accuracy, or visual fidelity.
This skill equips AI agents and frontend engineers with battle-tested architectural patterns across the browser runtime:
- The 3-Tier Viewport & Dynamic Overlay Protocol (eliminating chunk bloat and layout shifts).
- Pure Interaction-Driven Lossless Telemetry (0ms TBT with 100% event capture).
- Core Web Vitals Optimization Engine (LCP, INP, CLS = 0, and TBT = 0ms).
- Invisible Auth Iframe Elimination (lazy guest authentication, instant JWT rehydration).
- Resource Hint & Font Hygiene (self-hosted preloaded fonts,
font-display: optional, eliminating unused preconnects). - Main Thread Protection (
content-visibility: auto, image decoding, zero-redirect rewrites). - 100% Agentic Browsing & WCAG AA Accessibility (
llms.txt, deterministic DOM geometry, dark craft contrast).
Google evaluates page experience using the Chrome User Experience Report (CrUX) over a 28-day rolling window at the 75th percentile (p75) of real-world mobile and desktop user sessions:
| Metric | Google Standard (Good) | Production Target | Needs Improvement | Poor | Primary Root Cause & Fix |
|---|---|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 1.5s | 2.5s - 4.0s | > 4.0s | Slow server TTFB, unoptimized hero images, render-blocking JS/CSS |
| INP (Interaction to Next Paint) | ≤ 200ms | ≤ 50ms | 200ms - 500ms | > 500ms | Long tasks (>50ms) on main thread, heavy event handlers, layout thrashing |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.05 (Target 0) | 0.1 - 0.25 | > 0.25 | Images/embeds without dimensions, unsized dynamic modules, web font swap |
| FCP (First Contentful Paint) | ≤ 1.8s | ≤ 0.9s | 1.8s - 3.0s | > 3.0s | Render-blocking CSS/JS in head, slow DNS/TLS/TTFB |
| TTFB (Time to First Byte) | ≤ 800ms | ≤ 150ms (Edge) | 800ms - 1800ms | > 1800ms | Origin server latency, lack of Edge caching / Cloudflare 0-RTT |
| TBT (Total Blocking Time - Lab) | ≤ 200ms | 0ms (Budget: ≤ 50ms) | 200ms - 600ms | > 600ms | Eager 3rd-party scripts (GA4/Clarity), heavy static modals, auth iframes |
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scan
Security scan passed 3 days ago
- Free with an Agensi account
Requires
Node.jsPermissions
Allowed Hosts