I just received some data from Google Web Vitals JS Library. Any after refining the reports, I noticed that many huge INP penalty happened on an element that is not even clickable.
And the dom structure is like this:
The <b>
itself is not a button, just wrapped inside the button. What should I fix? How can I debug this situation?
This is expected. The web-vitals.js library returns the element clicked (using event.target
), even if that click bubbles up to a parent element to be handled.
The Event Timing API doesn't include a currentTarget
to get the actual event handler but even if it did that would be less useful if the event handler is at a much higher level (e.g. the document).
Additionally, the reason it doesn't include currentTarget
is that INP does not event require an explicit event handler. Just clicking on an non-interactive element (e.g. double clicking text to highlight it) can be the INP event, especially if the main thread is blocked and unable to handle that "no-op" click. Now most of those will be quick even if the main thread is busy as most modern browsers handle most of those sorts of browser-UI events (highlighting, scrolling...etc.) separate to the main thread, but they still count as INP-potential events.