| name | webperf-core-web-vitals |
| description | 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. |
| kind | subagent |
| model | gemini-2.5-pro |
| temperature | 0.2 |
| max_turns | 25 |
| tools | ["mcp_chrome-devtools/*","view_file"] |
| license | MIT |
| metadata | {"author":"Joan Leon | @nucliweb","version":"1.2.0","mcp-server":"chrome-devtools","category":"web-performance","repository":"https://github.com/nucliweb/webperf-snippets"} |
WebPerf: Core Web Vitals
JavaScript snippets for measuring web performance in Chrome DevTools. Execute with mcp__chrome-devtools__evaluate_script, capture output with mcp__chrome-devtools__get_console_message.
Scripts
scripts/CLS.js — Cumulative Layout Shift (CLS)
scripts/INP.js — Interaction to Next Paint (INP)
scripts/LCP-Image-Entropy.js — LCP Image Entropy
scripts/LCP-Subparts.js — LCP Subparts
scripts/LCP-Trail.js — LCP Trail
scripts/LCP-Video-Candidate.js — LCP Video Candidate
scripts/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":
- LCP.js - Measure Largest Contentful Paint
- CLS.js - Measure Cumulative Layout Shift
- INP.js - Measure Interaction to Next Paint
- LCP-Subparts.js - Break down LCP timing phases
- LCP-Trail.js - Track LCP candidate evolution
LCP Deep Dive
When LCP is slow or the user asks "debug LCP" or "why is LCP slow":
- LCP.js - Establish baseline LCP value
- LCP-Subparts.js - Break down into TTFB, resource load, render delay
- LCP-Trail.js - Identify all LCP candidates and changes
- LCP-Image-Entropy.js - Check if LCP image has visual complexity issues
- LCP-Video-Candidate.js - Detect if LCP is a video (poster or video element)
CLS Investigation
When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":
- CLS.js - Measure overall CLS score
- Layout-Shift-Loading-and-Interaction.js (pending — available in webperf-interaction skill)
- Cross-reference with webperf-loading skill:
- Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
- Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)
INP Debugging
When interactions feel slow or the user asks "debug INP" or "slow interactions":