How to Trace the Exact JavaScript Causing INP Lag in Chrome DevTools

Interaction to Next Paint (INP) measures the latency of every user interaction (clicks, taps, and keyboard presses) throughout the entire lifespan of a page, reporting the worst interaction near the 98th percentile. When an interaction takes longer than Google 200ms threshold, guessing which script is responsible is impossible: a single button click can trigger five analytics tags, three framework re-renders, and an unoptimized DOM query. Chrome DevTools provides native profiling tools that record the exact breakdown of Input Delay, Processing Duration, and Presentation Delay. In this guide, we walk through the exact step-by-step profiling method and how to use the Long Animation Frames (LoAF) API to capture script attribution directly in the console.

The 3 Anatomy Phases of an INP Interaction

Interaction to Next Paint (INP) officially replaced First Input Delay (FID) as a Core Web Vital in March 2024. Unlike FID, which only measured the input delay of the very first interaction on a page, INP measures the complete end-to-end duration of every user interaction until the browser paints the resulting visual update.

Every user interaction consists of three distinct chronological phases:

1. Input Delay: The time between the user physical tap or click and when the browser main thread is free to start executing the associated event callbacks. High input delay occurs when background scripts or ongoing tasks already occupy the CPU.

2. Processing Duration: The total execution time of all JavaScript event handlers attached to that event (e.g., pointerdown, click, touchstart). This includes framework state updates, template rendering, and DOM manipulations.

3. Presentation Delay: The time required for the browser to recalculate styles, calculate page layout (reflow), composite layers, and paint the updated pixels to the screen.

Step-by-Step: Recording an Interaction Trace in Chrome DevTools

To capture the exact script freezing an interaction, you must record a performance trace while actively interacting with the page.

Follow this 7-step profiling protocol:

Step 1: Open Google Chrome in an Incognito window to prevent browser extensions from injecting scripts into your trace.

Step 2: Open Chrome DevTools by pressing F12 (or Cmd+Option+I on macOS) and navigate to the Performance tab.

Step 3: Click the gear icon in the top right corner of the Performance panel to open Capture Settings. Select "4x CPU slowdown" under the CPU dropdown to emulate mid-tier mobile hardware.

Step 4: Click the circular "Record" icon (or press Ctrl+E / Cmd+E). The recorder will begin logging browser activity.

Step 5: Perform the interaction that feels sluggish: click the mobile hamburger menu toggle, expand an FAQ accordion, or type in a live search field.

Step 6: Immediately click "Stop" in the recording banner. DevTools will process and render the timeline profile.

Step 7: Locate the "Interactions" track in the timeline overview. Find the red or yellow bar representing the interaction. Clicking this marker will display the exact breakdown of Input Delay, Processing Duration, and Presentation Delay in the Summary pane at the bottom.

Isolating the Offending Script in the Main Thread Flame Chart

Once you have selected the interaction marker, look directly below it at the "Main" thread track in the Performance panel. The flame chart displays the visual call stack of every function executed during the interaction window.

Look for tasks marked with red flags in their top right corners: these are Long Tasks that exceeded the 50 millisecond threshold.

Expand the call stack downwards to identify where execution time is concentrated. Click on the "Bottom-Up" tab in the bottom dock. Sort the table by "Self Time" in descending order. This reveals the exact function and script URL responsible for the highest CPU consumption.

Look for third-party script signatures in the URL column: common offenders include analytics trackers (gtm.js, analytics.js), heatmaps (hotjar.js, clarity.js), chat widgets, and bloated page builder runtime scripts.

Modern Script Attribution with the Long Animation Frames (LoAF) API

Chrome 123 introduced the Long Animation Frames (LoAF) API, which provides programmatic, real-time attribution of main-thread delays without needing to record manual DevTools traces.

LoAF captures any animation frame that takes longer than 50 milliseconds to execute and attributes the delay directly to the initiating script URL, function name, and character offset.

You can run a live diagnostic listener directly in your Chrome DevTools Console. Paste the JavaScript snippet below into the Console, press Enter, and interact with your page. The script will output every long animation frame and print the offending script file and function name in real time:

// Observe and attribute Long Animation Frames (LoAF) in real time
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 150) {
      console.warn('[LoAF Alert] Frame Duration: ' + Math.round(entry.duration) + 'ms');
      console.log('Blocking Duration: ' + Math.round(entry.blockingDuration) + 'ms');
      if (entry.scripts && entry.scripts.length > 0) {
        console.group('Attributed Scripts:');
        entry.scripts.forEach((script) => {
          console.log('Script URL: ' + (script.sourceURL || 'Inline Script'));
          console.log('Function: ' + (script.sourceFunctionName || 'anonymous'));
          console.log('Execution Time: ' + Math.round(script.duration) + 'ms');
          console.log('Invoker: ' + script.invoker);
        });
        console.groupEnd();
      }
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });
console.log('LoAF Observer active. Interact with elements on the page to trace scripts.');

The 3 Most Common INP Anti-Patterns and Drop-In Code Fixes

Through hundreds of interactive performance audits, we have isolated three recurring architectural flaws that account for over 85% of INP failures:

1. Synchronous Analytics and Tag Manager Tracking: Firing tracking tags inside click handlers forces the main thread to compile analytics payloads before the browser can update the visual button state. Fix: Wrap tracking calls in requestIdleCallback() or queueMicrotask().

2. Forced Synchronous Layouts (Layout Thrashing): When JavaScript modifies CSS styles and then immediately reads geometric DOM properties (like offsetTop, clientHeight, or getBoundingClientRect()), the browser is forced to halt script execution and calculate a synchronous layout reflow. Fix: Batch all DOM read operations before write operations.

3. Monolithic Long Tasks: Long-running loops or complex state updates that take 200ms to run without yielding. Fix: Use the modern scheduler.yield() API to yield control back to the browser event loop, allowing the next paint frame to render cleanly.

// Helper to yield control back to the browser between heavy tasks
async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  return new Promise((resolve) => setTimeout(resolve, 0));
}

// Usage inside an interaction handler
async function handleFilterClick(event) {
  // Step 1: Provide immediate visual feedback (e.g., active button state)
  updateButtonVisualState(event.target);

  // Step 2: Yield to let the browser paint the active button state immediately
  await yieldToMain();

  // Step 3: Execute heavier data filtering and DOM updates
  applyHeavyCatalogFilter();
}

Automated INP Monitoring with VitalsSniper

While Chrome DevTools is the premier diagnostic tool for deep profiling, manual traces only capture the interactions you simulate in the lab. Real-world visitors interact across hundreds of device models, network conditions, and viewport sizes.

To continuously monitor interaction latency across your production pages, deploy the Web Audits Website Speed Test or install the VitalsSniper PRO Browser Extension. VitalsSniper records live interaction timing, logs long animation frames directly in your browser overlay, and highlights the exact DOM elements failing Google 200ms INP threshold.

Frequently Asked Questions