Skip to content
Optimal Lab

Frontend · interactive

Long tasks and INP

Interaction to Next Paint measures how long after a click the screen visibly responds. A click handler that filters 10,000 rows for 300 ms blocks the next frame, so the page feels frozen. You can't make the work disappear, but you can paint first.

Main thread after the click

filter 10k rows
click400 ms

Green line: first paint after the click. Red: tasks over 50 ms.

INP
316 ms · needs improvement
Results ready
316 ms

Nothing can paint until the 300 ms task ends. Users see no response and click again.

Handler

Step 1 of 4

  1. 1

    Long tasks block everything

    Anything over 50 ms on the main thread delays input handling and painting.

    DevTools marks them with red corners.

  2. 2

    INP: click to next paint

    A Core Web Vital. Good is under 200 ms for the slowest interactions a user has.

    Replaced FID in 2024.

  3. 3

    Update the UI, then yield

    Do the visible change first, then split the rest into chunks and yield to the browser between them.

    await scheduler.yield()

  4. 4

    Do less, or do it elsewhere

    Virtualise long lists, debounce typing, and move heavy computation to a worker.

    React's useTransition marks updates as interruptible.

In production

Tools and technologies

INP is a Core Web Vital measured on real users.

Not tied to one language — use these names when you search docs or design a system.