Products → Core Web Vitals & Performance Budget Skill Pack for Claude Code
Core Web Vitals & Performance Budget Skill Pack for Claude Code
A Claude Code skill pack that measures real Core Web Vitals in headless Chromium — LCP and CLS from the browser's own Performance Observer APIs, the exact element or resource named behind every finding, TBT reported honestly as a lab proxy for INP, never as INP itself. Plus a pass/fail guard for CI. One dependency (Playwright's Chromium — unavoidable for real paint timing), €49 once.
v1.0.0 — live. The checker was run against a real live heavy site at real scale (cnn.com: LCP 6.1s median, actual element named) and a real fast site (mulino.tools: clean). The worked outputs ship in the download (esempio/).
The problem this solves
Most "performance audits" a coding assistant can do without a real browser are guesses: counting script tags, eyeballing image sizes, reading a cached Lighthouse report from three weeks ago. None of that is a measurement. LCP and CLS are outcomes of actual rendering — what loaded when, what moved where — you need a browser that actually paints the page. A single lab run varies, and ad-heavy pages swing wildly between runs. "Total Blocking Time" and "INP" get conflated constantly: TBT is a lab number from a scripted page load, INP needs a real user interaction, and reports that quietly treat them as interchangeable are reporting a number they didn't actually measure. A missing viewport meta tag silently changes how your whole page measures on mobile, and most tools don't even check for it.
What's inside
| Skill | What it does |
|---|---|
core-web-vitals-audit | Measures real LCP/CLS in headless Chromium (throttled mobile by default, median of several runs), names the actual LCP element and every CLS-shifting element, computes TBT as a clearly-labelled lab proxy for INP, and flags render-blocking resources, badly-sized images, and a missing/broken viewport meta tag. |
perf-budget-guard | The same measurement as a binary pass/fail guard: --assert exits non-zero on an LCP/CLS budget breach. Catches a regression before it reaches production. |
Plus one helper script, cwv-check.mjs, with one unavoidable dependency (Playwright's Chromium — there is no way to measure real paint timing without a real browser), an install guide, and worked examples against real live sites.
What it is not
- It does not give you a single 0-100 score with no explanation. It names the element or resource behind every finding instead.
- It does not claim to measure INP. TBT is reported as "lab proxy for INP" every single time — never as INP itself. For real INP, that's Search Console / CrUX field data.
- It is not a SaaS. No account, no API key beyond the one-time Chromium download. Files in a folder.
Why €49
If your time is worth €50 an hour, the pack pays for itself the first time it saves you from shipping a change that silently regresses LCP or CLS for real mobile users — the kind of regression that shows up as lost conversions weeks later, traced back to a banner someone added without reserving space for it. Then it keeps checking on every deploy, which nobody was going to do by hand with a stopwatch.
What you get
- 2 skills and 1 helper script (one npm dependency: Playwright)
- Install guide (~3 minutes, mostly the one-time Chromium download) and a QA checklist showing how each skill was tested
- Worked examples: a real fast site (mulino.tools), a real heavy site (cnn.com, genuine 6+ second LCP), and a labelled synthetic fixture set exercising every check branch the two real sites didn't happen to trigger
- 12 months of updates — a bounded, honest commitment, not "lifetime"
- 30-day refund, no questions asked, through Gumroad
Requirements
- Claude Code (free)
- Node.js 18+ and Playwright's Chromium (
npm i -D playwright && npx playwright install chromium). No API keys, no account. - The site reachable over HTTP(S) — production or a preview/staging deploy.
FAQ
- Isn't this what Lighthouse/PageSpeed Insights already do?
- Those are excellent tools you should also use. This is built to run from inside Claude Code as part of a normal working session — describe the site in plain English, get a report with the same rigor without leaving your editor, plus a CI guard in the same format.
- Does TBT mean the same thing as INP?
- No. TBT is a lab metric from a scripted page load; INP is a field metric from a real user interaction. Every report labels it "TBT (lab proxy for INP)" — never INP. For real INP numbers, check Search Console.
- Why throttled by default?
- Because most real users aren't on the fast, unthrottled connection a dev
machine has. You can turn throttling off (
--no-throttle --desktop) for a deliberate best-case baseline. - Do I need to know how to code?
- No. You need Claude Code and Node.js. You describe the site in plain English and the skills run the script and read the output.
- Will you keep it updated?
- Updates for 12 months from purchase, through your Gumroad library and logged in a changelog. After that the version you have keeps working; further updates are not included. Deliberately not a "lifetime" promise.
AI disclosure
The skills are written instructions for an AI coding assistant and were authored with AI assistance. The helper script is conventional code and reports only measured values — no invented metrics, ratings, or stats anywhere in the product or on this page.
Sixth in the mulino.tools technical-SEO/performance set for Claude Code: the Technical SEO Skill Pack audits and fixes an existing site, the Site Migration & Redirects Skill Pack covers the replatform/relaunch moment, the Rendering & JavaScript SEO Skill Pack covers the raw-vs-rendered gap JS frameworks introduce, the Robots, Sitemap & Crawl-Directives Skill Pack covers robots.txt vs sitemap.xml, the Hreflang & International SEO Skill Pack covers hreflang reciprocity across your whole locale graph, and this one covers real Core Web Vitals measurement plus a performance-budget CI guard.