Break Up Long Tasks to Improve INP

Break Up Long Tasks to Improve INP

INP — Interaction to Next Paint — suffers when JavaScript runs one giant task that locks the browser, so taps feel frozen. Breaking that task into smaller pieces lets the browser respond between them. Think of it like pausing a long phone call to answer the doorbell instead of ignoring it.

The playbook:
—
1. In DevTools Performance, find a long task — over 50 milliseconds — after a click.
—
2. Locate the function causing it in your code.
—
3. Where it does a big loop, split it so the browser can breathe between chunks.
—
4. A simple way: wrap a slow step in setTimeout(fn, 0) to defer it.
—
5. Re-record and confirm the long block shrank.

You don't need to make code faster, just less greedy with the browser's attention.

Try this: Find your single longest task after a click and note its length in milliseconds.