Fixing slow responses to taps
🎯You'll be able to
Find and fix slow responses to taps and typing so INP stays within 200 ms.
🏠The everyday picture
At a ticket counter, if the clerk finishes filling a long form for one person before even looking up at the next, everyone waits. A good clerk acknowledges each person straight away and finishes paperwork in between.
📘What it really is
- INP is poor when the main thread is busy as a person taps, or when the work after a tap takes long before the screen updates.
- Ways to improve it:
- break up long tasks: split work into smaller pieces and let the browser respond in between (yield with
setTimeoutorscheduler.yield()where supported); - show feedback first: update the button state immediately, then do slower work;
- defer non-urgent updates: React's
useTransitionmarks updates as non-urgent so typing and taps stay responsive; - do less: memoise, virtualise long lists, avoid re-rendering the whole page (FE1);
- move heavy work off the main thread with a Web Worker;
-
tame third-party scripts: load chat widgets, analytics and tag managers after the page is interactive, or only when needed.
-
Measure INP in the field; in the lab, use the Performance panel while tapping, and watch Total Blocking Time.
📝A worked example
Kirana's "Add to cart" tap took 220 ms because it recalculated every offer for the whole cart before updating the badge.
| Change | Tap to visual update |
|---|---|
| Starting point | 220 ms |
| Update the badge and button immediately; recalculate offers in a transition | 60 ms |
| Load the chat widget only when "Help" is tapped | 45 ms; start-up main-thread time down by 400 ms |
Field INP moved from 180 ms to 110 ms at the 75th percentile.
🌍Where it's used
- Search-as-you-type, filters and carts.
- Pages heavy with third-party scripts: marketing tags, chat, A/B testing.
- Low-end Android devices, where long tasks are much longer.
📝Case scenario
After marketing adds three new tracking tags, complaints arrive that the checkout button "doesn't work the first time". The Performance panel shows the tags running long tasks just as the page becomes visible, so early taps wait. Loading the tags after the page is interactive and removing one unused tag restores quick responses, and the team agrees a review step for new third-party scripts.
🖱️Try it
Find the slowest interaction on your Kirana app with the Performance panel. Apply one of the techniques above, and record the time from tap to visual update before and after on a throttled CPU.
⚠️Common mistakes
- Doing heavy work on every keystroke. Sign: typing in the filter lags. Fix: defer or split the work, for example with
useDeferredValue. - Only testing on desktop. Sign: interaction is fine for you but slow on a phone. Fix: throttle the CPU four times, as the kit does.
🛠️For your project
The starter deals page ranks products with a heavy loop on each change; Project 3 asks you to bring its interaction under 200 ms.
✅Quick check
Name two ways to improve INP.
Show the answer
Break up long tasks, give visual feedback first and defer slower work, or delay third-party scripts.
What does useTransition do?
Show the answer
It marks a state update as non-urgent, so urgent updates such as typing stay responsive.