/webperf-interaction

name: webperf-interaction
description: Intelligent interaction performance analysis with automated workflows for INP debugging, scroll jank investigation, and main thread blocking. Includes decision trees that automatically run script attribution when long frames detected, break down input latency phases, and correlate layout shifts with interactions. Features workflows for complete interaction audit, third-party script impact analysis, and animation performance debugging. Cross-skill integration with Core Web Vitals (INP/CLS correlation) and Loading (script execution analysis). Use when the user asks about slow interactions, janky scrolling, unresponsive pages, or INP optimization. Compatible with Chrome DevTools MCP.
license: MIT
metadata:
  author: Joan Leon | @nucliweb
  version: 2.6.3
  mcp-server: chrome-devtools
  category: web-performance
  repository: https://github.com/nucliweb/webperf-snippets

WebPerf: Interaction & Animation

JavaScript snippets for measuring web performance in Chrome DevTools.

Running a script

1. Run the script with `mcp__chrome-devtools__evaluate_script`, passing the file instead of its code: `sourcePath` with the absolute path of `scripts/<Name>.js` in this skill, and `format: "script"`, since a script runs by itself and is not a function. Read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`. 2. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, as an arrow function in `function`, for example `() => getINP()`, and read the object it returns. 3. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.

`sourcePath` and `format` need Chrome DevTools MCP 1.11.0 or later, and the server only reads files inside its workspace roots: the project, the temp folder and each `--workspace=<folder>` in its arguments. When it answers `Access denied`, as it does for a skill installed outside the project, such as in `~/.claude/skills/`, read the file and pass its code in `function`, still with `format: "script"`. A `--workspace` with the real folder of the skills makes the path work; the server follows symlinks, so a link to the folder is not enough.

Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/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/DOM-Size-and-Depth.js` — DOM size and depth
• `scripts/Forced-Synchronous-Layout.js` — Forced synchronous layout detector
• `scripts/Input-Latency-Breakdown.js` — Input latency breakdown
• `scripts/Interactions.js` — Interactions
• `scripts/Layout-Shift-Loading-and-Interaction.js` — Layout shift tracking
• `scripts/Long-Animation-Frames-Helpers.js` — LoAF helpers
• `scripts/Long-Animation-Frames-Script-Attribution.js` — Long animation frames script attribution
• `scripts/Long-Animation-Frames.js` — Long animation frames (LoAF)
• `scripts/LongTask.js` — Long tasks
• `scripts/Scroll-Performance.js` — Scroll performance analysis

Common Workflows

Complete Interaction Performance Audit

When the user asks for interaction analysis or "audit responsiveness":

1. **Interactions.js** - List all user interactions with timing 2. **Input-Latency-Breakdown.js** - Break down interaction phases 3. **Long-Animation-Frames.js** - Detect blocking animation frames 4. **LongTask.js** - Identify long tasks blocking the main thread 5. **Scroll-Performance.js** - Measure scroll smoothness

INP Deep Dive

When INP is slow (>200ms) or the user asks "debug INP" or "slow interactions":

1. **Interactions.js** - Identify which interactions are slow 2. **Input-Latency-Breakdown.js** - Break down into input delay, processing time, presentation delay 3. **Long-Animation-Frames.js** - Find animation frames >50ms that block interactions 4. **Long-Animation-Frames-Script-Attribution.js** - Identify scripts causing the blocking 5. **Long-Animation-Frames-Helpers.js** - Get detailed timing and attribution helpers

Scroll Jank Investigation

When the user reports "scroll jank", "choppy scrolling", or "scroll performance issues":

1. **Scroll-Performance.js** - Measure scroll smoothness and frame drops 2. **Long-Animation-Frames.js** - Detect frames causing jank (>50ms) 3. **Layout-Shift-Loading-and-Interaction.js** - Check for layout shifts during scroll 4. **Long-Animation-Frames-Script-Attribution.js** - Find scripts running during scroll

Main Thread Blocking Analysis

When the page feels unresponsive or the user asks "why is the page frozen":

1. **LongTask.js** - List all tasks >50ms blocking the main thread 2. **Long-Animation-Frames.js** - Correlate with animation frame timing 3. **Long-Animation-Frames-Script-Attribution.js** - Attribute blocking to specific scripts 4. Cross-reference with **webperf-loading** skill:

• JS-Execution-Time-Breakdown.js (script parsing/execution time)
• First-And-Third-Party-Script-Info.js (identify third-party blockers)

Layout Shift During Interaction

When the user reports "things move when I click" or CLS issues during interaction:

1. **Layout-Shift-Loading-and-Interaction.js** - Separate loading vs interaction shifts 2. **Interactions.js** - Correlate shifts with specific interactions 3. **CLS.js** (from Core Web Vitals skill) - Measure total CLS 4. Cross-reference with **