INP (Interaction to Next Paint)

Definition

INP is a Core Web Vitals metric measuring the time from user input to the next screen update.

Summary

INP (Interaction to Next Paint) replaced FID as the Core Web Vitals responsiveness metric on March 12, 2024. 200ms or below is Good. It measures the 75th percentile of all interactions in a session. Main thread blocking and long JavaScript tasks are primary causes.

What Is INP?

INP (Interaction to Next Paint) is the time from when a user clicks a button or presses a key until the browser paints the next screen. On March 12, 2024, Google adopted INP as the official Core Web Vitals responsiveness metric. FID (First Input Delay) was removed from official CWV metrics.

Measurement Thresholds

Google uses the 75th percentile standard. The INP value at the 75% point among all interactions in a session must be within the Good threshold for a Good rating. Confirm with Chrome UX Report (CrUX) and Google Search Console Field Data.

Difference from FID

Measurement scope

FID measured only the first interaction after page load. INP tracks the entire session (clicks, taps, keyboard input).

Measurement target

FID measured only input delay until event processing starts. INP includes the full process from event processing start through rendering completion.

Practical meaning

FID could score high if the first click was fast, but INP scores low if response is slow at any point during page use. It reflects real user experience more accurately.

Causes of High INP

Long JavaScript Tasks

JavaScript tasks exceeding 50ms occupy the main thread and delay interaction processing. Identify with "Long Tasks" in the Performance panel.

Heavy Operations in Event Handlers

DOM traversal, synchronous network requests, or complex calculations in click handlers delay rendering.

Render Tree Recalculation

Changing many DOM elements at once increases browser layout recalculation cost.

INP Improvement Methods

1. Split Long Tasks

Split long tasks into smaller ones with scheduler.yield() or setTimeout(fn, 0). Gives the browser opportunities to process interactions in between.

2. Optimize Event Handlers

Remove or defer operations not immediately needed in click/tap handlers. Offload heavy operations to Web Workers.

3. Suppress Unnecessary Re-renders

For React apps, reduce unnecessary re-renders with React.memo, useMemo, and useCallback. Minimize state change scope.

4. Prefer CSS Animations

Use CSS transform and opacity instead of JavaScript-based animations. GPU-accelerated properties run without main thread load.

Relationship with SEO

Google reflects INP as a Page Experience signal in search rankings. Poor INP pages are disadvantaged compared to Good-rated pages under the same content quality. INP problems occur frequently on JavaScript-heavy SPAs; INP variance is large in diverse device environments like Korean mobile users.

Korea Market Context

Korean news, commerce, and community sites have high main thread load from ads and scripts. Such sites are likely to receive Poor INP ratings. Check INP separately for "Mobile" in Google Search Console and prioritize reducing Long Tasks on mobile.

Frequently Asked Questions

Q. What is the difference between INP and TBT (Total Blocking Time)?
A. TBT is a Lab Data (Lighthouse simulation) metric measuring main thread blocking time from Long Tasks. INP is Field Data (real users) based and directly measures actual interaction response time. Improving TBT tends to improve INP; Lighthouse TBT can be used as a proxy for INP.

Q. How do I measure INP?
A. Chrome DevTools Performance panel "Interactions" track shows INP per interaction. Or collect directly with PerformanceObserver API, or check Field Data in Google Search Console Core Web Vitals report.

Q. Why is achieving 200ms or below difficult?
A. Event processing plus rendering completion must finish within 200ms; complex UI or heavy libraries make this hard. React, Vue, and similar frameworks that trigger full tree re-renders on state changes easily exceed 200ms.

Q. Are mobile and desktop INP thresholds different?
A. Thresholds (200ms Good) are the same, but Google Search Console shows mobile and desktop separately. Mobile generally measures higher INP than desktop due to lower CPU performance.

Related Sources

• Google Search Central (2024). Interaction to Next Paint becomes a Core Web Vital on March 12. https://developers.google.com/search/blog/2023/05/introducing-inp
• web.dev. INP (Interaction to Next Paint). https://web.dev/articles/inp
• web.dev. Optimize INP. https://web.dev/articles/optimize-inp