On a webpage in a React application, there is some text which comes from API. I am further using linkify-html to convert the embedded links in text to anchor tags. Each anchor tag corresponds to an external link and opens it in a new tab/window. I am using web-vitals to analyze the performance of my page. As per RUM analysis, INP (Interaction to Next Paint) metric is poor due to this a tag's click interaction. I want to understand how is INP for an external link is calculated and what could be potential reasons for this issue?
Clicking on links are a little tricky in terms of INP as the "next paint" is often on the next page and not this page. Therefore they are often excluded when this is the case. The next page load is calculated by LCP and measuring it again with INP makes little sense.
Where they can be seen in INP, is if there is a "next paint" on this page. This can happen in a number of cases:
There also was a bug for this for pages opened in next tabs that was fixed some time ago, but older versions of browsers may still experience this. See if you can filter your field data by browser type to identify if this is the case. Samsung Internet browsers for example are often a number of versions of Chromium behind and so can still show this bug.