Interaction to Next Paint (INP): What It Is and How to Fix It

Interaction to Next Paint (INP) measures the responsiveness of a webpage by tracking the latency of all user interactions and reporting the worst interaction (or near-worst for pages with many interactions). A good INP score is 200 milliseconds or less. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024 because it provides a more complete picture of page interactivity.

INP is critical for technical SEO because Google uses it as a ranking signal. Pages with poor INP feel sluggish and unresponsive, causing users to abandon your site. This guide explains what causes poor INP and how to fix it.

Egochi, America’s #1 digital marketing agency headquartered in New York City, helps businesses optimize Core Web Vitals including INP. From our offices in NYC, Milwaukee, Madison, and Miami, we’ve helped clients improve page responsiveness and search rankings through technical SEO optimization.

What is a good INP score?

A good INP score is 200 milliseconds or less. Google considers INP scores of 200ms or under as “good,” between 200-500ms as “needs improvement,” and over 500ms as “poor.” These thresholds are measured at the 75th percentile, meaning 75% of your page interactions should have INP of 200ms or less to pass. The 200ms threshold allows time for visual feedback that feels responsive to users.

What causes poor INP scores?

Poor INP scores are caused by JavaScript blocking the main thread, slow event handlers, excessive DOM manipulation, and complex rendering operations. Unlike FID which only measured input delay, INP includes the full interaction cycle: input delay (waiting for the main thread), processing time (running event handlers), and presentation delay (rendering the visual update). Problems in any phase contribute to poor INP.

How is INP different from FID?

INP measures all interactions throughout a page’s lifecycle and includes the full response time, while FID only measured the first interaction’s input delay. FID could miss slow interactions that happened after the initial page load. INP captures clicks, taps, and key presses throughout the entire session and reports the worst (or near-worst) latency, giving a more accurate picture of real-world responsiveness.

Why Interaction to Next Paint Matters for SEO

Interaction to Next Paint directly impacts your search rankings and user experience. Google chose INP to replace FID because it better captures how users actually experience page responsiveness.

User Experience Impact: When users click a button or tap a link and the page doesn’t respond immediately, they perceive it as broken or slow. Research shows users expect visual feedback within 100-200 milliseconds. Delays beyond this create frustration, increase bounce rates, and reduce conversions.

Search Ranking Factor: INP is one of Google’s three Core Web Vitals that directly affect rankings. Sites with poor INP may rank lower than competitors with responsive pages. Google Search Console shows INP data and flags pages that need improvement.

Complete Measurement: FID only measured the first interaction and only the input delay portion. A page could have good FID but still feel sluggish because later interactions were slow or because rendering took too long. INP captures the complete picture by measuring all interactions from input to paint.

What Causes Poor Interaction to Next Paint

INP problems can occur in any of the three phases: input delay, processing time, or presentation delay. Understanding these causes helps you target the right optimizations.

How to Improve Interaction to Next Paint

Improving INP requires optimizing all three phases: reducing input delay, minimizing processing time, and speeding up presentation. These techniques address the root causes of poor INP.

Code Examples for INP Optimization

Breaking Up Long Tasks

Use the scheduler API or setTimeout to yield to the main thread during heavy processing:

// BAD: Single long task that blocks interactions
function processAllItems(items) {
  items.forEach(item => {
    heavyProcessing(item); // Blocks for 300ms total
  });
}

// GOOD: Yield to main thread between chunks
async function processAllItemsOptimized(items) {
  for (const item of items) {
    heavyProcessing(item);
    
    // Yield to allow browser to process interactions
    if (scheduler.yield) {
      await scheduler.yield();
    } else {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}

Optimizing Event Handlers

// BAD: Heavy processing in click handler
button.addEventListener('click', () => {
  const data = calculateComplexData(); // 150ms
  updateDOM(data); // 50ms
  sendAnalytics(); // 30ms
});

// GOOD: Minimal work in handler, defer the rest
button.addEventListener('click', () => {
  // Show immediate visual feedback
  button.classList.add('loading');
  
  // Defer heavy work
  requestAnimationFrame(() => {
    const data = calculateComplexData();
    updateDOM(data);
    button.classList.remove('loading');
  });
  
  // Defer non-critical analytics
  requestIdleCallback(() => sendAnalytics());
});

Avoiding Layout Thrashing

// BAD: Interleaved reads and writes cause layout thrashing
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = (height + 10) + 'px'; // Write
}); // N forced layouts!

// GOOD: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
  el.style.height = (heights[i] + 10) + 'px'; // All writes
}); // Only 1 forced layout

Using CSS Containment

/* Isolate components to limit rendering scope */
.card {
  contain: layout style paint;
}

/* For scrollable containers with many items */
.virtual-list {
  contain: strict;
  content-visibility: auto;
}

/* Skip rendering off-screen content */
.offscreen-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

INP vs FID: Key Differences

Understanding the differences between INP and FID helps you optimize for the metric that actually affects your rankings.

Why Google Made the Switch: FID was a good starting point but had significant blind spots. It only measured the delay before event processing started, ignoring how long the actual processing took. And it only measured the first interaction, missing slow interactions that happened after the page loaded. INP addresses both limitations by measuring the complete interaction cycle for all interactions.

Tools to Measure Interaction to Next Paint

INP requires real user interaction to measure accurately. Field data from Chrome User Experience Report (CrUX) is what Google uses for ranking decisions. Lab tools can help identify potential issues but don’t measure INP directly.

Measuring INP with JavaScript

Use the web-vitals library to measure INP on your own site:

// Install: npm install web-vitals
import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
  
  // Get details about the worst interaction
  const entry = metric.entries[0];
  console.log('Target:', entry.target);
  console.log('Input delay:', entry.processingStart - entry.startTime);
  console.log('Processing:', entry.processingEnd - entry.processingStart);
  
  // Send to your analytics
  sendToAnalytics({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
  });
});

INP and Other Core Web Vitals

Interaction to Next Paint works alongside Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) to measure overall page experience. Optimizing all three creates fast, stable, and responsive pages.

Optimization Priority: INP optimization often requires the most effort because it affects code throughout your application. Unlike LCP (focused on initial load) or CLS (focused on layout), INP impacts every interactive element. Start by identifying your worst interactions using field data, then optimize those specific code paths.

Technical SEO Services from Egochi

Egochi, America’s #1 digital marketing agency headquartered in New York City, provides expert technical SEO services including Core Web Vitals optimization.

INP Audits: We analyze your site’s interaction responsiveness, identify slow event handlers, and pinpoint main thread blocking issues. Our audits use both field data and manual testing to find the interactions that need optimization.

Implementation Support: Our developers implement INP improvements including task scheduling, event handler optimization, DOM reduction, and third-party script management. We work with your team or handle implementation directly.

Ongoing Monitoring: We set up Real User Monitoring to track INP over time and alert you to regressions. New features and code changes can reintroduce INP issues, and we help you maintain responsive pages.

Proven Results: From our offices in NYC, Milwaukee, Madison, and Miami, we’ve helped clients achieve “good” Core Web Vitals scores and improve search rankings through technical optimization.

Frequently Asked Questions