If your site feels slow when people click, tap, or type, they won’t wait. They bounce, your conversions drop, and your organic traffic is at risk. That’s exactly what INP (Interaction to Next Paint) measures - and why it quietly decides whether your SEO work pays off or leaks users.
INP replaced FID as a Core Web Vital in March 2024. INP tracks how quickly the UI visually responds after a user interaction across an entire session, not just the first. It’s one of the clearest indicators of perceived responsiveness. While Google frames Page Experience (including Core Web Vitals) as not a single ranking system, the Core Web Vitals SEO impact is real in practice: better responsiveness often correlates with lower bounce, higher engagement, and stronger long-term organic traffic retention.
Core thesis: Improve INP score to reduce bounce rate and protect organic traffic. If your Next.js or React app ships too much JavaScript, blocks the main thread, or does heavy work in event handlers, users feel lag. Fixing INP means making interactions fast and predictable.
INP (Interaction to Next Paint) is the time between a user interaction (like click, tap, or keypress) and the next visual update that reflects that interaction. INP focuses on all interactions in a session, typically reported as the 75th percentile.
Unlike lab metrics, INP depends on real user behavior and device conditions. That’s why field data (Chrome UX Report, Search Console) is the source of truth for your score and your Core Web Vitals status in Search Console.
| INP Range | What Users Feel | Common Culprits | Quick Wins to Improve INP Score |
|---|---|---|---|
| ≤ 200 ms | Instant feedback | N/A | Maintain lean JS, pre-render, avoid heavy handlers |
| 200–500 ms | Noticeable lag | Long tasks, oversized bundles, sync JSON parsing, re-renders | Code-split, defer non-urgent work, debounce inputs, useTransition |
| > 500 ms | Jank, frustration, drop-offs | Third-party scripts, heavy charts at click, blocking CSS/JS | Audit third-parties, lazy-load charts, move work off main thread |
This approach works in any framework, including Next.js. Send results to your analytics/RUM endpoint.
// /public/rum.js (or any client-loaded module)
import {onINP} from 'web-vitals/attribution';
function sendToAnalytics(metric) {
// Example: POST to your RUM endpoint
fetch('/api/rum', {
method: 'POST',
keepalive: true,
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
name: metric.name, // 'INP'
value: Math.round(metric.value),
id: metric.id, // event id
rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
attribution: metric.attribution // target node, interaction type, etc.
})
});
}
onINP(sendToAnalytics);
If you use the App Router, load the above client script in a client component that mounts once (e.g., in your root layout via a small client-only wrapper), or with <Script strategy="afterInteractive" />. If you use the Pages Router, you can also use Next.js’s reportWebVitals export in _app.js, but the web-vitals library with attribution gives you deeper event details.
Less JS means fewer long tasks and faster UI response.
How to Fix It:
"use client" only where interactivity is required.
// Example: lazy-load a chart until the user opens the tab
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('../components/Chart'), {
ssr: false, // many chart libs are client-only
loading: () => <span>Loading chart…</span>,
});
Don’t block the next paint. Give immediate visual feedback, defer the rest.
How to Fix It:
requestIdleCallback, setTimeout(0), or Web Workers.
// Example: keep click handler snappy
function handleAddToCart(product) {
// 1) Instant UI feedback
setCartState((s) => [...s, product]);
// 2) Defer non-critical work
setTimeout(() => {
// analytics, logging, prefetching
void fetch('/api/analytics', { method: 'POST', body: JSON.stringify({ event: 'add_to_cart', id: product.id }) });
}, 0);
}
React’s concurrent features help keep the main thread responsive.
How to Fix It:
useTransition: Mark non-urgent state updates as transitional.useDeferredValue: Keep inputs responsive while deferring expensive derived results.
// Example: responsive search with Next.js + React 18
'use client';
import {useState, useTransition, useDeferredValue} from 'react';
export default function SearchBox({ initialResults }) {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const [isPending, startTransition] = useTransition();
const [results, setResults] = useState(initialResults);
function onChange(e) {
const q = e.target.value;
setQuery(q); // urgent: keep the input responsive
startTransition(async () => {
const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
const data = await res.json();
setResults(data);
});
}
return (
<div>
<input value={query} onChange={onChange} placeholder="Search" />
{isPending && <span>Updating…</span>}
<SearchResults query={deferredQuery} results={results} />
</div>
);
}
Large JSON parsing, image manipulation, or data transforms block interactions.
How to Fix It:
// Worker: /public/parser.worker.js
self.onmessage = (e) => {
const parsed = JSON.parse(e.data); // heavy parse moved off main thread
self.postMessage(parsed);
};
// UI thread
const worker = new Worker('/parser.worker.js');
worker.postMessage(bigJsonString);
worker.onmessage = (e) => setData(e.data);
Tags and widgets can dominate the main thread at the worst time - during interactions.
How to Fix It:
next/script and strategy="lazyOnload" or afterInteractive.
import Script from 'next/script';
export default function Scripts() {
return (
<>
<Script src="/analytics.js" strategy="afterInteractive" />
<Script src="https://example.com/slow-widget.js" strategy="lazyOnload" />
</>
);
}
Every unnecessary render steals time from interaction handling.
How to Fix It:
useMemo/useCallback to avoid re-render cascades.Even if the final result takes time, acknowledge the action instantly.
How to Fix It:
"use client" scoped to interactive islands.ssr: false only when truly client-only.useTransition for complex interactions.next build and the bundle analyzer plugin.next/script strategies; load late if not essential.web-vitals/attribution to find slow interaction targets and handlers.useTransition/useDeferredValue for searches and filters.As frameworks push more work to the server and browsers improve scheduling, the bar for responsiveness will rise. Sites that treat interaction to next paint as a product KPI - not just a technical metric - will keep compounding advantages in engagement, conversions, and organic traffic retention.
A good INP is ≤ 200 ms at the 75th percentile of your field data (mobile and desktop). 200–500 ms needs improvement; > 500 ms is poor.
Google treats Page Experience and Core Web Vitals as helpful signals rather than a single ranking system. In practice, better INP aligns with lower bounce and higher engagement, which supports SEO outcomes over time.
Use the web-vitals library with attribution in a client component or via <Script strategy="afterInteractive" /> to collect real-user INP and send it to your RUM endpoint. Validate trends in Search Console and PageSpeed Insights.
Users expect near-instant reactions to clicks and inputs. When the UI responds within ~200 ms, people stay, explore, and convert more. Slow interactions feel broken and trigger abandonment.
If your site bleeds traffic after the click, start with INP. Trim JavaScript, keep event handlers light, use React 18 scheduling, and measure real-user interactions. That’s how you improve INP score, reduce bounce rate, and protect the payoff of your SEO work.
Need to speed up your Next.js app or fix performance bottlenecks? I build high-performance web architectures, optimize Core Web Vitals, and ship clean, scalable code that moves the needle on user retention - in weeks, not months.
IT & Business Enablement Leader
IT & Business Enablement Leader and Full Stack Developer with 15+ years of experience delivering scalable, high-performance digital solutions across Pakistan and the UAE. Specialising in React, Next.js, AI integrations, and workflow automation.
Lock down n8n webhooks and APIs with practical authentication, HMAC/JWT checks, mTLS, rate limits, and secure credential handling. Step-by-step guides inside.
Master Next.js App Router SEO with server components, ISR, and Vercel edge caching. Improve indexation, Core Web Vitals, and organic visibility. Faster TTFB.