I have a static site and my INP for mobile is in the 200-300 range, just insde the "Needs improvement" bucket. I've tried debugging with web-vitals.js to figure out where the latency is coming from. I ended up building a super small proof-of-concept after narrowing down where the interaction was coming from. The following code results in a 248ms delay when I click the button for mobile in Chrome:
<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<body>
<button>Share</button>
</body>
</html>
There is no CSS, Javascript, or any other scripts running on the page but I'm still seeing latencies as high as 240ms. I'm using Chrome's Performance tab to measure the result. Any suggestions on improving this?
As discussed in the comments, if you don't have a meta viewport set (or have one set to zoomed out), then mobile devices assume your site is not responsive, and enable a special "double tap to zoom" mode.
It gives up to 300ms to see if you're going to tap again. This badly affects INP since it's above the 200ms good threshold!
Telling the device you have a responsive, mobile-friendly, website disables this feature and avoids the issue.
See also: developer.chrome.com/blog/300ms-tap-delay-gone-away