performancecore-web-vitalsinteraction-to-next-paintwebsite-performancefirst-input-delay

Find the exact elements that causes INP issue in Core web vitals score for a website


Google has revealed that it will be replacing FID (First input delay) with INP (Interaction to next paint) as one of the main criteria for core web vitals for a website starting from March 2024. How do we actually determine which elements actually corresponds to INP score from field data.

On searching, found that we can make use of core web vitals JS library to log useful information on which elements corresponds to high INP score.But is there any way we can check in field data like querying CrUX dataset to find the elements causing INP issue.


Solution

  • How do we actually determine which elements actually corresponds to INP score from field data. On searching, found that we can make use of core web vitals JS library to log useful information on which elements corresponds to high INP score.

    The best way, as noted in the Google documentation is by measuring this in the field, using a RUM solution that collects that for you, or using the web-vitals.js library to collect this yourself.

    Without that, it gets more difficult. You can try measuring this in the lab using the web vitals extension or DevTools but there is no guarantee you're replicating the same interactions, in similar conditions, that your users are.

    But is there any way we can check in field data like querying CrUX dataset to find the elements causing INP issue.

    No this is not possible and while we're continuing to look at how to enhance CrUX to provide more information, it is extremely unlikely that individual element selectors will ever be included in CrUX as noted before.