Web vitals onINP reporting elements that do not have any click functionality or handlers attached

Question

In order to improve INP of my application, I integrated web-vitals@3/dist/web-vitals.attribution.iife.js to get field data and work on actual interactions causing poor INP score. However in my data I see a lot of elements reported actually dont have click functionality/handlers attached. For instance there are many div/span/p elements reported in the report. What is the reason behind such a behaviour. This basically makes improvement exercise very ineffective and lengthy. I am collecting attribution.eventTarget for the elements on which interactions happen.

attribution.eventTarget

function sendToAnalytics({name, value, rating, attribution}) {
  // here I am creating req payload with element as attribution.eventTarget 
}

onINP(sendToAnalytics);

Answer 1

There's a few reasons why seemingly non-interactive targets can be marked as the INP target, the two most common of which are:

• In Chrome 125 - 128 we stopped reporting scroll start elements, which was a common reason for this—particularly on mobile. That's fully rolled out now but, as it's a fairly recent change, you may still be getting reports from those who haven't upgraded their browsers or other Chromium-based browsers which haven't incorporated this change yet. Check if this is falling over time and/or which browsers are still reporting this.

• Global event handlers that run on all elements at body level are quite common, often because the framework used registers them at a high level and then acts upon the element affected. Similarly, some tools like Google Tag Manager or the like can also register global event handlers. Check to ensure your div/span/p elements don't actually have inherited event handlers

I also note you're using v3 of the library and would strongly recommend upgrading to v4 (and v5 soon!) so ensure you have the latest improvements to the library.