Webperf Core Web Vitals
Intelligent Core Web Vitals analysis with automated workflows and decision trees.
Install
npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals -g -a claude-code -y- Repository
- nucliweb/webperf-snippets1.5k
- Category
- Testing
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,929 tokens
- Runs scripts
- Yes, review before use
What it does
Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.
WebPerf: Core Web Vitals
JavaScript snippets for measuring web performance in Chrome DevTools.
Running a script
- Run the script with
mcp__chrome-devtools__evaluate_scriptand read the object it returns. The scripts have no console output, so the returned object is the result:script,statusand the metric data (value,rating,details,items,issues), as described inreferences/schema.md. - When
statusis"tracking", the script keeps observing the page. After the interactions, call the function named ingetDataFnwith anothermcp__chrome-devtools__evaluate_scriptcall, for examplegetINP(), and read the object it returns. - When
statusis"error"or"unsupported", readerror: the page may not have loaded yet, or the browser lacks the API.
Without Chrome DevTools MCP, run the same snippet with the webperf-snippets CLI, which loads the page in headless Chromium and prints the same result objects: npx webperf-snippets <url> --snippet <Name> --json, where <Name> is the script name without .js. It needs Playwright and Chromium (npm install --save-dev webperf-snippets playwright, then npx playwright install chromium), and tracking snippets take --interact-script <file> to drive the interactions.
Scripts
scripts/CLS.js, Cumulative layout shift (CLS)scripts/INP.js, Interaction to next paint (INP)scripts/LCP-Image-Entropy.js, LCP image entropyscripts/LCP-Subparts.js, LCP subpartsscripts/LCP-Trail.js, LCP trailscripts/LCP-Video-Candidate.js, LCP video candidatescripts/LCP.js, Largest contentful paint (LCP)
Common Workflows
Complete Core Web Vitals Audit
When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":
