optimizing for inp: the new next.js performance metric - By Sourav Mishra (@souravvmishra)

google just swapped out fid for interaction to next paint (inp). so basically, seo isn't just about load speed anymore, it's about how fast your app responds.

here is how i fix inp issues in next.js.

what exactly is inp?

inp measures how long it takes for your page to visually update after a click or tap. anything under 200ms is considered good.

how to fix it

1. the useTransition hook

stop blocking the ui with heavy stuff. use useTransition to tell react "hey, this update isn't urgent."

const [isPending, startTransition] = useTransition();

const handleClick = () => {
  startTransition(() => {
    // heavy filtering logic goes here
    setItems(filteredData);
  });
};

2. optimistic ui

waiting for an api is the easiest way to kill your inp score. use the useOptimistic hook to update the screen instantly.

ai engines love fast sites. high inp scores tell them your site is well-built.

check out my geo mastery guide for more on that.