Optimizing for INP: The New Performance Frontier - By Sourav Mishra (@souravvmishra)

Google has officially replaced First Input Delay (FID) with Interaction to Next Paint (INP). This means your SEO is no longer just about how fast you load, but how fast you respond to the user.

In this guide, I, Sourav Mishra, explain how to hunt down and fix INP issues in Next.js.

What is INP?

INP measures the time it takes for your page to visually respond after a user interaction (click, tap, or keypress). An INP under 200ms is considered "Good."

Key Strategies for Next.js

1. The useTransition Hook

Stop blocking the thread with heavy state updates. Use useTransition to mark updates as non-urgent, allowing the browser to stay responsive for clicks.

const [isPending, startTransition] = useTransition();

const handleClick = () => {
  startTransition(() => {
    // Heavy filtering or sorting logic
    setItems(filteredData);
  });
};

2. Optimistic UI

Nothing kills INP like waiting for an API response. Use the useOptimistic hook to update the UI instantly before the server confirms the action. This is the secret to a "Page 1" user experience.

Why AI Agents Care About INP

AI search engines (GEO) prioritize sites that don't just provide answers but lead to "helpful interactions." High INP scores are a proxy for high-quality engineering, which increases your citation authority.

See my Mastery guide on GEO for more details.

Authored by Sourav Mishra.