webperf-interaction

# 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/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 **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 5. **DOM-Size-and-Depth.js** - Check whether a large or deep DOM makes each style and layout pass expensive ### 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 blocking) 2. **LongTask.js** (long task before interaction) - **If Processing Time > 100ms** → Heavy event handlers, run: 1. **Long-Animation-Frames-Script-Attribution.js** (which scripts) 2. **webperf-loading:First-And-Third-Party-Script-Info.js** (third-party involvement) - **If Presentation Delay > 50ms** → Rendering bottleneck, run: 1. **Long-Animation-Frames.js** (frame rendering time) 2. **Layout-Shift-Loading-and-Interaction.js** (check for layout work) ### After Long-Animation-Frames.js - **If many frames > 50ms** → Run **Long-Animation-Frames-Script-Attribution.js** to identify causes - **If frames > 100ms** → Critical blocking, run: 1. **Long-Animation-Frames-Script-Attribution.js** (detailed attribution) 2. **LongTask.js** (related long tasks) 3. **webperf-loading:JS-Execution-Time-Breakdown.js** (script execution cost) - **If frames occur during scroll** → Run **Scroll-Performance.js** to measure impact - **If frames occur during page load** → Cross-check with **webperf-loading:Event-Processing-Time.js** ### After Long-Animation-Frames-Script-Attribution.js - **If third-party scripts are causing long frames** → Run: 1. **webperf-loading:First-And-Third-Party-Script-Info.js** (list all third-party scripts) 2. **webperf-loading:Script-Loading.js** (check loading strategy) 3. Recommend deferring or removing problematic scripts - **If first-party scripts are causing long frames** → Recommend: - Code splitting - Debouncing/throttling event handlers - Web Workers for heavy computation - **If forced reflow/layout detected** → Analyze DOM manipulation patterns - **If time goes to style recalculation or layout** → Run **DOM-Size-and-Depth.js** to check the size of the tree ### After LongTask.js - **If many long tasks (>5)** → Main thread is congested, run: 1. **Long-Animation-Frames-Script-Attribution.js** (detailed attribution) 2. **webperf-loading:JS-Execution-Time-Breakdown.js** (script execution analysis) 3. **webperf-loading:First-And-Third-Party-Script-Info.js** (identify heavy scripts) - **If long tasks > 500ms** → Critical blocking, investigate: - Synchronous third-party scripts - Heavy computation without Web Workers - Excessive DOM manipulation - **If long tasks correlate with interactions** → Run **Interactions.js** to see impact ### After DOM-Size-and-Depth.js - **If total elements > 1400** → Recommend virtualizing long lists and loading off-screen content on demand - **If depth > 32** → Recommend flattening wrapper elements added by components - **If a single parent has > 60 children** → Recommend pagination or virtualization for that container - **If the DOM is within limits but interactions are still slow** → Run **Long-Animation-Frames-Script-Attribution.js** to find the scripts responsible ### After Scroll-Performance.js - **If scroll FPS < 30** → Severe jank, run: 1. **Long-Animation-Frames.js** (blocking frames during scroll) 2. **Long-Animation-Frames-Script-Attribution.js** (scripts running on scroll) 3. **Layout-Shift-Loading-and-Interaction.js** (layout work during scroll) - **If scroll FPS 30-50** → Noticeable jank, investigate: - Scroll event handlers - Passive event listeners - CSS will-change properties - **If scroll FPS > 50** → Good, but check for layout shifts during scroll ### After Layout-Shift-Loading-and-Interaction.js - **If shifts occur during page load** → Cross-reference with **webperf-core-web-vitals:CLS.js** - **If shifts occur during interaction** → This impacts INP and UX, investigate: 1. Dynamic content insertion 2. Images/ads loading without dimensions 3. Font swaps (run **webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js**) - **If shifts occur during scroll** → Run **Scroll-Performance.js** to measure impact ### After Long-Animation-Frames-Helpers.js This is a utility snippet, use results to: - Understand frame timing in detail - Identify precise script attribution - Measure style/layout/paint phases - No automatic follow-up, use data to inform next steps ### Performance Budget Thresholds Use these thresholds to automatically trigger follow-up analysis: **INP Thresholds:** - **Good**: ≤ 200ms → Monitor, no action needed - **Needs Improvement**: 200-500ms → Run Input-Latency-Breakdown.js - **Poor**: > 500ms → Run full INP debugging workflow (5 snippets) **Long Animation Frames:** - **Warning**: > 50ms → Run Long-Animation-Frames-Script-Attribution.js - **Critical**: > 100ms → Run full main thread blocking workflow **Long Tasks:** - **Warning**: > 50ms → Monitor frequency - **Critical**: > 200ms or >5 tasks per second → Run attribution and script analysis **Scroll Performance:** - **Good**: ≥ 50 FPS → Monitor - **Needs Improvement**: 30-50 FPS → Run Long-Animation-Frames.js - **Poor**: < 30 FPS → Run full scroll jank workflow **Interaction Frequency:** - **If >10 interactions/second** → User is actively interacting, prioritize INP optimization - **If <1 interaction/5 seconds** → Interactions are rare, focus on first interaction responsiveness ### Multi-Metric Correlation When multiple interaction metrics are poor: - **If Long Tasks AND Long Animation Frames both detected** → Shared root cause: 1. Run Long-Animation-Frames-Script-Attribution.js 2. Likely heavy JavaScript execution 3. Consider code splitting or Web Workers - **If INP slow AND CLS high** → Interaction-triggered layout shifts: 1. Run Layout-Shift-Loading-and-Interaction.js 2. Correlate shift timing with interaction timing 3. Check for dynamic content insertion - **If Scroll jank AND Long Animation Frames** → Scroll handlers blocking main thread: 1. Run Long-Animation-Frames-Script-Attribution.js during scroll 2. Check for non-passive scroll listeners 3. Audit scroll-triggered animations ## References - `references/snippets.md` — Descriptions and thresholds for each script - `references/schema.md` — Return value schema for interpreting script output