/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.
context: fork
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":

1. **INP.js** - Measure overall INP value; call `getINP()` after interactions, `getINPDetails()` for full list 2. **Interactions.js** _(pending — available in webperf-interaction skill)_ 3. **Input-Latency-Breakdown.js** _(pending — available in webperf-interaction skill)_ 4. **Long-Animation-Frames.js** _(pending — available in webperf-interaction skill)_ 5. **Long-Animation-Frames-Script-Attribution.js** _(pending — available in webperf-interaction skill)_

Video as LCP Investigation

When LCP is a video element (detected by LCP-Video-Candidate.js):

1. **LCP-Video-Candidate.js** - Identify video as LCP candidate 2. **Video-Element-Audit.js** (from Media skill) - Audit video loading strategy 3. **LCP-Subparts.js** - Analyze video loading phases 4. Cross-reference with **webperf-loading** skill:

• Resource-Hints-Validation.js (check for video preload)
• Priority-Hints-Audit.js (check for fetchpriority on video)

Image as LCP Investigation

When LCP is an image (most common case):

1. **LCP.js** - Measure LCP timing 2. **LCP-Subparts.js** - Break down timing phases 3. **LCP-Image-Entropy.js** - Analyze image complexity 4. Cross-reference with **webperf-media** skill:

• Image-Element-Audit.js (check format, dimensions, lazy loading)

5. Cross-reference with **webperf-loading** skill:

• Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy)
• Priority-Hints-Audit.js (check for fetchpriority="high")
• Resource-Hints-Validation.js (check for preload)

Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

After LCP.js

• **If LCP > 2.5s** → Run **LCP-Subparts.js** to diagnose which phase is slow
• **If LCP > 4.0s (poor)** → Run full LCP deep dive workflow (5 snippets)
• **If LCP candidate is an image** → Run **LCP-Image-Entropy.js** and **webperf-media:Image-Element-Audit.js**
• **If LCP candidate is a video** → Run **LCP-Video-Candidate.js** and **webperf-media:Video-Element-Audit.js**
• **Always run** → **LCP-Trail.js** to understand candidate evolution

After LCP-Subparts.js

• **If TTFB phase > 600ms** → Switch to **webperf-loading** skill and run TTFB-Sub-Parts.js
• **If Resource Load Time > 1500ms** → Run:

1. **webperf-loading:Resource-Hints-Validation.js** (check for preload/preconnect) 2. **webperf-loading:Priority-Hints-Audit.js** (check fetchpriority) 3. **webperf-loading:Find-render-blocking-resources.js** (competing resources)

• **If Render Delay > 200ms** → Run:

1. **webperf-loading:Find-render-blocking-resources.js** (blocking CSS/JS) 2. **webperf-loading:Script-Loading.js** (parser-blocking scripts) 3. **webperf-interaction:Long-Animation-Frames.js** (main thread blocking)

After LCP-Trail.js

• **If many LCP candidate changes (>3)** → This causes visual instability, investigate:

1. **webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js** (late-loading images) 2. **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js** (font swaps) 3. **CLS.js** (layout shifts contributing to LCP changes)

• **If final LCP candidate appears late** → Run **webperf-loading:Resource-Hints-Validation.js**
• **If early candidate was replaced** →