webperf-core-web-vitals

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":

1. LCP.js - Measure Largest Contentful Paint
2. CLS.js - Measure Cumulative Layout Shift
3. INP.js - Measure Interaction to Next Paint
4. LCP-Subparts.js - Break down LCP timing phases
5. 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":

1. LCP.js - Establish baseline LCP value
2. LCP-Subparts.js - Break down into TTFB, resource load, render delay
3. LCP-Trail.js - Identify all LCP candidates and changes
4. LCP-Image-Entropy.js - Check if LCP image has visual complexity issues
5. 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":

1. CLS.js - Measure overall CLS score
2. Layout-Shift-Loading-and-Interaction.js (pending — available in webperf-interaction skill)
3. 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":