Surface new Interaction to Next Paint field metric in PageSpeed widget

The Interaction to Next Paint metric was recently introduced as a new crucial field metric, with the goal to provide a more accurate representation on page interactivity than today’s default, the First Input Delay metric.

The Interaction to Next Paint metric is currently experimental, but due to its importance in relation to CWV, we should surface it in Site Kit’s PageSpeed widget as well - with an annotation that it is experimental.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Based on this implementation plan, the PageSpeed widget should be enhanced as follows:

• FID should be moved to the end of the field metrics list.
• TBT should be moved to the end of the lab metrics list.
• INP (“Interaction to Next Paint”) should be added as a 4th metric to the field metrics list, if the API response includes a loadingExperience.metrics.EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT property.
  • Its description should be: How quickly your page responds when people interact with it
  • It should be marked with an “experimental” badge/label, looking similar to other “experimental” badges around the product (e.g. on Idea Hub).
• The Storybook stories with field data should be updated to include the new metric.

Implementation Brief

• Reorganize the FID and TBT metrics as outlined in the ACs.
• Add a new experimental boolean prop to the ReportMetric component:
  • If set as true, display a Badge with “experimental” label right after the title.
• In the FieldReportMetrics component:
  • Add EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT to the map of field metrics.
  • Add a new ReportMetric component instance below the other ones if the above property is available in the API response.
  • Set the title and description based on the ACs, and set the displayValue and category in the same way it is set for FID.
  • Set the new experimental prop (see above).
• Modify the Storybook API mock data so that it includes the EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT property to ensure INP is shown.
• Complete and merge #5200.

Test Coverage

• N/A

QA Brief

Use a site that has field data available. If you don’t have access to such a site, you can filter in the URL of such a site even when you’re using another site. For example, to rely on https://web.dev, add this filter temporarily to your site’s codebase:

add_filter(
	'googlesitekit_site_url',
	function() {
		return 'https://web.dev';
	}
);

• With the PSI module set up and the filter included, go to the PageSpeed widget. Verify that the new “Interaction to Next Paint” metric is included as 4th metric and that its title and description match the ACs. Furthermore ensure it is marked as experimental.
• Also, with whatever values you get displayed there, do a quick cross-check whether the category label and color correctly fall under the following:
  • Values below 200 are good.
  • Values between 200 and 500 need improvement.
  • Values above 500 are poor.
• Also make sure that the First Input Delay metric is displayed right above the new Interaction to Next Paint metric.
• In the lab data tab, make sure that Total Blocking Time is now displayed as the last metric.

Changelog entry

• Add new experimental Interaction to Next Paint field metric to PageSpeed dashboard widget.

[felixarntz]

@eclarke1 @FlicHollis Per chat conversation with @marrrmarrr, we confirmed that this should go into the upcoming 1.75.0 release, so I’ve added it to the issue.

@aaemnnosttv @tofumatt It’s still in IB review, but it also has a PR and can go into Code Review pretty much after the IB is approved, so I think we’re set up to include it in the upcoming release. If we merge off into main before this PR gets merged, of course we need to change its base accordingly.

[wpdarren]

QA Update: ✅

@tofumatt thanks for the detailed QAB, the magic you can do with a little bit of code! 😄

Verified:

• The new “Interaction to Next Paint” metric is included as 4th metric and that its title and description match the ACs.
• Cross-checked that the category label and color are correct.
• The First Input Delay metric is displayed right above the new Interaction to Next Paint metric.
• In the lab data tab, the Total Blocking Time is now displayed as the last metric.
• Checked the changes on desktop and small screen sizes.