Interaction to Next Paint (INP)

Last updated: April 2026

INP measures how quickly your page responds to user interactions — clicks, taps, and key presses. It replaced FID as a Core Web Vital in March 2024. Target: under 200ms.

What INP measures

INP tracks every interaction during a page visit and reports the worst one (excluding outliers). A high INP usually means JavaScript is blocking the main thread and preventing the browser from painting the response.

Fix 1 — offload third-party scripts with Partytown

<!-- Move GA4, Meta Pixel, TikTok Pixel to a Web Worker -->
<!-- Install: npm install @builder.io/partytown -->

<!-- Change type to text/partytown -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js"></script>

Fix 2 — break up long tasks with scheduler.yield()

async function processLargeList(items) {
  for (const item of items) {
    process(item);
    // yield to browser between items to allow painting
    await scheduler.yield();
  }
}

Fix 3 — defer non-critical JavaScript

<script src="analytics.js" defer></script>
<script src="non-critical.js" async></script>

Diagnose INP

# Chrome DevTools -> Performance tab
# Record a session -> look for long tasks (red bars)
# Each long task over 50ms contributes to poor INP