ratemysite.ai

How to keep Interaction to Next Paint under 200 ms

Interaction to Next Paint should be under 200 milliseconds. It measures how fast the page responds visually after a tap, click or key press, and long JavaScript tasks are the main cause of slow scores. Break up long tasks, defer scripts you do not need now and reduce third-party tags.

By . Updated .

How do you fix it?

  1. Record an interaction in the Chrome DevTools Performance panel and look for tasks longer than 50 ms on the main thread.
  2. Break long tasks into smaller chunks, and yield to the browser between them with setTimeout or scheduler.yield().
  3. Defer or lazy-load scripts that are not needed for the first interaction, and remove unused libraries.
  4. Audit third-party tags such as chat widgets, ads and trackers, and remove those you do not need.
  5. Re-run the audit and confirm the INP check passes.

What is Interaction to Next Paint?

INP is a Core Web Vitals metric that reports the longest delay between a user action, such as a tap, and the next time the screen updates. A score of 200 ms or less at the 75th percentile is good, while over 500 ms is poor. Slow responses make a site feel stuck, and visitors often tap again, which can trigger the action twice.

What makes interactions slow?

The main thread of the browser can do only one job at a time. If it is busy running a long script, a tap must wait. The usual causes are large JavaScript bundles, heavy event handlers, big DOM trees with several thousand nodes, and third-party scripts. Split code so each route loads only what it needs, move expensive work out of click handlers, and keep the DOM small. Measure on a mid-range phone, not a fast laptop.

How much does this check matter?

What else do people ask?

What replaced First Input Delay?
INP replaced FID as a Core Web Vital in March 2024. It looks at all interactions during a visit, not only the first one.
Can I test INP in the lab?
Lab tools approximate it with Total Blocking Time. Real INP comes from field data, so use the Chrome UX Report or real-user monitoring.

Sources