Interaction to Next Paint (INP)
A Core Web Vital measuring how long it takes for a page to visually respond to user interactions — clicks, taps, and keyboard input — throughout the entire page session. Replaced First Input Delay (FID) in March 2024.
Simple Explanation
Interaction to Next Paint (INP) measures how quickly your page responds when a user clicks something, taps a button, or types. If you click a menu button and it takes 800 milliseconds to open, that's a poor INP experience — the page felt frozen. INP replaced First Input Delay (FID) in March 2024. The key difference: FID measured only the first interaction; INP measures every interaction throughout the visit and reports the worst one. Good INP is under 200 milliseconds — anything over 500ms feels broken to users.
Advanced SEO Explanation
INP measures the latency of all click, tap, and keyboard interactions during a page visit. Interaction latency = Input Delay (main thread busy with other tasks) + Processing Time (event handler execution) + Presentation Delay (rendering pipeline). Unlike FID, INP measures the full input-to-visual-update cycle for all interactions. Root causes: JavaScript Long Tasks (>50ms) blocking the main thread, heavy synchronous event handlers, third-party scripts on the main thread, large React component re-renders, and unoptimized animations. Fixes: break Long Tasks with scheduler.postTask() or setTimeout(0), use Web Workers for heavy computation, optimize React with memo/useMemo/useTransition, limit third-party script execution.
Why Interaction to Next Paint (INP) Matters for Rankings
Measures full interactivity lifecycle
INP captures every interaction throughout the session — not just the first click. Slow menus, forms, or search inputs damage trust repeatedly.
Critical for JavaScript-heavy sites
SPAs built with React, Angular, or Vue frequently have poor INP due to heavy component re-renders and main thread blocking.
Replaced FID as Core Web Vital in March 2024
INP became a ranking signal in March 2024. Sites that passed FID but have poor INP now have a new optimization target.
Real-World SEO Examples
INP breakdown: input delay causes
What blocks the main thread and creates input delay.
Code Example
USER CLICKS BUTTON → visual response:
1. Input Delay (main thread busy)
Cause: Long Tasks, third-party scripts
Fix: Defer non-critical JS, remove unused scripts
2. Processing Time (event handler runs)
Cause: Heavy computation in click handler
Fix: Move work to Web Worker, optimize algorithm
3. Presentation Delay (render pipeline)
Cause: Layout thrashing, JS animations
Fix: Use CSS transitions, avoid layout-triggering JS
Total INP goal: < 200ms totalCommon Interaction to Next Paint (INP) Mistakes
✗ Mistake
Ignoring INP because FID was passing
✓ The Fix
FID measured only first interaction delay; INP measures all interactions. Check INP separately in Search Console — FID pass doesn't guarantee INP pass.
✗ Mistake
Heavy synchronous event handlers on click
✓ The Fix
Event handlers should complete in under 50ms. Move heavy computation to async patterns or Web Workers.
✗ Mistake
Third-party scripts blocking main thread
✓ The Fix
Third-party scripts (chat, analytics, ads) frequently cause Long Tasks. Audit with Chrome DevTools Long Tasks view and load them asynchronously.
Free Tools for Interaction to Next Paint (INP)
Related Articles
Interaction to Next Paint (INP) FAQs
Frequently Asked Questions
People Also Search For
Continue Learning: Next Terms
Core Web Vitals
Google's standardized page experience metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — used as ranking signals and user experience benchmarks.
Intermediate⚙️Largest Contentful Paint
A Core Web Vital measuring how long it takes for the largest visible content element — typically a hero image or main heading — to render in the viewport after page load begins.
Intermediate⚙️Cumulative Layout Shift
A Core Web Vital measuring visual stability — the total amount of unexpected content movement that occurs during a page's lifetime as resources load and the layout reflows.
Intermediate⚙️Render-Blocking Resources
CSS and JavaScript files that prevent the browser from rendering visible page content until they are fully downloaded and processed — a primary cause of poor LCP and slow perceived page speed.
Advanced