/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.
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: Interaction & Animation

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/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 **webperf-media** skill:

• Image-Element-Audit.js (images without dimensions causing shifts)

Animation Performance Analysis

When animations feel sluggish or the user asks "debug animation performance":

1. **Long-Animation-Frames.js** - Identify frames taking too long to render 2. **Long-Animation-Frames-Helpers.js** - Detailed frame timing analysis 3. **Long-Animation-Frames-Script-Attribution.js** - Find scripts delaying frames 4. **Scroll-Performance.js** - If scroll animations are involved

Third-Party Script Impact on Interactions

When interactions are slow and third-party scripts are suspected:

1. **Long-Animation-Frames-Script-Attribution.js** - Identify third-party scripts in long frames 2. **LongTask.js** - Measure long task frequency 3. Cross-reference with **webperf-loading** skill:

• First-And-Third-Party-Script-Info.js (list all third-party scripts)
• First-And-Third-Party-Script-Timings.js (measure script loading impact)
• Script-Loading.js (check for blocking scripts)

Decision Tree

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

After Interactions.js

• **If any interaction > 200ms** → Run **Input-Latency-Breakdown.js** on slow interactions; also run **webperf-core-web-vitals:INP.js** for official INP measurement
• **If many interactions > 200ms** → Main thread congestion, run:

1. **Long-Animation-Frames.js** (blocking frames) 2. **LongTask.js** (long tasks) 3. **Long-Animation-Frames-Script-Attribution.js** (culprit scripts)

• **If specific interaction types are slow (e.g., click vs keyboard)** → Focus on that interaction type
• **If interactions occur during page load** → Cross-check with **webperf-loading:JS-Execution-Time-Breakdown.js**

After Input-Latency-Breakdown.js

• **If Input Delay > 50ms** → Main thread was busy, run:

1. **Long-Animation-Frames.js** (what was blockin