Search code examples
javascripthtmlcore-web-vitals

Poor INP when clicking on external link


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?


Solution

  • 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:

    • The link is a so-called "soft navigation" on an SPA so, as far as the browser is concerned, that is still "this page".
    • Where there is a JavaScript event handler on the link or on the page which results in a paint (e.g. a beforeunload handler that pops up a "You have unsaved data, do you realy wanna leave" alert).

    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.